Leaflet通过外部元素在集群标记上触发事件

Question

我刚开始了解我即将开展的项目的Leaflet.js。

什么，我试图完成： 我需要它显示在地图上标记的列表，并在列表项正在徘徊（或鼠标悬停）它会显示在那里的位置地图（为单标记，应该改变其颜色。对于集群标记，它应该显示覆盖率线就像当我们再次在它是如何工作..也许改变它的颜色太多，如果可能的话） 。 不应该改变地图以及缩放级别，简单地说，我需要突出显示地图上的标记/聚类。

什么我现在已经完成：我能做到这一点的单标记。

我超级沮丧：我没能找到一个方法来做到这一点上集群标记。

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

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 LIB我熟悉是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/

话虽这么说，我认为另一个有趣的用户界面，而不是显示常规的覆盖面，你得到的时候“手动“悬停一个集群，将spiderfy集群并突出显示您的标记。不是很容易实现，但结果似乎对我很好。这里是一个快速的尝试，它可能会需要更多的工作，以使其防弹：

演示：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; 
}