@panzhiyue/leaflet-canvas.clip

leaflet-Canvas.Clip

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

npm下载

npm i @panzhiyue/leaflet-canvas.clip

使用

import {canvasclip,CanvasClip} from "@panzhiyue/leaflet-canvas.clip"

示例

        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:

show:

构造函数

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