由外部元素在集群标记上触发传单事件

Question

我刚刚开始为我即将进行的项目了解 Leaflet.js。

我想要实现的目标:我需要制作一个显示在 map 上的标记列表，当列表项悬停(或鼠标悬停)时，它将显示 map 上的位置(对于单个标记，它应该更改颜色。对于聚集标记，它应该显示覆盖线，就像我们悬停时的行为一样它..如果可能的话也许也改变它的颜色)。 map 和缩放级别不应更改，简单地说，我需要突出显示 map 上的标记/簇。

我现在已经完成的事情:我能够在单个标记上完成它。

让我 super 沮丧的事情:我没能找到一种方法在聚集标记上实现这一点。

我使用全局 var 对象来存储任何创建的标记。

function updateMapMarkerResult(data) {
  markers.clearLayers();
  for (var i = 0; i < data.length; i++) {
    var a = data[i];
    var myIcon = L.divIcon({
      className: 'prop-div-icon',
      html: a.Description
    });
    var marker = L.marker(new L.LatLng(a.Latitude, a.Longitude), {
      icon: myIcon
    }, {
      title: a.Name
    });
    marker.bindPopup('<div><div class="row"><h5>Name : ' + a.Name + '</h5></div><div class="row">Lat : ' + a.Latitude + '</div><div class="row">Lng : ' + a.Longitude + '</div>' + '</div>');
    marker.on('mouseover', function(e) {
      if (this._icon != null) {
        this._icon.classList.remove("prop-div-icon");
        this._icon.classList.add("prop-div-icon-shadow");
      }
    });
    marker.on('mouseout', function(e) {
      if (this._icon != null) {
        this._icon.classList.remove("prop-div-icon-shadow");
        this._icon.classList.add("prop-div-icon");
      }
    });
    markersRef[a.LocId] = marker;   // <-- Store Reference
    markers.addLayer(marker);

    updateMapListResult(a, i + 1);
  }
  map.addLayer(markers);
}

但我不知道哪个对象或属性可以获得簇标记引用。我通过全局变量触发标记事件(仅适用于单个标记)。

...
li.addEventListener("mouseover", function(e) {
    jQuery(this).addClass("btn-info");
    markersRef[this.getAttribute('marker')].fire('mouseover'); // --> Trigger Marker Event "mouseover"
    // TODO : Trigger ClusteredMarker Event "mouseover"
  });
...

这是我当前的https://jsfiddle.net/oryza_anggara/2gze75L6/ ，任何线索都可能有很大的帮助。谢谢。

注意:我熟悉的唯一 js 库是JQuery，我对其他库如Angular.js一无所知

Answer 1

您可能正在寻找 markers.getVisibleParent(marker) 方法，以检索包含的簇，以防您的标记聚集。

不幸的是，这还不足以在该集群上触发事件。覆盖范围显示功能是在集群组上设置的，而不是在其各个集群上设置的。因此，您需要在该组上触发事件:

function _fireEventOnMarkerOrVisibleParentCluster(marker, eventName) {
  var visibleLayer = markers.getVisibleParent(marker);

  if (visibleLayer instanceof L.MarkerCluster) {
    // In case the marker is hidden in a cluster, have the clusterGroup
    // show the regular coverage polygon.
    markers.fire(eventName, {
      layer: visibleLayer
    });
  } else {
    marker.fire(eventName);
  }
}

var marker = markersRef[this.getAttribute('marker')];
_fireEventOnMarkerOrVisibleParentCluster(marker, 'mouseover');

更新了 JSFiddle:https://jsfiddle.net/2gze75L6/5/

话虽这么说，我认为另一个有趣的 UI 不是显示“手动”悬停集群时获得的常规覆盖多边形，而是对集群进行蜘蛛化并突出显示标记。实现起来不太容易，但结果对我来说似乎不错。这是一个快速尝试，可能需要更多工作才能使其防弹:

演示:https://jsfiddle.net/2gze75L6/6/

function _fireEventOnMarkerOrVisibleParentCluster(marker, eventName) {
  if (eventName === 'mouseover') {
    var visibleLayer = markers.getVisibleParent(marker);

    if (visibleLayer instanceof L.MarkerCluster) {
      // We want to show a marker that is currently hidden in a cluster.
      // Make sure it will get highlighted once revealed.
      markers.once('spiderfied', function() {
        marker.fire(eventName);
      });
      // Now spiderfy its containing cluster to reveal it.
      // This will automatically unspiderfy other clusters.
      visibleLayer.spiderfy();
    } else {
      // The marker is already visible, unspiderfy other clusters if
      // they do not contain the marker.
      _unspiderfyPreviousClusterIfNotParentOf(marker);
      marker.fire(eventName);
    }
  } else {
    // For mouseout, marker should be unclustered already, unless
    // the next mouseover happened before?
    marker.fire(eventName);
  }
}

function _unspiderfyPreviousClusterIfNotParentOf(marker) {
  // Check if there is a currently spiderfied cluster.
  // If so and it does not contain the marker, unspiderfy it.
  var spiderfiedCluster = markers._spiderfied;

  if (
    spiderfiedCluster
    && !_clusterContainsMarker(spiderfiedCluster, marker)
  ) {
    spiderfiedCluster.unspiderfy();
  }
}

function _clusterContainsMarker(cluster, marker) {
  var currentLayer = marker;

  while (currentLayer && currentLayer !== cluster) {
    currentLayer = currentLayer.__parent;
  }

  // Say if we found a cluster or nothing.
  return !!currentLayer;
}