forked from FWC1994/clip-polygon
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
158 lines (153 loc) · 6.33 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>多边形切割demo</title>
<link href="./style.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/leaflet/1.3.1/leaflet.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/leaflet.draw/1.0.2/leaflet.draw.css" rel="stylesheet">
</head>
<body onload="loadMap()">
<div id='map'></div>
<div id='msg'>先在地图上点击要裁剪的多边形</div>
<div id='reset' onclick="resetClip()">重置</div>
<div id='github' onclick="toGitHub()"><svg height="32" class="github-icon" viewBox="0 0 16 16" version="1.1" width="32" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></div>
</body>
<script src="https://cdn.bootcss.com/Turf.js/5.1.6/turf.min.js"></script>
<script src="https://cdn.bootcss.com/leaflet/1.3.1/leaflet.js"></script>
<script src="https://cdn.bootcss.com/leaflet.draw/1.0.2/leaflet.draw.js"></script>
<script src="./clip.js"></script>
<script>
var map = null;
var editLayer = null;
var drawView = null;
var polygonLayer = null;
var clipResultLayer = null;
var clipLineLayer = null;
var colorList = ['#00FF66','#66CCFF','#6600FF','#FF9933','#FF3333']
function loadMap(){
// 创建地图对象
map = L.map('map').setView([39.91036,116.403704], 10);
var basemap = L.tileLayer('http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}', {
attribution: ''
}).addTo(map);
// 创建标绘图层
drawView = new L.geoJSON(null, {}).addTo(map);
clipResultLayer = new L.geoJSON(null, {}).addTo(map);
// 创建多边形图层及添加测试geojson数据
polygonLayer = L.geoJSON(null, {
style: function (feature) {
return {color: '#fff'};
}
}).addTo(map);
polygonLayer.addData({
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[
[116.2535,40.009898], [116.25144,39.971495], [116.324225,39.990436],
[116.296072,40.032509], [116.2535,40.009898]
]]
}
});
polygonLayer.addData({
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[[116.490393,39.88435], [116.596823,39.895413], [116.626349,39.784167], [116.409369,39.775197], [116.490393,39.88435]],
[[116.502285,39.870091],[116.516018,39.800887],[116.599789,39.795744], [116.567001,39.870486], [116.502285,39.870091]
]
]
}
});
polygonLayer.addData({
"type": "Feature",
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[[116.361303,39.926488], [116.454001,39.935439], [116.437521,39.874338], [116.359243,39.876973], [116.361303,39.926488]]
],
[
[[116.493530,40.058103], [116.665192,40.064410], [116.677551,39.930801], [116.512756,39.947648], [116.493530,40.058103]]
]
]
}
});
// 添加Leaflet.Draw标绘功能
clipLineLayer = new L.Draw.Polyline(map);
clipLineLayer.setOptions({
showLength:false,
shapeOptions:{
stroke: true,
color: '#3388ff',
weight: 1,
opacity: 0.7,
dashArray: '5,5'
}
})
L.drawLocal.draw.handlers.polyline.tooltip = {
start: '点击地图开始裁剪',
cont: '点击地图开始裁剪',
end: '双击地图或点击最后一个点完成裁剪'
}
//地图或图层事件绑定
/* map.on('click',function(evt){
console.log(evt.latlng.lng.toFixed(6)+','+evt.latlng.lat.toFixed(6))
}) */
polygonLayer.on('click', function(evt) {
if(drawView){
drawView.clearLayers()
}
editLayer = evt.layer;
polygonLayer.setStyle(
{color: '#fff'}
)
editLayer.setStyle(
{color: '#ecf53e'}
)
clipLineLayer.enable();
document.getElementById('msg').innerText='绘制切割线'
});
map.on('draw:created', function(evt){
drawView.addLayer(evt.layer)
var clipLine = L.polyline(evt.layer.editing.latlngs[0])
var intersects = turf.lineIntersect(turf.polygonToLine(editLayer.feature), clipLine.toGeoJSON());
try{
var clippedPolygon = geoUtil.polygonClipByLine(editLayer.feature,clipLine.toGeoJSON());
for(var i=0; i < clippedPolygon.features.length; i++){
var newLayer = new L.geoJSON(clippedPolygon.features[i], {
style: {color:colorList[i]}
});
clipResultLayer.addLayer(newLayer);
}
document.getElementById('msg').innerHTML='<div style="color:#3fcf3f;">多边形裁剪成功</div>'
}catch(error){
document.getElementById('msg').innerHTML='<div style="color:#ff0000;">'+error.state+':</br>'+error.message+'</div>'
}
})
var baseMaps = {
"蓝黑底图": basemap,
};
var overlayMaps = {
"polygon图层": polygonLayer,
"裁剪result图层": clipResultLayer
};
L.control.layers(baseMaps, overlayMaps).addTo(map);
}
function resetClip(){
clipResultLayer.clearLayers();
drawView.clearLayers();
polygonLayer.setStyle(
{color: '#fff'}
)
document.getElementById('msg').innerText='先在地图上点击要裁剪的多边形';
}
function toGitHub(){
window.open("https://github.com/FWC1994/clip-polygon");
}
</script>
</html>