2017-07-27 9 views
0

これは前の質問:Leafletjs dynamically bound map to visible overlaysに関連しています。目に見えるマーカー/クラスターに動的に結合するリーフレット

私は今Leaflet.markerclusterプラグインでLeaflet.FeatureGroup.SubGroupプラグインを使用しています。すべての可視マーカーとマーカークラスターにバインドされたマップを設定しようとしています。私はテストに3座標を使用しています:

[43.6425657, -79.38705569999999] 
[43.7164673, -79.3395846] 
[-41.3142772, 174.8135975] 

これは、これまでのコードです:

var map = L.map("mapid"); 
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(map); 

map.setView([43.6532, -79.3832], 2); 

var parentGroup = L.markerClusterGroup().addTo(map), 
    consultingMarkers = L.featureGroup.subGroup(parentGroup).addTo(map), 
    otherMarkers = L.featureGroup.subGroup(parentGroup).addTo(map); 

// subGroup1 
L.marker([43.6425657, -79.38705569999999]).addTo(consultingMarkers); 
L.marker([43.7164673, -79.3395846]).addTo(consultingMarkers); 

// subGroup2 
L.marker([-41.3142772, 174.8135975], {icon: otherIcon}).addTo(otherMarkers); 

var overlays = { 
    'consulting': consultingMarkers, 
    'other': otherMarkers 
}; 

L.control.layers(null, overlays, { 
    collapsed: false 
}).addTo(map); 

map.on('overlayadd overlayremove', function() { 
    var bounds = parentGroup.getBounds(), 
     southWest = bounds.getSouthWest(); 

    // Fit bounds only if the Parent Group actually has some markers, 
    // i.e. it returns valid bounds. 
    if (southWest && !southWest.equals(bounds.getNorthEast())) { 
    map.fitBounds(parentGroup.getBounds()); 
    } 
}); 

はこれまでのところ、私はこれらの問題に実行しています:

  1. 地図はしていません[-41.3142772、174.8135975]座標に結びついている
  2. "consulting"層のチェックを外しても、他の層のマーカにはマップが拘束されません。座標は[-41.314277 2、174.8135975]。

更新:これは単一のマーカーではこの境界問題を抱えているようです。私は別のマーカ座標[43.76089289999999、-79.4103427]を追加しようとしましたが、それはクラスタ内にあります。しかし、私は "コンサルティング"クラスタを削除し、 "他の"層を削除する場合。マップはまだマップ上に残っている最後のマーカーにバインドされていません。

答えて

1

サブグループの1つにマーカーが1つしかない場合、map.fitBoundsは実行されないため、正しく理解すれば困惑しますか?

この場合、チェックの予想される動作です.boundsがヌル領域を表す場合、次のブロックの実行を回避します。つまり、0または1個のマーカーがあります。

bounds.isValid()のチェックを置き換えると、マーカーが0の場合のみ回避されますが、正確に1つのマーカーがある場合は、次のブロックを実行できるため、ヌル領域に境界を合わせようとします。そのような場合、リーフレットはその単一のマーカーをパンしてmaxZoomにズームします。

map.on('overlayadd overlayremove', function() { 
    var bounds = parentGroup.getBounds(); 

    if (bounds.isValid()) { 
    map.fitBounds(bounds); 
    } 
}); 

デモ:https://jsfiddle.net/3v7hd2vx/355/

+0

がチェックNorthEast' '' SouthWest'を明確にしていただきありがとうございます。 checkを 'bounds.isValid()'に置き換えることで、マップを更新するときに動作します。また、マップがロードされたときに 'map.fitBounds(parentGroup.getBounds());')を追加して、可視のマーカーにバインドするようにしました。 – teresa

関連する問題