1 Star 0 Fork 0

panzhiyue / Leaflet-Canvas.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-Canvas.Clip

Canvas.Clip是一个能够裁剪或显示任意多边形内部数据的渲染器。 demo

示例

        window.onload = function () {
            var renderer = L.Canvas.clip({ mode: "show" });
            var map = L.map('map', { crs: L.CRS.EPSG4326, renderer: renderer }).setView([30.46337852800008, 120.967045726], 6);

            //天地图影像底图
            L.tileLayer('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}', {
                name: "中国天地图影像",
                maxZoom: 20,
                tileSize: 256,
                zoomOffset: 1
            }).addTo(map);

            L.tileLayer('http://t2.tianditu.gov.cn/cva_c/wmts?tk=6dfd31e3b55a8466f34997aee5551a9c&layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
                name: "中国天地图影像标注",
                maxZoom: 20,
                tileSize: 256,
                zoomOffset: 1
            }).addTo(map);

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

                    let bounds = geojson.getBounds();
                    let min = bounds.getSouthWest();
                    let max = bounds.getNorthEast();
                    let minX = min.lng, maxX = max.lng, minY = min.lat, maxY = max.lat;
                    //minX = -180; maxX = 180; minY = -90; maxY = 90;
                    for (let i = minX; i < maxX; i = i + 0.3) {
                        for (let j = minY; j < maxY; j = j + 0.3) {
                            L.circle([j, i], { radius: 200, color: "#ff0000", fillColor: "#ff0000" }).addTo(map);
                        }
                    }
                }
            });

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

效果图

clip:

1626922228619

show:

1626922215229

构造函数

L.Canvas.clip(<CanvasClip options> options?)

options:

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

方法

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

Comments ( 0 )

Sign in for post a comment

About

Canvas.Clip是一个能够裁剪或显示任意多边形内部数据的渲染器。 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-Canvas.Clip.git
git@gitee.com:panzhiyue/Leaflet-Canvas.Clip.git
panzhiyue
Leaflet-Canvas.Clip
Leaflet-Canvas.Clip
master

Search