Question

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

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

宣传单将网格图层放在GeJson LayerGroup上方

1 个答案: