今までのサンプルプログラムを組み合わせた、Leafletを使った汎用的な地図表示プログラムです。
地図の移動・拡大縮小や地図切替や十字カーソルの表示やURL欄への表示などの機能が、すべて組み込まれていますので、この地図をベースに地図アプリを作成することができます。
今までのサンプルプログラムを組み合わせた、Leafletを使った汎用的な地図表示プログラムです。
地図の移動・拡大縮小や地図切替や十字カーソルの表示やURL欄への表示などの機能が、すべて組み込まれていますので、この地図をベースに地図アプリを作成することができます。
leaflet_opacityプラグインとleaflet_urlプラグインを利用していますので、HTMLの<head>タグに、LeafletのJavaScriptのソースファイルとCSSファイルを参照するための指定を行う必要があります。 プラグインは、上記リンクからダウンロードできます。 プラグインは、Leafletを拡張していますので、必ず、Leafletの後に指定する必要があります。
<link rel="stylesheet" href="js/leaflet.css" />
<link rel="stylesheet" href="js/leaflet_opacity.css" />
<link rel="stylesheet" href="js/leaflet_cross.css" />
<script src="js/leaflet.js"></script>
<script src="js/leaflet_opacity.js"></script>
<script src="js/leaflet_url.js"></script>
Leafletを利用する場合、HTMLの<body>タグには、地図を表示するためのdivタグを作成するだけです。 divタグには、idを設定し、このidをleafletに渡します。 画面中央に十字カーソルを表示するため、class="cross"も指定しておきます。
<div id="map_container" class="cross"></div>
divタグに、widthやheightスタイルを使ってサイズ指定をすれば、その範囲内に地図が表示されます。 地図を全画面に表示したい場合は、下記の様にスタイルを設定します。 マウスカーソルを矢印にしたい場合は、cursor: default;の設定も行います。
#map_container {
position: absolute;
top:0; left:0; right:0; bottom:0;
cursor: default;
}
地図を表示するためには、HTML読込後に下記のソースを実行する必要があります。
私は、<body>タグのonloadイベントに登録した関数で実行しています。
最初に、LeafletのMapクラスで地図を作成し、TileLayerクラスで、表示する地図を指定します。
setViewメソッドでは、地図の中心位置の緯度経度とズームレベルを指定します。
サンプルプログラムでは、地理院地図で日本全体を表示するように設定しています。
var baseMap = [ // ベースマップの定義
L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png",{
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html'"
+ " target='_blank'>地理院標準地図</a>", minZoom: 2, maxZoom: 18}),
L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png",{
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html'"
+ " target='_blank'>地理院淡色地図</a>", minZoom: 2, maxZoom: 18}),
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{
attribution: "<a href='https://www.openstreetmap.org/copyright'"
+ " target='_blank'>OpenStreetMap</a>", minZoom: 2, maxZoom: 19}),
L.tileLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}",{
attribution: "<a href='http://www.esrij.com/'"
+ " target='_blank'>EsriWorldTopoMap</a>", minZoom: 2, maxZoom: 19})
];
var overMap = [ // オーバーレイマップの定義
L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg",{
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html'"
+ " target='_blank'>地理院最新写真</a>", minZoom: 2, maxZoom: 18}),
L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/gazo1/{z}/{x}/{y}.jpg",{
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html'"
+ " target='_blank'>1970年代写真</a>", minZoom: 10, maxZoom: 17}),
L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/ort_old10/{z}/{x}/{y}.png",{
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html'"
+ " target='_blank'>1960年代写真</a>", minZoom: 2, maxZoom: 17}),
L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png",{
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html'"
+ " target='_blank'>色別標高図</a>", minZoom: 5, maxZoom: 16, opacity: 0.2}),
L.tileLayer("https://cyberjapandata.gsi.go.jp/xyz/hillshademap/{z}/{x}/{y}.png",{
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html'"
+ " target='_blank'>陰影起伏図</a>", minZoom: 5, maxZoom: 16, opacity: 0.2})
];
var baseCtl = { // ベースマップ切替ボタンの定義
"地理院標準地図": baseMap[0],
"地理院淡色地図": baseMap[1],
"OpenStreetMap": baseMap[2],
"EsriWorldTopoMap": baseMap[3]
};
var overCtl = { // オーバーレイマップ切替ボタンの定義
"地理院最新写真": overMap[0],
"1970年頃写真": overMap[1],
"1960年頃写真": overMap[2],
"色別標高図": overMap[3],
"陰影起伏図": overMap[4]
};
function init() {
let map = L.map('map_container', { zoomControl: false });
map.setView([37,136.5], 6); // 日本を表示
baseMap[0].addTo(map);
L.control.scale({imperial:false, position:'bottomright'}).addTo(map); // 目盛表示
L.control.zoom({position:'bottomright'}).addTo(map); // ズーム制御
L.control.opacityLayers(baseCtl, overCtl, {collapsed:true}).addTo(map); // 透過付マップ切替
let url = L.urlHandler(map); // リンク書換機能の追加
if (typeof url._zoom != 'undefined') { // 位置情報付URL
map.setView([url._lat, url._lng], url._zoom);
}
}