@panzhiyue/leaflet-tilelayer.clip

leaflet-TileLayer.Clip

TileLayer.Clip能够实现裁剪或显示任意多边形的切片图层。使用HTML5 Canvas渲染。主要代码参考 TileLayer.BoundaryCanvas 。但是BoundaryCanvas无法应用于天地图。 demo

示例

        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:

show:

构造函数

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	设置面集合