Javascript 传单将网格层置于GeJson LayerGroup之上

将传单0.7升级到1后，我收到多个错误。在完成迁移之前，我有一个无法解决的错误：在绘制地图的LayerGroup中有两个GeoJson对象

以及从后端获取地理定位点的GridLayer

问题是GridLayer始终位于LayerGroup之下，而不是位于LayerGroup之上。我尝试了很多东西，但我不知道怎么做…：

// Using geojson implies drawing vectors and that pane is usually
// over the tile pane with the canvas.
this._map.getPanes()['tilePane'].style.zIndex = 5;
var colorsPromise = $.getJSON('colors.json');
var fitoPromise = $.getJSON('fitoepisodis.json');
var furniturePromise = $.getJSON('baranes.json');
$.when(colorsPromise, fitoPromise, furniturePromise)
 .then(function(colorsResponse, fitoepisodisResponse, furnitureResponse) {

   self._geoJsonGroup = new L.LayerGroup();

    self._fitoColors = colorsResponse[0];
    L.geoJson(fitoepisodisResponse[0], {
        minZoom : MapCtrl._INITIAL_ZOOM,
        maxZoom : 24,
        touchZoom : true,
        attributionControl : false,
        style: function (feature) {
            var color = self._fitoColors[feature.properties.ID];
            var style = {
                   "clickable": false,
                   "color": color ? color.stroke : 'darkgray',
                   "fillColor": color ? color.fill : 'lightgray',
                   "weight": 3.0,
                   "opacity": 0.8,
                   "fillOpacity": 0.8
               };
               return style;
        }
    }).addTo(self._geoJsonGroup);
    L.geoJson(furnitureResponse[0], {
        minZoom : MapCtrl._INITIAL_ZOOM,
        maxZoom : 24,
        touchZoom : true,
        attributionControl : false,
        style: function (feature) {
            var style = {
                   "clickable": false,
                   "color": 'darkgray',
                   "weight": 3.5,
                   "opacity": 0.7
               };
               return style;
        }
    }).addTo(self._map);

    self._geoJsonGroup.addTo(self._map);
});

// Canvas layer where to draw feature points on zoom
self._canvasLayer = new L.GridLayer({
    minZoom : MapCtrl._INITIAL_ZOOM,
    maxZoom : 22,
    async   : true,
    zIndex  : 900,
    updateWhenZooming : false
});
self._canvasLayer.createTile = function(coords) {
  // create a <canvas> element for drawing
  var tile = L.DomUtil.create('canvas', 'leaflet-tile');
  // setup tile width and height according to the options
  var size = this.getTileSize();
  tile.width = size.x;
  tile.height = size.y;

  setTimeout(function() {
    self._drawTiles(tile, coords, coords.z);
    self._canvasLayer.setZIndex(999999);
    self._canvasLayer.bringToFront();
    self._geoJsonGroup.setZIndex(200);
    }, 1000);


  // return the tile so it can be rendered on screen
  return  tile
};
self._canvasLayer.addTo(self._map );

//使用geojson意味着绘制向量，而该窗格通常是
//用画布覆盖平铺窗格。
这个._map.getPanes（）['tilePane'].style.zIndex=5；
var colorsPromise=$.getJSON（'colors.json'）；
var fitoPromise=$.getJSON（'fitoepisodis.json'）；
var furniturePromise=$.getJSON（'baranes.json'）；
$.when（颜色、装饰、家具承诺）
.then（功能（颜色响应、装修响应、家具响应）{
self._geoJsonGroup=新的L.LayerGroup（）；
自身颜色=颜色响应[0]；
L.geoJson（fitoepisodisResponse[0]{
最小缩放：MapCtrl.\u初始\u缩放，
maxZoom:24，
真的，
属性控制：false，
风格：功能（特征）{
var color=self.\u fitoColors[feature.properties.ID]；
变量样式={
“可点击”：false，
“color”：color？color.stroke:'darkgray'，
“fillColor”：颜色？颜色。填充：“浅灰色”，
“重量”：3.0，
“不透明度”：0.8，
“填充不透明度”：0.8
};
回归风格；
}
}).addTo（self.\u geoJsonGroup）；
L.geoJson（家具响应[0]{
最小缩放：MapCtrl.\u初始\u缩放，
maxZoom:24，
真的，
属性控制：false，
风格：功能（特征）{
变量样式={
“可点击”：false，
“颜色”：“暗色”，
“重量”：3.5，
“不透明度”：0.7
};
回归风格；
}
}).addTo（自映射）；
self.\u geoJsonGroup.addTo（self.\u map）；
});
//用于在缩放时绘制要素点的画布层
self.\u canvasLayer=新的L.GridLayer({
最小缩放：MapCtrl.\u初始\u缩放，
maxZoom:22，
async:true，
zIndex:900，
UpdateWhenzoming:false
});
self.\u canvasLayer.createTile=函数（coords）{
//为图形创建元素
var tile=L.DomUtil.create（'canvas'，'shapletile'）；
//根据选项设置平铺宽度和高度
var size=this.getTileSize（）；
瓷砖宽度=尺寸x；
瓷砖高度=尺寸y；
setTimeout（函数（）{
self._drawTiles（tile，coords，coords.z）；
self._canvasLayer.setZIndex（999999）；
self._canvasLayer.bringToFront（）；
self._geoJsonGroup.setZIndex（200）；
}, 1000);
//返回平铺，以便在屏幕上渲染
返回磁砖
};
self.\u canvasLayer.addTo（self.\u map）；

下面是如何显示的：绿色多边形和线是GeoJson，圆是在GridLayer中

---

我发现解决方案可以使用，代码变成：

    // Use this pane to put the GridLayer (html canvas element) of feature points above of GeoJson elements
    this._map.createPane('pointsFeatures');
    this._map.getPane('pointsFeatures').style.zIndex = 650;
    this._map.getPane('pointsFeatures').style.pointerEvents = 'none';
    // Canvas layer where to draw feature points on zoom
    self._canvasLayer = new L.GridLayer({
        minZoom : MapCtrl._INITIAL_ZOOM,
        maxZoom : 22,
        async   : true,
        updateWhenZooming : false,
        pane: 'pointsFeatures'
    });