Newer
Older
2022-yuuji-TwinMapWithImage / getimage.js
@HIROSE Yuuji HIROSE Yuuji on 22 Oct 2024 1 KB getimage.html added
document.addEventListener("DOMContentLoaded", () => {
    // 朝日中央地区:
    var bounds = [[38.671707, 139.795534], [38.572461, 139.880335]]
    var center = [38.617121, 139.8417], inizoom = 13;
    var infobox = document.getElementById("info");
    var printbtn;
    // 左マップ
    var osm = L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution:
	'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    });
    var gsiPhoto = L.tileLayer(
	'https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg',
	{attribution: '&copy; <a href="http://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>',
	 maxZoom: 20, maxNativeZoom: 18});
    var baseLayer = {
	OpenStreetMap: osm,
	地理院空中写真: gsiPhoto
    };
    var mymap = L.map("map", baseLayer).setView(center, inizoom);
    L.control.layers(baseLayer).addTo(mymap);
    osm.addTo(mymap);
    function showCorners(e) {
	let b=mymap.getBounds(), b1=b.getNorthWest(), b2=b.getSouthEast();
	infobox.innerText = `${e&&e.latlng||""} [[${b1.lat}, ${b1.lng}], [${b2.lat}, ${b2.lng}]]`;
    }
    mymap.on("contextmenu", showCorners);
    //Bボタンが押されたときの処理
    printbtn =  printbtn || L.control.BigImage({
	position: 'topright', printControlLabel: "P", maxScale: 1
    }).addTo(mymap);
    infobox.innerHTML =
	"画像化したい範囲にピタリ合わせ、" +
	"Pボタンを押しスケール1のままDOWNLOADボタンを押してください。" +
	"このとき下に出る bound= の行を正確に記録してください。"
    document.getElementById("print-container").addEventListener("click", () => {
	showCorners();
    });
});