Leaflet GeoJSON在线编辑思路

最新推荐文章于 2024-09-09 15:44:39 发布

Kominmin

最新推荐文章于 2024-09-09 15:44:39 发布

阅读量224

点赞数 3

文章标签： json javascript

本文链接：https://blog.csdn.net/m0_74020191/article/details/139592279

版权

加载GeoJSON图层

//基于L.GeoJSON.AJAX()函数  
//ShopUrl：数据存储路径   
var ShopLayer= new L.GeoJSON.AJAX(ShopUrl,{
        pointToLayer: function (feature, latlng) {
          return L.marker(latlng, {icon: ShopIcon});
        },
        onEachFeature: function(feature, layer) {
          layer.bindPopup(feature.properties.Shop_name);
        },
      });

web端编辑GeoJSON数据的思路

基于leaflet.draw.js和Leaflet.Editable.js的可行方法是利用ajax将GeoJSON数据基于坐标转化为可编辑多边形，可以配合编辑事件和后端完成对GeoJSON的编辑

  $.ajax({
      url:staticUrl1,//GeoJSON数据存储路径
      dataType: 'json',
      success: function(data){
        var thisTime = true;
        data.features.forEach(function(currentFeature){
          var latLngs = [currentFeature.geometry.coordinates[1], currentFeature.geometry.coordinates[0]];//经纬对调
          var marker = L.marker(latLngs).addTo(editlayer); // 假设你已经创建了一个Leaflet图层实例命名为editlayer
          marker.dragging.enable();//可拖拽，可以根据需求设置编辑权限
      },
      failure: function(data){
          console.log('The data wasn\'t received');
      }
    });