戦後・復興期と現在の空中写真を重ねて比較してみた

昨日の続き。

Facebookにて、レイヤーを重ねて比較するサンプルコードを教えていただいたので、やってみました。
サンプルをちょっと弄っただけですが、一応Y軸にもスライドできるようにしてみました。
上のスライダーを動かすとY軸が、下のスライダーを動かすとX軸の表示領域が変わります。

重ねたレイヤーをcssのclip機能で切り抜いて表示・非表示を操作しています。

サンプル

var ort = L.tileLayer(
  'http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {
    attribution: "GSI Ortho", maxNativeZoom: 17, maxZoom: 20
});

var ort1940 = L.tileLayer(
  'http://cyberjapandata.gsi.go.jp/xyz/ort_USA10/{z}/{x}/{y}.png', {
    attribution: "GSI Ortho 1940s", maxNativeZoom: 17, maxZoom: 20
});

var std = L.tileLayer(
	'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
	{
	    attribution: "GSI Std", maxNativeZoom: 17, maxZoom: 20
	}
);

var map = L.map('mapdiv', {
	center: [35.6768, 139.7218],
	zoom: 16,
	layers: [ort, std , ort1940],
	zoomControl: false
});

new L.Control.Zoom({ position: 'bottomright' }).addTo(map);
var hash = L.hash(map);

var rangeX = document.querySelector('.rangeX');
var rangeY = document.querySelector('.rangeY');

function clip() {
	var nw = map.containerPointToLayerPoint([0, 0]);	//レイヤーコンテナ左上座標(North West)
	var se = map.containerPointToLayerPoint(map.getSize());	//レイヤーコンテナ右下座標(South East)


	var clipX = nw.x + (se.x - nw.x) * rangeX.value;	//x軸右座標( * 0.5 でx軸中心座標)
	var clipY = nw.y + (se.y - nw.y) * rangeY.value; 	//y軸下座標
	  
	//css clipをレイヤーコンテナに適用する rect（上,右,下,左）
	std.getContainer().style.clip = 'rect(' + [nw.y, clipX, clipY, nw.x].join('px,') + 'px)';
	ort1940.getContainer().style.clip = 'rect(' + [clipY, clipX, se.y, nw.x].join('px,') + 'px)';
}


//三項演算子を使ってoninputが存在するか調べてイベントリスナーを設定してる
rangeX['oninput' in rangeX ? 'oninput' : 'onchange'] = clip;
rangeY['oninput' in rangeY ? 'oninput' : 'onchange'] = clip;

map.on('move', clip);

clip();

var ort = L.tileLayer(

'http://cyberjapandata.gsi.go.jp/xyz/ort/{z}/{x}/{y}.jpg', {

attribution: "GSI Ortho", maxNativeZoom: 17, maxZoom: 20

});

var ort1940 = L.tileLayer(

'http://cyberjapandata.gsi.go.jp/xyz/ort_USA10/{z}/{x}/{y}.png', {

attribution: "GSI Ortho 1940s", maxNativeZoom: 17, maxZoom: 20

});

var std = L.tileLayer(

'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',

{

attribution: "GSI Std", maxNativeZoom: 17, maxZoom: 20

}

);

var map = L.map('mapdiv', {

center: [35.6768, 139.7218],

zoom: 16,

layers: [ort, std , ort1940],

zoomControl: false

});

new L.Control.Zoom({ position: 'bottomright' }).addTo(map);

var hash = L.hash(map);

var rangeX = document.querySelector('.rangeX');

var rangeY = document.querySelector('.rangeY');

function clip() {

var nw = map.containerPointToLayerPoint([0, 0]); //レイヤーコンテナ左上座標(North West)

var se = map.containerPointToLayerPoint(map.getSize()); //レイヤーコンテナ右下座標(South East)

var clipX = nw.x + (se.x - nw.x) * rangeX.value; //x軸右座標( * 0.5 でx軸中心座標)

var clipY = nw.y + (se.y - nw.y) * rangeY.value; //y軸下座標

//css clipをレイヤーコンテナに適用する rect（上,右,下,左）

std.getContainer().style.clip = 'rect(' + [nw.y, clipX, clipY, nw.x].join('px,') + 'px)';

ort1940.getContainer().style.clip = 'rect(' + [clipY, clipX, se.y, nw.x].join('px,') + 'px)';

}

//三項演算子を使ってoninputが存在するか調べてイベントリスナーを設定してる

rangeX['oninput' in rangeX ? 'oninput' : 'onchange'] = clip;

rangeY['oninput' in rangeY ? 'oninput' : 'onchange'] = clip;

map.on('move', clip);

clip();

ブラウザ間の違いを吸収する

ブラウザによって、使えるメソッドやプロパティが違うのですが、三項演算子を使って分岐させる方法をこのサンプルで初めて知りました。これ便利ですね。

rangeX['oninput' in rangeX ? 'oninput' : 'onchange'] = clip;

1	rangeX['oninput' in rangeX ? 'oninput' : 'onchange'] = clip;

JavaScript – ブラウザ間のメソッドやプロパティの違いを三項演算子を使って吸収する – Qiita

サンプル

ブラウザ間の違いを吸収する

投稿者: shimizu