kcp 介绍与源代码分析_leaflet结合turf.js实现绘制图形缓冲分析buffer(附源码下载)...

最新推荐文章于 2024-09-19 10:16:53 发布

weixin_36438989

最新推荐文章于 2024-09-19 10:16:53 发布

阅读量310

点赞数

文章标签： kcp 介绍与源代码分析

本文链接：https://blog.csdn.net/weixin_36438989/article/details/112381916

版权

本文介绍了如何使用turf.js在leaflet中实现图形缓冲分析，并提供了源码示例。通过核心代码展示，辅助读者理解这一功能的实现过程。此外，还提及了GIS之家的作品店铺和源码咨询渠道，供感兴趣的人进一步学习。

摘要由CSDN通过智能技术生成

前言

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); 
        } 
     } 
  });
……

更多详情以及源码见下面链接：

leaflet结合turf.js实现绘制图形缓冲分析buffer(附源码下载) －小专栏xiaozhuanlan.com