前言

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原始碼見小專欄文章尾部：小專欄

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