Leaflet GeoJSON指向多邊形后面

Question

我有兩個傳單geojson圖層 - 它們都有Point和Polygon特征。 我希望能夠在地圖上訂購它們，但是當我今天這樣做時（嘗試通過按特定順序添加它們來命令它們，使用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

你不能輕易地用那個plunker中的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 個解決方案

解決方案1
1 已采納 2016-01-14 17:32:51

Leaflet GeoJSON指向*多邊形后面*

問題描述

1 個解決方案

解決方案1 1 已采納 2016-01-14 17:32:51

Leaflet GeoJSON指向多邊形后面

解決方案1
1 已采納 2016-01-14 17:32:51