画像




複数のタイルレイヤを透過するメモ。先日公開したプラグインをnpmでインストールできるようにしてみました。


Leaflet.Control.Opacityプラグインで複数のタイルレイヤを透過できる。




画像




npmでインストール。


npm install leaflet.control.opacity




プラグインのJSとCSSを読み込み。

main.js


// CSS一式を読み込んでパッケージ
import "leaflet/dist/leaflet.css";
import "leaflet.control.opacity/dist/L.Control.Opacity.css";
import "./css/style.css";

// JS一式を読み込んでパッケージ
import 'leaflet.control.opacity';
import './js/script.js';




複数のタイルレイヤ透過を設定。

script.js


//MIERUNE Color
var m_color = new L.tileLayer("https://tile.mierune.co.jp/mierune/{z}/{x}/{y}.png", {
attribution: "Maptiles by <a href='http://mierune.co.jp/' target='_blank'>MIERUNE</a>, under CC BY. Data by <a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors, under ODbL."
});

//MIERUNE MONO
var m_mono = new L.tileLayer("https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png", {
attribution: "Maptiles by <a href='http://mierune.co.jp/' target='_blank'>MIERUNE</a>, under CC BY. Data by <a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors, under ODbL."
});

//OSM
var o_std = new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});

//GSI Pale
var t_pale = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>",
});

//GSI Ort
var t_ort = new L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>",
});

//MAP
var map = L.map('map', {
center: [35.6831925, 139.7511307],
zoom: 13,
zoomControl: true,
layers: [m_mono]
});

//BaseLayer
var Map_BaseLayer = {
"MIERUNE Color": m_color,
"MIERUNE MONO": m_mono
};

//AddLayer
var Map_AddLayer = {
"OSM": o_std,
"GSI Pale": t_pale,
"GSI Ort": t_ort
};

//LayerControl
L.control.layers(
Map_BaseLayer,
Map_AddLayer,
{
collapsed: false
}
).addTo(map);

//OpacityControl
L.control.opacity(
Map_AddLayer
).addTo(map);






Leafletを手軽に始めるビルド環境公開しています。
leaflet-starter







Q&A