Javascript 传单GeoJSON点*后面*多边形

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

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

我非常希望在同一个窗格中绘制一个层中的点和该层中的多边形，因此当我对所有层进行排序时，“下方”层中的点位于“上方”层中多边形的下方

是否有一种简单/明显的方法可以做到这一点，而我却错过了，或者这在今天是不可能的

非常感谢

HTML:

---

你不可能轻易地在那个垃圾桶中使用传单（0.7.3）版本

在传单1.0（目前为Beta版）中，您可以创建自定义窗格，设置其z索引，并更好地控制地图上标记、图层和所有元素的绘图顺序

有关更多信息，请参阅手册1.0文档的本节

您可以创建两个自定义窗格，一个在覆盖窗格下方具有z索引（默认z索引为4），另一个在其上方具有z索引

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

因此，您的两个层的选项将如下所示

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);
  }
};

窗格将以这种格式提供一个自动生成的类

单张窗格名称

因此，您希望css包含以下内容：

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

---

根据上面的文档链接，3位于平铺窗格的上方，但位于覆盖窗格的下方。

您是否有可能发布一个小代码示例？你的描述很清楚，但小细节很重要，让我给出一个答案，而不仅仅是模糊的建议。如果你能看到，请告诉我-图标标记为1和2。我很想知道是否可以将其中一个图标放在另一个geojson的多边形下。例如，在那个plunkr中，我添加了第二层，所以我希望看到图标1位于蓝色方框下。您的代码在这里适用于传单

1.0

，而不是

0.7.3

，对吗？是的。只有传单1.0具有新的createPane方法。

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);
  }
};

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