如何使折线图层始终位于顶部

How to make polyline layer always on top?

本文关键字:于顶部 图层 何使 折线 折线图      更新时间:2023-09-26

我在两个不同的单选框按钮中有 2 个多边形,在一个复选框中有一个 geojson 折线。当选中复选框并更改多边形图层选择时,我需要折线图层仍在前面。如何使用 BringToFront() 或其他方法将折线图层始终固定在正面?

该项目在jsfiddle进行了简化

http://jsfiddle.net/albertovich/fe0vtytb/

var poligon1 = new L.LayerGroup();
var poligon2 = new L.LayerGroup();
var polyline1 = new L.LayerGroup();
var map = L.map('map', {
  center: [39.4699075, -0.382881],
  zoom: 13,
  layers: [poligon1]
});
var baseLayers = {
  "Poligon1": poligon1,
  "Poligon2": poligon2
};
var myStylePol1 = {
  "weight": 2,
  "opacity": 1,
  "color": "#FF00CC",
  "fillOpacity": 1
};
var myStylePol2 = {
  "weight": 2,
  "opacity": 1,
  "color": "#FFFF80",
  "fillOpacity": 1
};
var myStyle3 = {
  "weight": 2,
  "opacity": 1,
  "color": "#000"
};
L.geoJson(poli1, {
    style: myStylePol1
  }).addTo(poligon1),
  L.geoJson(poli2, {
    style: myStylePol2
  }).addTo(poligon2),
  L.geoJson(polyl3, {
    style: myStyle3
  }).addTo(polyline1);
var overlays = {
  "Polyline": polyline1
};
L.control.layers(baseLayers, overlays).addTo(map);
你可以

做类似的事情

map.on('baselayerchange',function(baselayer){ baselayer.layer.getLayers()[0].bringToBack(); });

在这里更新了小提琴

但通常 baseLayers 是切片图层(街道、卫星、地形等),而不是 geoJson 多边形,因此您可能需要采用另一种方法,其中所有图层都是简单的叠加层