Merge pull request #37 from kazu634/leaflet-mapbox-js-support
Chapter3-2の記事を追加
This commit is contained in:
GitHub
commit
769aa060a5
|
|
@ -0,0 +1,221 @@
|
|||
+++
|
||||
title = "JavaScriptではじめるWebマップアプリケーション: Chapter3-2"
|
||||
date = 2019-06-29T18:41:00+07:00
|
||||
Description = "JavaScriptではじめるWebマップアプリケーションの内容を淡々と試してみます。"
|
||||
Categories = ["Mapbox GL JS"]
|
||||
+++
|
||||
|
||||
『[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>
|
||||
|
||||
Loading…
Reference in New Issue