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