如何解决如何使用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 举报,一经查实,本站将立刻删除。