如何强制在Leaflet中添加到地图的新图层成为底图上的第一个图层?
我找不到一种方法来轻松更改图层的顺序,这是一个非常基本的GIS功能。我错过了什么吗?
答案 0 :(得分:13)
Leaflet地图由一组“Panes”组成,其视图顺序使用z-index控制。每个窗格都包含一组图层默认窗格显示顺序是tiles-> shadows-> overlays-> markers-> popups。与Etienne描述的一样,您可以通过调用bringToFront()
或bringToBack()
来控制覆盖窗格中路径的显示顺序。 L.FeatureGroup
也有这些方法,因此您可以根据需要立即更改叠加组的顺序。
如果要更改整个窗格的显示顺序,则只需使用CSS更改窗格的z-index。
如果你想添加一个新的地图窗格......那么我不知道该怎么做。
答案 1 :(得分:7)
根据Leaflet API,您可以在任何图层上使用bringToFront
或bringToBack
将该图层置于所有路径图层的顶部或底部。
艾蒂安
答案 2 :(得分:5)
有关更多细节,Bobby Sudekum将a fantastic demo放在一起显示了对窗格z-index的操作。我一直用它作为起点。
以下是关键代码:
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);
答案 3 :(得分:2)
最近不得不解决这个问题,但偶然发现了这个问题。
这是一个不依赖于CSS hacks并使用图层组的解决方案。它基本上以所需的顺序删除和重新添加图层。
我认为这是比当前答案更好的“最佳实践”。它显示了如何管理图层并重新排序它们,这对其他上下文也很有用。当前方法使用图层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();' />
答案 4 :(得分:1)
我发现了这个问题(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