leaflet結合turf.js實現多邊形分割(附源碼下載)

時間 2020-01-09

標籤 leaflet 結合 turf.js turf 實現多邊形分割源碼下載欄目 JavaScript 简体版

原文原文鏈接

前言

leaflet 入門開發系列環境知識點了解：css

leaflet api文檔介紹，詳細介紹 leaflet 每一個類的函數以及屬性等等

leaflet 在線例子

leaflet 插件，leaflet 的插件庫，很是有用

內容概覽

leaflet結合turf.js實現多邊形分割
源代碼 demo 下載html

效果圖以下：
git

本篇實現的思路：turf.js中提供了一中多邊形的裁剪方法是使用多邊形去裁剪多邊形，可是若是實際工做中須要使用到線去裁剪多邊形卻沒法知足。恰好單位有個項目需求就是利用線去分割圖形的，在github搜索，找到一篇利用leaflet結合turf.js實現多邊形分割的，github地址以下：https://github.com/FWC1994/clip-polygongithub

完整代碼以下：

<!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>
</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',{attributionControl: false}).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='先在地圖上點擊要裁剪的多邊形';
}
</script>
</html>