Question

我开始学习如何使用传单。我正在尝试使用标记创建地图。如果你将它们悬停，它们应该显示一条路线。如果鼠标离开标记，则应删除该路径。（这部分有效）当您单击标记时，即使鼠标离开标记，路径也应保留在地图上。因此，我需要复制路径图层，以便在鼠标离开标记时不会删除它。或者有一种我不知道的更好的方法。

function Route() {
  DirectionsLayerLong = omnivore.gpx('GPX/ Route_long.gpx');
  DirectionsLayerLong.on('ready', function() {
    this.setStyle(style_long);
  });
  DirectionsLayerShort = omnivore.gpx('GPX/Route_short.gpx');
  DirectionsLayerShort.on('ready', function() {
    this.setStyle(style_short);
  });
  return DirectionsLayer = L.featureGroup([DirectionsLayerLong, DirectionsLayerShort]);
};
var Marker = L.marker([50, -100], {
  icon: iconfu
}).addTo(map);
Marker.on('mouseover', function(e) {
  Route();
  DirectionsLayer.addTo(map);
});
Marker.on('mouseout', function(e) {
  DirectionsLayer.remove()
});
Marker.on('click', function(e) {
  DirectionsPermaLayer.remove();
  Route();
  DirectionsPermaLayer = DirectionsLayer;
  DirectionsPermaLayer.addTo(map);
});

我可以简单地将杂食动物与另一个变量一起使用，但我想重复使用该功能。

Answer 1

最简单的解决方案就是在点击标记时删除mouseout event listener：

Marker.on('click', function(e) {
  Marker.off('mouseout');
});

克隆你的路由层会有点复杂（更不用说不必要了，如果删除事件监听器可以解决你的问题），但值得探索如何做到这一点。首先，可以在w3schools上找到您不能仅使用DirectionsPermaLayer = DirectionsLayer创建副本的简要说明：

对象是可变的：它们通过引用而非值来解决。

如果y是对象，则以下语句不会创建副本   Y：
var x = y;  // This will not create a copy of y.
对象x不是y的副本。是 y。 x和y都指向   相同的对象。

对y的任何更改也会改变x，因为x和y是相同的   对象

在Javascript中有many ways cloning an object，但我怀疑其中大部分都无法用于克隆传单图层，因为所有Leaflet的内部ID都将与对象一起复制，从而导致不可预测的行为。最佳策略可能是使用DirectionsLayerShort方法将DirectionsLayerLong和.toGeoJSON转换为GeoJSON，然后使用L.geoJson将其读回：

var Short2 = L.geoJson(DirectionsLayerShort.toGeoJSON()).setStyle(style_short);
var Long2 = L.geoJson(DirectionsLayerLong.toGeoJSON()).setStyle(style_long);
var Directions2 = L.featureGroup([Long2, Short2]).addTo(map);

这可能需要对代码进行一些重构，但它应该可以完成这项工作。

单击复制图层/显示

1 个答案: