如何使用Leaflet和Leaflet-Draw使用工具提示显示可编辑的GeoJSON路线

问题描述

我是Leaflet的新手，只是研究它是否适合我的需求。基本上我想要的是：

（完成）以某种样式在地图上显示大（3000+点/多点）的GeoJSON路线。
（完成）如果Feature属性包含一些文本，则显示标签/工具提示。
（完成）单击编辑按钮时，使此路线可编辑。
以高效的方式完成所有工作。

我在这里尝试过的操作：https://codepen.io/tahaerden/pen/GRZqJJj

// polyLINE
// Excellent performance,edit a bit slow,tooltip doesn't work
function runpolyline() {
  var latLongs = connectDots(data);
  var polyline = L.polyline(latLongs,{
    smoothFactor: 9,// stroke,color: 'red',weight: 2,dashArray: '5,7'
  }).addTo(map);
  drawnItems.addLayer(polyline);
  map.fitBounds(polyline.getBounds());
}

// GEOJSON
function runGeoJSON() {
  var geoJsonLayer = L.geoJSON(data,{
    onEachFeature: function (feature,layer) {
      if (feature.properties && feature.properties.name) {
        layer.bindTooltip(feature.properties.name,{ permanent: false });
      }
    },pointToLayer: function (feature,latlng) {
      // Awful performance,edit works,tooltip works
      // return new L.marker(latlng,{
      //   icon: myIcon
      // });
      // Excellent performance,edit works (circle) a bit slow,tooltip works
      return new L.Circle(latlng,{
        radius: 5,fillColor: '#ff7800',color: '#000',weight: 1,opacity: 1,fillOpacity: 0.8,title: 'test',renderer: myRenderer
      });
    }
  }).addTo(map);
  addNonGroupLayers(geoJsonLayer,drawnItems);
  map.fitBounds(geoJsonLayer.getBounds());
}

我尝试了两种解决方案。一个使用polyline，另一个使用GeoJSON，分为两个函数runpolyline和runGeoJSON。您可以呼叫其中一个进行测试。

折线解决方案：

polyline解决方案性能出色。
我认为它不能按功能显示工具提示。
我认为不可能为每个Point设置样式（即在路线上添加箭头）。
单击“编辑图层”按钮后，它可以工作，但是代码冻结了很多。

GeoJSON解决方案（已更新）：

我设法通过使用Circle（而不是CircleMaker）和画布渲染器来提高性能。
借助“ onEachFeature”功能，工具提示可以正常工作。
出于某种原因它出现在海洋中，我认为纬度/经度是相反的。
通过使用addNonGroupLayers函数，现在也可以进行编辑，因为它考虑了MultiPoints。虽然，代码冻结了很多。

问题：

是否可以提高GeoJSON解决方案中编辑路线功能的性能？
是否有更好的方法来实现所有这些目标？最好仅在客户端。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

geojson javascript leaflet leaflet-draw