1

私は「マップ サンドイッチ」を作成するアプローチを使用しています。これにより、ベースマップ、オーバーレイ レイヤー、および別のタイル レイヤー (ラベル) が上部 (新しいペイン) に配置されます。

問題は、レイヤー コントロールでラベルを切り替えようとしたときに発生します。レイヤーをうまくオフに切り替えることができます。ただし、ラベルを再度追加しようとすると、オーバーレイ レイヤーの下に表示されます。

レイヤー コントロールは、レイヤーを同じ順序に戻すことを忘れないように思われます。とにかく、回避策はありますか？

これは、問題を簡潔に再現する JSFiddle です。 フィドル層制御問題

var mbstyle = L.mapbox.tileLayer('statecodemog.aa380654');

var mblabels = L.mapbox.tileLayer('statecodemog.798453f5', {
'clickable': 'false'
});

var map = L.map("map", {
zoom: 8,
center: [39, -104.8],
minZoom: 4,
layers: [mbstyle]
});

//create map sandwich
var topPane = map._createPane('leaflet-top-pane', map.getPanes().mapPane);
var topLayer = mblabels.addTo(map);
topPane.appendChild(topLayer.getContainer());

var baseLayers = {
"Mapbox: Contrast Base": mbstyle
};

var groupedOverlays = {
"Labels and Borders": mblabels
};

L.control.layers(baseLayers, groupedOverlays).addTo(map);

var circle = L.circle([39, -104.8], 200000, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(map);
4

1 に答える 1

4

mbstyleおよびmblabelsレイヤーに明示的な zIndex を配置します。

var mbstyle = L.mapbox.tileLayer('statecodemog.aa380654', {
    'zIndex': 1
});

var mblabels = L.mapbox.tileLayer('statecodemog.798453f5', {
    'clickable': 'false',
    'zIndex': 1000
});

次にL.control.layers、zIndexes をいじらないように指示します。

L.control.layers(baseLayers, groupedOverlays, {
    'autoZIndex': false
}).addTo(map);

Fiddle の作業フォーク: http://jsfiddle.net/r01mmfse/

mapsandwich 部分を破棄することもできます。

//create map sandwich
var topPane = map._createPane('leaflet-top-pane', map.getPanes().mapPane);
var topLayer = mblabels.addTo(map);
topPane.appendChild(topLayer.getContainer());

Fiddle の別のフォーク: http://jsfiddle.net/b8439d32/

L.TileLayer リファレンス: http://leafletjs.com/reference.html#tilelayer

L.control.layers リファレンス: http://leafletjs.com/reference.html#control-layers

于 2015-02-12T00:39:22.273 に答える