Skip to content

Commit d77a97c

Browse files
gyj12gyj12
committed
增加仿多边形裁剪功能：通过绘制多边形容器，显示加载的地图。支持WMTS和WMS
1 parent 7b580ad commit d77a97c

8 files changed

Lines changed: 576 additions & 2 deletions

File tree

‎config/config-leaflet.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,14 @@ var config = {
157157
detail: "基本的图层组控制功能,实际上是透明度空间的使用。",
158158
icon: "layergroupcontrol.png",
159159
update: "最后更新时间：2018-05-30"
160+
}, {
161+
name: "地图裁剪",
162+
file: "boundarycanvas",
163+
diffcult: "1",
164+
detail: "多边形裁剪地图，通过绘制多边形，只显示多边形范围内的地图部分",
165+
icon: "boundarycanvas.png",
166+
update: "最后更新时间：2018-11-2",
167+
person:"基础平台/产品中心-龚跃健"
160168
}]
161169
},
162170
{

‎demo/leaflet/example/map/mapoperation/boundarycanvas.htm‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>地图多边形裁剪</title>
6+
7+
<script include="boundarycanvas,draw" src="../../libs/zondyclient/include-leaflet-local.js"></script>
8+
9+
<style>
10+
html, body, #map {
11+
height: 100%;
12+
margin: 0px;
13+
}
14+
15+
#infoPanel {
16+
position: absolute;
17+
left: 0px;
18+
right: 0px;
19+
top: 21px;
20+
text-align: center;
21+
z-index: 1;
22+
}
23+
24+
#info {
25+
background-color: #ffffff;
26+
border-radius: 5px;
27+
box-shadow: 0 1px 7px rgba(0,0,0,0.65);
28+
padding: 10px;
29+
}
30+
</style>
31+
</head>
32+
33+
<body>
34+
<div id="infoPanel">
35+
<span id="info">
36+
Draw polygons or rectangles to see parts of the map
37+
</span>
38+
</div>
39+
40+
<div id="map"></div>
41+
42+
<script type="text/javascript">
43+
var map = new L.Map('map', {
44+
center: new L.LatLng(30.58791323870018, 114.3474077911377),
45+
zoom: 10
46+
}),
47+
drawnItems = L.featureGroup().addTo(map);
48+
L.control.layers({
49+
"google": L.tileLayer('http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}', {
50+
attribution: 'google'
51+
}).addTo(map)
52+
}, {
53+
'drawlayer': drawnItems
54+
}, {
55+
position: 'topleft',
56+
collapsed: false
57+
}).addTo(map);
58+
map.addControl(new L.Control.Draw({
59+
draw: {
60+
marker: false,
61+
polyline: false,
62+
circle: false,
63+
circlemarker: false,
64+
polygon: {
65+
allowIntersection: true,
66+
showArea: true
67+
}
68+
}
69+
}));
70+
71+
map.on(L.Draw.Event.CREATED, function (event) {
72+
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
73+
L.TileLayer.boundaryCanvas(osmUrl, {
74+
boundary: event.layer.toGeoJSON(),
75+
attribution: "osm"
76+
}).addTo(map);
77+
78+
});
79+
</script>
80+
</body>
81+
82+
</html>

‎demo/leaflet/gallery/map/mapoperation/boundarycanvas.png‎

189 KB
Loading

‎demo/leaflet/markdown/map/mapoperation/boundarycanvas.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
### 地图多边形裁剪
2+
> `说明:`这里的地图裁剪，不是真正意义上的裁剪，只是通过绘制一个多边形地图容器，在绘制的多边形容器中显示要裁剪的地图，以达到显示为裁剪的效果。
3+
4+
```javascript
5+
//BoundaryCanvas.js有两种调用方法：
6+
//第一种：传入地图路径url
7+
L.TileLayer.boundaryCanvas(url, {
8+
boundary: geoJSON,//绘制的多边形范围，使用Leaflet标注的GeoJSON格式
9+
attribution: ""
10+
}).addTo(map);
11+
12+
//第二种：传入地图，layer可以是多图层
13+
L.TileLayer.BoundaryCanvas.createFromLayer(layer, {
14+
boundary: geoJSON,//绘制的多边形范围，使用Leaflet标注的GeoJSON格式
15+
attribution: ""
16+
}).addTo(map);
17+
18+
```
19+
20+
>gitHub上原生插件BoundaryCanvas.js只支持标准的瓦片地图，在此基础上，`新增支持WMTS和WMS`，具体使用方法如下：
21+
22+
```javascript
23+
//对于wmts和wms新增ogc属性，如果传入的是wmts地图，则ogc设置如下：
24+
ogc={
25+
wmts:true//（默认为false）
26+
}
27+
//如果传入的是wms地图，则ogc设置如下：
28+
ogc={
29+
wmts:true//（默认为false）
30+
}
31+
L.TileLayer.BoundaryCanvas.createFromLayer(layer, {
32+
boundary: geoJSON,//绘制的多边形范围，使用Leaflet标注的GeoJSON格式
33+
ogc:ogc
34+
}).addTo(map);
35+
36+
```

0 commit comments

Comments
 (0)