Question

我有两个传单geojson图层 - 它们都有点和多边形功能。我希望能够在地图上订购它们，但是当我今天这样做时（尝试通过按特定顺序添加它们来命令它们，使用bringToBack / bringToFront等），来自两个层的点图标位于所有位置之上多边形。

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

我非常希望从与该图层中的多边形在同一窗格上绘制的图层中获得点，因此当我订购所有图层时，图层“下方”的点位于多边形下方层“在上面”。

有没有一种简单/明显的方式可以做到这一点，我错过了，或者今天这是不可能的？

非常感谢！

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

您不能轻易地使用该传单中的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);
  }
};

窗格以此格式提供自动生成的类

小叶窗格名称

因此，您希望css具有以下内容：

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

因为根据上面的文档链接，3位于图块窗格上方但位于叠加图窗格下方。

Leaflet GeoJSON指向多边形后面

1 个答案:

Leaflet GeoJSON指向*多边形后面*

1 个答案:

Leaflet GeoJSON指向多边形后面