leaflet结合turf.js实现绘制图形缓冲分析buffer（附源码下载）

leaflet结合turf.js实现绘制图形缓冲分析buffer（附源码下载）前⾔
leaflet ⼊门开发系列环境知识点了解：
，详细介绍 leaflet 每个类的函数以及属性等等
，leaflet 的插件库，⾮常有⽤
内容概览
leaflet结合turf.js实现绘制图形缓冲分析buffer功能
源代码demo下载
效果图如下：
部分核⼼代码，完整的见源码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('/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(tLng(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(yer);
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源码见⼩专栏⽂章尾部：
⽂章尾部提供源代码下载，对本专栏感兴趣的话，可以关注⼀波。