1 Star 0 Fork 0

panzhiyue / Leaflet-TileLayer.Clip

Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

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:

1626855286980

show:

1626855311475

构造函数

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

Comments ( 0 )

Sign in for post a comment

About

TileLayer.Clip能够实现裁剪或显示任意多边形的切片图层。使用HTML5 Canvas渲染。主要代码参考 [TileLayer.BoundaryCanvas](https://github.com/aparshin/leaflet-boundary-canvas) 。 spread retract
JavaScript and 2 more languages
MulanPSL-2.0
Cancel

Releases (1)

All

Contributors

All

Activities

load more
can not load any more
1
https://gitee.com/panzhiyue/Leaflet-TileLayer.Clip.git
git@gitee.com:panzhiyue/Leaflet-TileLayer.Clip.git
panzhiyue
Leaflet-TileLayer.Clip
Leaflet-TileLayer.Clip
master

Search

010926 d3736ce6 1850385 010927 f77ebe53 1850385