Leafletのマップに追加された新しいレイヤーをベースマップの最初のレイヤーに強制するにはどうすればよいですか?
非常に基本的なGIS機能であるレイヤーの順序を簡単に変更する方法が見つかりませんでした。何か不足していますか?
リーフレットマップは、Zインデックスを使用して表示順序が制御される「ペイン」のコレクションで構成されます。各ペインにはレイヤーのコレクションが含まれます。デフォルトのペインの表示順序は、タイル->シャドウ->オーバーレイ->マーカー->ポップアップです。エティエンヌが説明したように、bringToFront()
またはbringToBack()
を呼び出すことにより、オーバーレイペイン内のパスの表示順序を制御できます。 L.FeatureGroup
にもこれらのメソッドがあるため、必要に応じてオーバーレイのグループの順序を一度に変更できます。
ペイン全体の表示順序を変更する場合は、CSSを使用してペインのZ-indexを変更するだけです。
新しいマップペインを追加したい場合...まあ、それを行う方法はまだわかりません。
Leaflet APIによると、任意のレイヤーでbringToFront
またはbringToBack
を使用して、そのレイヤーをすべてのパスレイヤーの上部または下部に移動できます。
エティエンヌ
詳細については、Bobby Sudekumがまとめました 素晴らしいデモ ペインのZインデックスの操作を示しています。いつも出発点として使っています。
ここに重要なコードがあります:
var topPane = L.DomUtil.create('div', 'leaflet-top-pane', map.getPanes().mapPane);
var topLayer = L.mapbox.tileLayer('bobbysud.map-3inxc2p4').addTo(map);
topPane.appendChild(topLayer.getContainer());
topLayer.setZIndex(7);
最近これを解決する必要がありましたが、この質問に出くわしました。
これは、CSSハックに依存せず、レイヤーグループで機能するソリューションです。基本的には、レイヤーを削除して、必要な順序で再追加します。
これを現在の回答よりも優れた「ベストプラクティス」として提出します。レイヤーを管理して並べ替える方法を示します。これは、他のコンテキストでも役立ちます。現在の方法では、レイヤーTitle
を使用して並べ替えるレイヤーを識別しますが、実際のレイヤーオブジェクトへのインデックスまたは参照を使用するように簡単に変更できます。
改善、コメント、編集は歓迎され、奨励されています。
JSフィドル: http://jsfiddle.net/ob1h4uLm/
または、下にスクロールして[コードスニペットを実行]をクリックし、それを試してください。最初のズームレベルを、layerGroup
のオーバーラップ効果の説明に役立つポイントに設定しました。
function LeafletHelper() {
// Create the map
var map = L.map('map').setView([39.5, -0.5], 4);
// Set up the OSM layer
var baseLayer = L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);
var baseLayers = {
"OSM tiles": baseLayer
};
this.map = map;
this.BaseLayers = {
"OSM tiles": baseLayer
};
this.LayersControl = L.control.layers(baseLayers).addTo(map);
this.Overlays = [];
this.AddOverlay = function (layerOptions, markers) {
var zIndex = this.Overlays.length;
var layerGroup = L.layerGroup(markers).addTo(map);
this.LayersControl.addOverlay(layerGroup, layerOptions.title);
this.Overlays.Push({
zIndex: zIndex,
LeafletLayer: layerGroup,
Options: layerOptions,
InitialMarkers: markers,
Title: layerOptions.title
});
return layerGroup;
}
this.RemoveOverlays = function () {
for (var i = 0, len = this.Overlays.length; i < len; i++) {
var layer = this.Overlays[i].LeafletLayer;
this.map.removeLayer(layer);
this.LayersControl.removeLayer(layer);
}
this.Overlays = [];
}
this.SetZIndexByTitle = function (title, zIndex) {
var _this = this;
// remove overlays, order them, and re-add in order
var overlays = this.Overlays; // save reference
this.RemoveOverlays();
this.Overlays = overlays; // restore reference
// filter overlays and set zIndex (may be multiple if dup title)
overlays.forEach(function (item, idx, arr) {
if (item.Title === title) {
item.zIndex = zIndex;
}
});
// sort by zIndex ASC
overlays.sort(function (a, b) {
return a.zIndex - b.zIndex;
});
// re-add overlays to map and layers control
overlays.forEach(function (item, idx, arr) {
item.LeafletLayer.addTo(_this.map);
_this.LayersControl.addOverlay(item.LeafletLayer, item.Title);
});
}
}
window.helper = new LeafletHelper();
AddOverlays = function () {
// does not check for dups.. for simple example purposes only
helper.AddOverlay({
title: "Marker A"
}, [L.marker([36.83711, -2.464459]).bindPopup("Marker A")]);
helper.AddOverlay({
title: "Marker B"
}, [L.marker([36.83711, -3.464459]).bindPopup("Marker B")]);
helper.AddOverlay({
title: "Marker C"
}, [L.marker([36.83711, -4.464459]).bindPopup("Marker c")]);
helper.AddOverlay({
title: "Marker D"
}, [L.marker([36.83711, -5.464459]).bindPopup("Marker D")]);
}
AddOverlays();
var z = helper.Overlays.length;
ChangeZIndex = function () {
helper.SetZIndexByTitle(helper.Overlays[0].Title, z++);
}
ChangeZIndexAnim = function () {
StopAnim();
var stuff = ['A', 'B', 'C', 'D'];
var idx = 0;
var ms = 200;
window.tt = setInterval(function () {
var title = "Marker " + stuff[idx++ % stuff.length];
helper.SetZIndexByTitle(title, z++);
}, ms);
}
StopAnim = function () {
if (window.tt) clearInterval(window.tt);
}
#map {
height: 400px;
}
<link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css">
<script type='text/javascript' src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<div id="map"></div>
<input type='button' value='Remove overlays' onclick='helper.RemoveOverlays();' />
<input type='button' value='Add overlays' onclick='AddOverlays();' />
<input type='button' value='Move bottom marker to top' onclick='ChangeZIndex();' />
<input type='button' value='Change z Index (Animated)' onclick='ChangeZIndexAnim();' />
<input type='button' value='Stop animation' onclick='StopAnim();' />
私はこの修正を見つけました(css):
.leaflet-map-pane {
z-index: 2 !important;
}
.leaflet-google-layer {
z-index: 1 !important;
}
ここで見つかりました: https://gis.stackexchange.com/questions/44598/leaflet-google-map-baselayer-markers-not-visible