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; 
}