ソースファイルを表示
sample/js/win_map.js
'use strict';
//
// ウィンドウ制御
//
var W = W || {} // 名前空間
W.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})
];
W.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})
];
W.baseCtl = { // ベースマップ切替ボタンの定義
"地理院標準地図": W.baseMap[0],
"地理院淡色地図": W.baseMap[1],
"OpenStreetMap": W.baseMap[2]
};
W.overCtl = { // オーバーレイマップ切替ボタンの定義
"地理院最新写真": W.overMap[0],
"1970年頃写真": W.overMap[1],
"1960年頃写真": W.overMap[2],
"色別標高図": W.overMap[3],
"陰影起伏図": W.overMap[4]
};
W.markKeys = [ // マーカの表示プロパティ
'name',
'addr',
'photo',
'desc'
];
W.listKeys = [ // マーカリストの表示プロパティ
'name',
'addr',
'desc'
];
W.markView = function(place, keys) { // マーカ情報表示タグ生成
let view = '';
keys.forEach((key) => {
if (!(key in place)) return;
if (place[key] == "") return;
view += '<div class="' + key + '">' + place[key] + '</div>\n';
});
return view;
}
W.MapWin = class extends W.MainWin { // 地図表示クラス
sub = null;
toolbox = null;
map = null;
bound = null;
cross = null;
title = '';
markList = null;
markLayer = null;
constructor(id, pid, opt={}) {
super(id, pid, opt);
this.map = L.map('wMap', {zoomControl: false, doubleClickZoom: false});
this.map.setView([37,136.5], 6); // 日本を表示
W.baseMap[0].addTo(this.map);
L.control.scale({imperial:false, position:'bottomright'}).addTo(this.map); // 目盛表示
L.control.zoom({position:'bottomright'}).addTo(this.map); // ズーム制御
L.control.opacityLayers(W.baseCtl, W.overCtl, {collapsed:true}).addTo(this.map); // 透過付マップ切替
this.title = opt.title;
this.markList = opt.markList.concat();
this.markLayer = L.layerGroup(); // マーカ表示用レイヤグループ
this.map.addLayer(this.markLayer);
W.setMarkers(this);
this.cross = this.addBtn({icon: 'cross'}); // 十字カーソルの登録
this.cross.style.boxShadow = "none";
this.cross.style.zIndex = 1110;
let url = L.urlHandler(this.map); // リンク書換機能の追加
if (typeof url._zoom != 'undefined') { // 位置情報付URL
this.map.setView([url._lat, url._lng], url._zoom);
} else {
this.map.fitBounds(this.bound); // マーカ全体の範囲を表示
}
return this;
}
dispList() { // リスト表示ウィンドウの表示/消去のトグル切替
if (this.sub == null) { // リストを表示
let id = this.id + 'List';
this.sub = new W._ListWin(id, this);
} else { // リストを消去
this.sub.remove();
}
}
// 地図のサイズ変更処理
_resize(entry) {
super._resize(entry);
this.map.invalidateSize(); // Leaflet地図のリサイズ処理
let w = Math.floor(this.win.clientWidth / 2 - 18);
let h = Math.floor(this.win.clientHeight / 2 - 18);
this.cross.style.left = w + 'px'; // 十字カーソルの移動
this.cross.style.top = h + 'px';
}
// 中心の緯度経度とズームレベルの取得
getPos() {
let pos = {};
let bounds = this.map.getBounds();
let coord = bounds.getCenter();
pos.lat = Math.round(coord.lat * 1000000) / 1000000;
pos.lng = Math.round(coord.lng * 1000000) / 1000000;
pos.zoom = this.map.getZoom();
return pos;
}
// L.ControlのDOM要素配置
// elem 配置するDOMElement
// pos 位置(topleft(初期値)/topright/bottomleft/bottomright)
// css 親の要素に付けるCSSのクラス
// 戻り値を受け取った変数に対してobj.remove();で削除できる。
addCtrl(elem, pos, css) {
let div = document.createElement('div');
if (typeof css != 'undefined') div.classList.add(css);
div.appendChild(elem);
if (typeof pos == 'undefined') pos = 'topleft';
let ctrl = L.Control.extend({
options: {
position: pos
},
onAdd: function(map) {
return div;
}
});
let obj = new ctrl();
obj.addTo(this.map);
return obj;
}
}
W.mapWin = function(id, pid, opt={}) { // 小文字で始まるショートカットの定義
return new W.MapWin(id, pid, opt);
}
W.setMarkers = function(mapWin) { // マーカーリスト登録
let latLng = L.latLng(mapWin.markList[0].coord.lat, mapWin.markList[0].coord.lng);
mapWin.bound = L.latLngBounds(latLng, latLng);
for (let i = 0; i < mapWin.markList.length; i++) { // マーカを登録
let place = mapWin.markList[i];
if ('desc' in place) place['desc'] = place.desc.replace(/<>/g, '\n');
let str = W.markView(place, W.markKeys);
let popup = L.popup().setContent(str);
let latLng = L.latLng(place.coord.lat, place.coord.lng);
mapWin.bound.extend(latLng);
place.mark = L.marker(latLng, {title: place.name}).bindPopup(popup).addTo(mapWin.markLayer);
}
}
W._ListWin = class extends W.SubWin { // リスト表示クラス
main = null;
constructor(id, main, opt={}) {
super(id, main, opt);
this.main = main;
this.win.innerHTML = '<h2>' + placeTitle + '</h2>\n<hr>\n';
for (let i = 0; i < main.markList.length; i++) { // マーカを登録
let place = main.markList[i];
let str = '<a href="javascript:W.placePopup(' + this.main.id + ',' + i + ');">'
str += '<div class="place">\n';
str += W.markView(place, W.listKeys);
str += '</div>\n</a>\n<hr>\n';
this.win.innerHTML += str;
}
this.main.resize();
return this;
}
// リスト削除メソッド
_remove() {
super._remove();
this.main.sub = null;
this.main.resize();
}
}
W.placePopup = function(win, idx) {
win.markList[idx].mark.openPopup();
win.map.panTo([win.markList[idx].coord.lat, win.markList[idx].coord.lng]);
}