[ コード例 ]
レイヤー定義クラス
/**
* Leaflet地図レイヤークラス
* @type type
*/
class MapLayers {
constructor() {
}
/**
* 明暗種別取得
* @param {type} label
* @returns
*/
getLDType(label) {
const mpl = new MapLayers();
const ary = mpl.getLeafletBaseMapLayerArray();
for (let j = 0; j < ary.length; j++) {
if (label === ary[j]["label"]) {
return ary[j]["ldtp"];
}
}
}
/**
* ベースレイヤー
* @returns {Array}
*/
getLeafletBaseMapLayerArray() {
const LEAFLET_LAYERS = [
{
label: '国土地理院標準',
url: 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
attr: {attribution: "地理院標準"},
ldtp: "L"
},
{
label: '国土地理院淡色',
url: 'http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png',
attr: {attribution: "地理院淡色"},
ldtp: "L"
},
{
label: 'オープンストリートマップ',
url: 'http://tile.openstreetmap.jp/{z}/{x}/{y}.png',
attr: {attribution: "OpenStreetMap contributors"},
ldtp: "L"
},
{
label: 'グーグル衛星',
url: 'http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',
attr: {
maxZoom: 20,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
},
ldtp: "D"
},
// 2021-04-11 //
{
label: 'USGS 衛星 Topo',
url: 'https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryTopo/MapServer/tile/{z}/{y}/{x}',
attr: {
attribution: "Tiles courtesy of the U.S. Geological Survey"},
ldtp: "D"
},
{
label: 'Esri 衛星',
url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
attr: {
attribution: "Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community"},
ldtp: "D"
},
{
label: 'Stadia Maps Dark',
url: 'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png',
attr: {
attribution: "Stadia Maps"},
ldtp: "D"
},
// 2021-04-11 終わり //
// 2021-04-12 //
{
label: 'CartoDB DarkMatter',
url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',
attr: {
attribution:
'© OpenStreetMap contributors © CARTO'
},
ldtp: "D"
},
{
label: '白地図',
url: 'http://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png',
attr: {id: 'blankmap', attribution: "地理院白地図"},
ldtp: "L"
},
{
label: 'Stamen Toner-Background',
url: 'http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png',
attr: {
attribution: 'Map tiles by Stamen Design, ',
variant: 'toner-background'
},
ldtp: "D"
},
{
label: 'Stamen Toner-Lite',
url: 'http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png',
attr: {
attribution: 'Map tiles by Stamen Design, ',
variant: 'toner-lite'
},
ldtp: "L"
},
{
label: 'Stamen Watercolor',
url: 'http://{s}.tile.stamen.com/{variant}/{z}/{x}/{y}.png',
attr: {
attribution: 'Map tiles by Stamen Design, ',
variant: 'watercolor'
},
ldtp: "L"
},
{
label: 'Esri World Topo Map',
url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
attr: {
attribution: 'Tiles © Esri Japan '
},
ldtp: "L"
},
{
label: 'Esri Ocean Base Map',
url: 'http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/{z}/{y}/{x}',
attr: {
maxZoom: 13,
attribution: 'Tiles by Esri Japan '
},
ldtp: "L"
},
// From mapbox //
{
label: 'Mapbox dark',
url: 'https://api.mapbox.com/styles/v1/mapbox/dark-v9/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
attr: {
maxZoom: 13,
attribution: 'mapbox'
},
ldtp: "D"
},
{
label: 'Mapbox satellite',
url: 'https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
attr: {
maxZoom: 13,
attribution: 'mapbox'
},
ldtp: "D"
},
{
label: 'Mapbox satellite streets',
url: 'https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
attr: {
maxZoom: 13,
attribution: 'mapbox'
},
ldtp: "D"
},
{
label: 'Mapbox night traffic',
url: 'https://api.mapbox.com/styles/v1/mapbox/traffic-night-v2/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
attr: {
maxZoom: 13,
attribution: 'mapbox'
},
ldtp: "D"
},
{
label: 'Mapbox day traffic',
url: 'https://api.mapbox.com/styles/v1/mapbox/traffic-day-v2/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
attr: {
maxZoom: 13,
attribution: 'mapbox'
},
ldtp: "L"
},
{
label: 'Mapbox outdoor',
url: 'https://api.mapbox.com/styles/v1/mapbox/outdoors-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
attr: {
maxZoom: 13,
attribution: 'mapbox'
},
ldtp: "L"
},
{
label: 'Mapbox light',
url: 'https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
attr: {
maxZoom: 13,
attribution: 'mapbox'
},
ldtp: "L"
},
/* {
label: 'Mapbox decimal',
url: 'https://api.mapbox.com/styles/hisashitanaka/ckj2fjsoj0alp19pqqtcvfk0i/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ',
attr: {
maxZoom: 13,
attribution: 'mapbox'
},
ldtp: "D"
},*/
];
return LEAFLET_LAYERS;
}
// mapboxgl.accessToken = "pk.eyJ1IjoiaGlzYXNoaXRhbmFrYSIsImEiOiJjazlnZ2J5dmMwbmpwM2xudnhreGRneDVwIn0.63ThZzKzusoMS5GGjJZ0tQ";
/**
* OpenWeatherMap気象レイヤー Ver 1
* @returns {Array}
*/
getLeafletWeatherMapLayerArray() {
const WEATHER_LAYERS = [
{
label: "Precipitation",
url: 'http://{s}.tile.openweathermap.org/map/precipitation_new/{z}/{x}/{y}.png?appid=8af427e393a1da34767ec02a4ba117e1',
attr: {attribution: '降水',
opacity: 0.9
}
},
{
label: "Clouds",
url: 'http://{s}.tile.openweathermap.org/map/clouds_new/{z}/{x}/{y}.png?appid=8af427e393a1da34767ec02a4ba117e1',
attr: {attribution: '雲',
opacity: 0.9
}
},
{
label: "Pressure",
url: 'http://{s}.tile.openweathermap.org/map/pressure_new/{z}/{x}/{y}.png?appid=8af427e393a1da34767ec02a4ba117e1',
attr: {
attribution: '気圧',
opacity: 0.9
}
},
{
label: "Wind",
url: 'http://{s}.tile.openweathermap.org/map/wind_new/{z}/{x}/{y}.png?appid=8af427e393a1da34767ec02a4ba117e1',
attr: {
attribution: '風速',
opacity: 0.9
}
},
{
label: "Temperture",
url: 'http://{s}.tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=8af427e393a1da34767ec02a4ba117e1',
attr: {
attribution: '気温',
opacity: 0.9
}
}
];
return WEATHER_LAYERS;
}
/**
* OpenWeatherMap気象レイヤー Ver 2
* Freeライセンスでは利用不可
* @returns {Array}
*/
getLeafletWeatherMapLayerArrayV2() {
const WEATHER_LAYERS = [
{
label: "Precipitation",
url: 'https://maps.openweathermap.org/maps/2.0/weather/TA2/{z}/{x}/{y}.png?appid=9792af345b029a9e82dc41ef143072de&fill_bound=true',
attr: {attribution: '降水',
opacity: 0.9
}
},
{
label: "Clouds",
url: 'https://maps.openweathermap.org/maps/2.0/weather/CL/{z}/{x}/{y}.png?appid=9792af345b029a9e82dc41ef143072de&fill_bound=true',
attr: {attribution: '雲',
opacity: 0.9
}
},
{
label: "Pressure",
url: 'https://{s}.tile.openweathermap.org/map/pressure_new/{z}/{x}/{y}.png?appid=9792af345b029a9e82dc41ef143072de',
attr: {
attribution: '気圧',
opacity: 0.9
}
},
{
label: "Wind",
url: 'https://{s}.tile.openweathermap.org/map/wind_new/{z}/{x}/{y}.png?appid=9792af345b029a9e82dc41ef143072de',
attr: {
attribution: '風速',
opacity: 0.9
}
},
{
label: "Wind with direction",
url: 'https://maps.openweathermap.org/maps/2.0/weather/WND/{z}/{x}/{y}.png?appid=9792af345b029a9e82dc41ef143072de',
attr: {
attribution: '風速風向',
opacity: 0.9
}
},
{
label: "Temparture",
url: 'https://maps.openweathermap.org/maps/2.0/weather/TA2/{z}/{x}/{y}.png?appid=9792af345b029a9e82dc41ef143072de',
attr: {
attribution: '気温',
opacity: 0.9
}
}
];
return WEATHER_LAYERS;
}
}
地図描画クラス
// -- ベースレイヤー設定 -- //
// -C
const layersclass = new MapLayers();
let leyers = layersclass.getLeafletBaseMapLayerArray();
//alert(leyers.length);
let baseMaps = {};
let curkey = "";
let objlayer;
$.each(leyers, function (j, itm) {
curkey = itm["label"];
objlayer = L.tileLayer(itm["url"], itm["attr"]);
baseMaps[curkey] = objlayer;
//console.log("curkey:" + curkey);
//console.log("LDTP:" + itm["ldtp"]);
});
// -- OpenWeatherMap設定 -- //
// -C
leyers = layersclass.getLeafletWeatherMapLayerArray();
let weatherMaps = [];
$.each(leyers, function (j, itm) {
curkey = itm["label"];
objlayer = L.tileLayer(itm["url"], itm["attr"]);
weatherMaps[curkey] = objlayer;
});
// 天気選択を加えたレイヤーコントロール //
L.control.layers(baseMaps, weatherMaps, /*{collapsed: false}*/).addTo(lmap);
// ベースマップを乗せる //
let baseadd = baseMaps[layerkey].addTo(lmap);
[ 画面例 ]
Mapbox Night Traffic
