Leaflet GeoJSON 点在多边形后面

Question

我有两个 leaflet geojson 图层 - 它们都具有点和多边形特征。我希望能够在地图上对它们进行排序，但是当我今天这样做时（尝试通过按特定顺序添加它们、使用 bringToBack/bringToFront 等来对它们进行排序），两个图层中的点图标都位于顶部所有多边形。

原因（根据我有限的经验）似乎是它们绘制在地图中完全不同的窗格上。

我非常希望将图层中的点与该图层中的多边形绘制在同一窗格上，因此当我订购所有图层时，图层 "below" 的点是在图层 "on top".

的多边形下方

是否有我错过的 easy/obvious 方法，或者今天不可能做到这一点？

非常感谢！

HTML:

<body>
  <div id='map'></div>
<body>

JS:

var featColl1 = {
  type : 'FeatureCollection',
  features : [
    {
      type: "Feature",
      geometry: {
          type: "Point",
          coordinates: [-100, 48]
      }  
    },
    {
      type: "Feature",
      geometry: {
          type: "Polygon",
          coordinates: [[
            [-104.05, 48.99],
            [-97.22,  48.98],
            [-96.58,  45.94],
            [-104.03, 45.94],
            [-104.05, 48.99]
        ]]
      }  
    }
  ]
};

var featColl2 = {
  type : 'FeatureCollection',
  features : [
    {
      type: "Feature",
      geometry: {
          type: "Point",
          coordinates: [-103, 47]
      }  
    },
    {
      type: "Feature",
      geometry: {
          type: "Polygon",
          coordinates: [[
            [-104.05, 48.99],
            [-97.22,  48.98],
            [-96.58,  45.94],
            [-104.03, 45.94],
            [-104.05, 48.99]
        ]]
      }  
    }
  ]
};

var layer1Opts = {
  style :   { color : 'red' },
  pointToLayer : function(feat, latlng) {
    var opts = {
      icon : L.divIcon({ html : "1", iconSize: [15,15] })
    };
    return L.marker(latlng, opts);
  }
};
var layer2Opts = {
    pointToLayer : function(feat, latlng) {
    var opts = {
      icon : L.divIcon({ html : "2", iconSize: [15,15] })
    };
    return L.marker(latlng, opts);
  }
};


var map = new L.map('map')
  .setView([-103, 49], 5);

L.tileLayer('http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.jpg')
  .addTo(map);

var layer1 = L.geoJson(featColl1, layer1Opts).addTo(map);
var layer2 = L.geoJson(featColl2, layer2Opts).addTo(map);

var bounds = new L.LatLngBounds();
bounds.extend(layer1.getBounds());
bounds.extend(layer2.getBounds());

map.fitBounds(bounds);

Answer 1

你不能轻易地用那个 plunker 中的 Leaflet (0.7.3) 版本做你想做的事。

在 Leaflet 1.0（目前处于 Beta 阶段）中，您可以创建自定义窗格，设置它们 z-index 并更好地控制地图上标记、图层和所有元素的绘制顺序。

有关详细信息，请参阅 Leaflet 1.0 文档的这一部分

https://mourner.github.io/Leaflet/reference.html#map-panes

您可以创建两个自定义窗格，一个在叠加窗格下方有一个 z-index（默认 z-index 为 4），另一个在其上方有一个 z-index。

然后您可以根据将图标添加到哪个窗格来选择图标的显示位置。

所以你的两层的选项看起来像这样

var activePane = map.createPane("activePane"),
    inactivePane = map.createPane("inactivePane");

var layer1Opts = {
  style :   { color : 'red' },
  pointToLayer : function(feat, latlng) {
    var opts = {
      icon : L.divIcon({ html : "1", iconSize: [15,15], pane: "inactivePane" })
    };
    return L.marker(latlng, opts);
  }
};
var layer2Opts = {
    pointToLayer : function(feat, latlng) {
    var opts = {
      icon : L.divIcon({ html : "2", iconSize: [15,15], pane: "activePane" })
    };
    return L.marker(latlng, opts);
  }
};

窗格以这种格式自动生成class

leaflet-pane-name

所以你会想要 css 像这样的东西：

.leaflet-activePane{z-index:10;}
.leaflet-inactivePane{z-index:3}

因为根据上面的文档 link，3 在平铺窗格上方但在叠加窗格下方。

Leaflet GeoJSON 点在多边形后面

Leaflet GeoJSON points behind polygon

javascript

geojson

leaflet

mapbox

Leaflet GeoJSON 点*在*多边形后面

Leaflet GeoJSON points *behind* polygon

javascript

geojson

leaflet

mapbox

Leaflet GeoJSON 点在多边形后面

Leaflet GeoJSON points behind polygon