外部マーカーによるクラスタマーカーのリーフレット・トリガー・イベント

Question

今後のプロジェクトでLeaflet.jsについて学び始めました。 を、私は地図上に表示マーカーのリストを作成する必要があり、リスト項目が（またはマウスオーバー）を推移しているときに、それは上のどこの位置が表示されます：私が達成しようとしています何

マップ（単一のマーカーのために、それは、その色を変更する必要があります。クラスタ化されたマーカーのために、それはず表示、それは我々がそれを置くと...振る舞うと、おそらくあまりにも可能であればその色をどのように変化するかのような報道ライン） 。 地図はズームレベルと同様に変更するべきではありません。単純に言えば、私はマップ上のマーカー/クラスターを強調表示する必要があります。私は今、何を達成した

：私は単一のマーカーにそれを行うことができると思います。私はそれがクラスタ化されたマーカーに実現するための方法を見つけることができなかった：何について私はスーパーイライラ

。

作成したマーカーを保存するには、グローバルな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だけ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/

を、私は「もう一つの興味深いUIを考えるのではなく、あなたが得る通常のカバレッジポリゴンを示します手動で "クラスタをホバリングすると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; 
}