# Leaflet-TileLayer.Clip

**Repository Path**: csl125/Leaflet-TileLayer.Clip

## Basic Information

- **Project Name**: Leaflet-TileLayer.Clip
- **Description**: TileLayer.Clip能够实现裁剪或显示任意多边形的切片图层。使用HTML5 Canvas渲染。主要代码参考 [TileLayer.BoundaryCanvas](https://github.com/aparshin/leaflet-boundary-canvas) 。
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2024-12-27
- **Last Updated**: 2024-12-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# leaflet-TileLayer.Clip

TileLayer.Clip能够实现裁剪或显示任意多边形的切片图层。使用HTML5 Canvas渲染。主要代码参考 [TileLayer.BoundaryCanvas](https://github.com/aparshin/leaflet-boundary-canvas) 。但是BoundaryCanvas无法应用于天地图。  [demo](http://examples.panzhiyue.website/leaflet-TileLayer.clip/examples/index.html)

## 示例 

```javascript
        window.onload = function () {
            var map = L.map('map',{crs:L.CRS.EPSG4326}).setView([30.46337852800008, 120.967045726], 6);
            //var map = L.map('map').setView([30.46337852800008, 120.967045726], 7);
            var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
                osmAttribution = 'Map data © 2012 OpenStreetMap contributors';

            var geojson;
            var layer;
            $.ajax({
                url: "../resources/json/ZJ_quxian_RH.json",
                success: function (data) {
                    //添加GeoJSON数据，在地图中显示
                    geojson = L.geoJSON(data);

                    //天地图影像底图
                    layer = L.TileLayer.clip('http://t4.tianditu.gov.cn/vec_c/wmts?tk=6dfd31e3b55a8466f34997aee5551a9c&layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
                        polygons:[geojson.getLayers()[0]],
                        name: "中国天地图影像",
                        maxZoom: 20,
                        tileSize: 256,
                        zoomOffset: 1,
                        mode: "clip"
                    }).addTo(map);

                
                    // layer = L.TileLayer.clip(osmUrl, {
                    //     //boundary: data,
                    //     polygons:geojson.getLayers(),
                    //     attribution: osmAttribution,
                    //     trackAttribution: true,
                    //     mode: "clip"
                    // }).addTo(map);
                }
            });

            //修改显示模式
            var select = document.getElementById("ddlMode");
            select.onchange = function (event) {
                layer.setMode(event.target.value);
            };

            $("#chkBJ").bind("change",function(){
                console.log
            });
        }
    
    
```

## 效果图

clip:

![1626855286980](README.assets/1626855286980.png)

show:

![1626855311475](README.assets/1626855311475.png)



## 构造函数

```javascript
L.TileLayer.clip(<String> url,<TileLayerClip options> options?)
```

**url:**服务地址

**options:**

- **polygons(Array<L.Polygon>)**:面集合,用于表示显示或者不显示瓦片的区域
- **mode(string)**:显示模式:clip:polygons表示的区域不显示瓦片,show:polygons表示的区域显示瓦片
- 继承L.TileLayer的参数

## 方法

| 名称          | 返回值           | 描述         |
| ------------- | ---------------- | ------------ |
| getMode()     | string           | 获取显示模式 |
| getPolygons() | Array<L.Polygon> | 获取面集合   |
| setMode()     | this             | 设置显示模式 |
| setPolygons() | this             | 设置面集合   |