2

我刚刚开始为即将到来的项目学习 Leaflet.js。

我要完成的工作： 我需要制作一个显示在地图上的标记列表，当列表项悬停（或鼠标悬停）时，它将显示地图上的位置（对于单个标记，它应该改变它的颜色。对于集群标记，它应该显示覆盖线，就像我们悬停它时的行为一样。如果可能的话，也可能改变它的颜色）。地图不应该像缩放级别一样被改变，简单地说，我需要在地图上突出显示标记/集群。

我现在所取得的成就：我能够在Single Marker上做到这一点。 在此处输入图像描述

我非常沮丧的是：我没能找到一种方法让它在Clustered Marker上发生。

我使用全局 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

4

1 回答 1

5

您可能正在寻找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/

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

演示：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;
}
于 2017-09-19T15:47:12.850 回答