blog/content/labs/leaflet-js-mapbox-js/005-display-raster-style-da...

224 lines
5.2 KiB
Markdown

+++
title = "JavaScriptではじめるWebマップアプリケーション: Chapter3-2"
date = 2019-06-29T18:41:00+07:00
description = "JavaScriptではじめるWebマップアプリケーションの内容を淡々と試してみます。"
categories = ["Labs", "Map"]
author = "kazu634"
tags = ["mapbox"]
+++
『[JavaScriptではじめるWebマップアプリケーション \(PDF版\)](https://booth.pm/ja/items/1314906)』の内容を淡々と試してみます。`Mapbox.js`でラスタ形式の地図を表示してみます:
<nav id="menu"></nav>
<div id="mapbox-map"></div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet">
<style type="text/css">
<!--
#mapbox-map {
height: 600px;
}
#menu {
background: #fff;
position: absolute;
z-index: 1;
top: 10px;
right: 10px;
border-radius: 3px;
width: 180px;
border: 1px solid rgba(0,0,0,0.4);
}
#menu a{
font-size: 13 px;
color: #404040;
display: block;
margin: 0;
padding: 10px;
text-decoration: none;
border-bottom: 1px solid rgba(0,0,0,0.25);
text-align: centerl
}
#menu a:last-child {
border: none;
}
#menu a:hover {
background-color: #f8f8f8;
color: #404040;
}
#menu a.active {
background-color: #8DCF3F;
color: #ffffff;
}
#menu a.active:hover {
background: #79bb2b;
}
-->
</style>
<script>
// MIERUNE MONO読み込み
let map = new mapboxgl.Map({
container: "mapbox-map",
style: {
version: 8,
sources: {
m_mono: {
type: "raster",
tiles: ["https://tile.mierune.co.jp/mierune_mono/{z}/{x}/{y}.png"],
tileSize: 256
}
},
layers: [{
id: "m_mono",
type: "raster",
source: "m_mono",
minzoom: 0,
maxzoom: 18
}]
},
center: [139.7670, 35.6810],
zoom: 13
});
map.on("load", function() {
// MIERUNE Color 読み込み
map.addSource("m_color", {
type: "raster",
tiles: ["https://tile.mierune.co.jp/mierune/{z}/{x}/{y}.png"],
tileSize: 256
});
map.addLayer({
id: "m_color",
type: "raster",
source: "m_color",
minzoom: 0,
maxzoom: 18
});
// 地理院タイル 淡色読み込み
map.addSource("t_pale", {
type: "raster",
tiles: ["http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png"],
tileSize: 256
});
map.addLayer({
id: "t_pale",
type: "raster",
source: "t_pale",
minzoom: 0,
maxzoom: 18
});
// 地理院タイル オルソ読み込み
map.addSource("t_ort", {
type: "raster",
tiles: ["http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg"],
tileSize: 256
});
map.addLayer({
id: "t_ort",
type: "raster",
source: "t_ort",
minzoom: 0,
maxzoom: 18
});
// OpenStreetMap 読み込み
map.addSource("o_std", {
type: "raster",
tiles: [
"https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
"https://b.tile.openstreetmap.org/{z}/{x}/{y}.png"
],
tileSize: 256
});
map.addLayer({
id: "o_std",
type: "raster",
source: "o_std",
minzoom: 0,
maxzoom: 18
});
// レイヤ設定
let Map_BaseLayer = {
m_mono: "MIERUNE MONO",
m_color: "MIERUNE Color",
t_pale: "地理院タイル 淡色",
t_ort: "地理院タイル オルソ",
o_std: "OpenStreetMap"
};
// レイヤメニュー作成
for (let i = 0; i < Object.keys(Map_BaseLayer).length; i++) {
// レイヤID取得
let id = Object.keys(Map_BaseLayer)[i];
// aタグ作成
let link = document.createElement("a");
link.href = "#";
// id追加
link.id = id;
// 名称追加
link.textContent = Map_BaseLayer[id];
// 初期表示 m_mono 以外非表示
if (id === "m_mono") {
link.className = "active";
} else {
map.setLayoutProperty(id, "visibility", "none");
link.className = "";
}
// aタグクリック処理
link.onclick = function (e) {
// id取得
let clickedLayer = this.id;
e.preventDefault();
e.stopPropagation();
// ON/OFF状態取得
let visibility = map.getLayoutProperty(clickedLayer, "visibility");
// ON/OFF 判断
if (visibility === "visible") {
} else {
for (let j = 0; j < Object.keys(Map_BaseLayer).length; j++) {
// レイヤID取得
let ch_id = Object.keys(Map_BaseLayer)[j];
// レイヤの表示・非表示
if (ch_id === clickedLayer) {
// クリックしたレイヤを表示
this.className = "active";
map.setLayoutProperty(clickedLayer, "visibility", "visible");
} else {
// クリックしたレイヤ以外を非表示
let ch_obj = document.getElementById(ch_id);
ch_obj.className = "";
map.setLayoutProperty(ch_id, "visibility", "none");
}
}
}
};
// レイヤメニューにレイヤ追加
let layers = document.getElementById("menu");
layers.appendChild(link);
};
});
// ズームコントロール
let nc = new mapboxgl.NavigationControl();
map.addControl(nc, 'top-left');
</script>