← チュートリアル

ペインとは何ですか？

Leafletでは、マップペインは開発者の知らないうちに、レイヤーを暗黙的にグループ化しています。このグループ化により、Webブラウザは、個々のレイヤーで動作させるよりも、効率的に一度に複数のレイヤーを操作できます。

マップペインはz-index CSSプロパティを利用して、常に一部のレイヤーを他のレイヤーより上に表示しています。デフォルトの順序は

• TileLayerとGridLayer
• Path（例：ライン、ポリライン、サークル、またはGeoJSONレイヤー）
• Markerの影
• Markerアイコン
• Popup

これが、Leafletマップでは、ポップアップが常に他のレイヤーの「上」に表示され、マーカーは常にタイルレイヤーの上に表示されるなどの仕組みになっています。

Leaflet 1.0.0（0.7.xにはない）の新機能として、カスタムマップペインがあり、この順序をカスタマイズできます。

デフォルトが常に正しいとは限りません。

特定の場合には、デフォルトの順序がマップに適していません。これをCartoのベースマップとラベルで説明します。

ラベルのないベースマップタイル

ラベルのみが透明なタイル

ベースマップの上にラベル

これらの2つのタイルレイヤーを使用してLeafletマップを作成すると、マーカーまたはポリゴンは両方のレイヤーの上に表示されますが、ラベルを一番上に配置したほうが見栄えがよくなります。どうすればそれを実現できますか？

カスタムペイン

ベースマップタイルとGeoJSONレイヤーなどの一部のオーバーレイにデフォルトを使用できますが、ラベルのカスタムペインを定義して、GeoJSONデータの上に表示する必要があります。

カスタムマップペインはマップごとに作成されるため、最初にL.Mapとペインのインスタンスを作成します。

var map = L.map('map');
map.createPane('labels');

次のステップはペインのzインデックスを設定することです。デフォルトを見ると、650の値があると、ラベルのあるTileLayerがマーカーの上、ポップアップの下に表示されます。 getPane()を使用することで、ペインを表すHTMLElementを参照でき、そのzインデックスを変更します。

map.getPane('labels').style.zIndex = 650;

他のマップレイヤー上に画像タイルがある場合に発生する問題の1つは、タイルがクリックやタッチをキャプチャすることです。ユーザーがマップ上の任意の場所をクリックすると、Webブラウザはラベルタイルがクリックされ、GeoJSONまたはマーカーがクリックされなかったと見なします。これは pointer-events CSSプロパティを使用して解決できます。

map.getPane('labels').style.pointerEvents = 'none';

var positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
        attribution: '©OpenStreetMap, ©CartoDB'
}).addTo(map);

var positronLabels = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_only_labels/{z}/{x}/{y}.png', {
        attribution: '©OpenStreetMap, ©CartoDB',
        pane: 'labels'
}).addTo(map);

var geojson = L.geoJson(GeoJsonData, geoJsonOptions).addTo(map);

geojson.eachLayer(function (layer) {
    layer.bindPopup(layer.feature.properties.name);
});

map.fitBounds(geojson.getBounds());