leaflet結合turf.js實現繪制圖形緩沖分析buffer(附源碼下載)

前言

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

• leaflet api文檔介紹，詳細介紹 leaflet 每個類的函數以及屬性等等
• leaflet 在線例子
• leaflet 插件，leaflet 的插件庫，非常有用

內容概覽

leaflet結合turf.js實現繪制圖形緩沖分析buffer功能
源代碼demo下載

繪制圖形buffer實現借助了一個插件turf.js：http://turfjs.org

效果圖如下：

• 部分核心代碼，完整的見源碼demo下載

var bufferstyle = {
fillColor: "#e6d933",
fillOpacity: 0.3,
stroke: true,
fill: true,
color: "#FF0000",
opacity: 1,
weight: 2,
};
var map = L.map('map');
L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}').addTo(map);
var geojsonLayers = L.featureGroup([]).addTo(map);
var bufferLayers = L.featureGroup([]).addTo(map);
map.setView(L.latLng(22.95186415, 113.90271877), 14); //設置縮放級別及中心點
 
//map.pm.setLang('zh');
map.pm.addControls({
position: 'topleft',
drawCircle: false,
drawMarker:false,
drawCircleMarker:false,
drawPolyline:false,
drawRectangle:false,
drawPolygon:false,
cutPolygon:false,
editMode:false,
dragMode:false,
removalMode:false
});
 
map.on('pm:create', e => {
geojsonLayers.addLayer(e.layer);
map.pm.disableDraw("CircleMarker");
map.pm.disableDraw("Line");
map.pm.disableDraw("Polygon");
});
 
//緩沖分析
$("#buffer_btn").click(function(){
var FeatureCollection = geojsonLayers.toGeoJSON();
console.log("FeatureCollection:",FeatureCollection);
if (FeatureCollection.features.length > 0) {
if(bufferLayers){
bufferLayers.clearLayers();
}
for (var i = 0; i < FeatureCollection.features.length; i++) {
var feature = FeatureCollection.features[i];
var buffered = turf.buffer(feature, Number($("#distance").val())?Number($("#distance").val())/1000.0:0.6, {units: 'kilometers'});
console.log("buffered:",buffered);
var tempgeojsonLayer = L.Proj.geoJson(buffered, {
style: bufferstyle,
});
bufferLayers.addLayer(tempgeojsonLayer);
}
}
});
……

完整demo源碼見小專欄文章尾部：小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波