전단지 격자 레이어 위 GeJson LayerGroup

Question

리플릿 0.7을 1로 업그레이드 한 후에 여러 오류가 발생합니다. 마이그레이션이 끝날 때까지 해결할 수없는 오류가 있습니다. 두 개의 GeoJson 객체가지도를 그리는 LayerGroup 내에 있습니다.

그리고 백엔드에서 지오 코딩 된 점을 가져 오는 GridLayer.

GridLayer가 항상 위에 있지 않고 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이며, 원은 GridLayer에 있습니다.

Answer 1

내가 panes 작업 솔루션을 발견, 코드가되었다 :

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