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

2015/04/11 - leaflet.js

昨日の続き。

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

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

サンプル

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

関連

関連記事

[Turf.js]node.jsとturfで重い統計処理をバックエンドで行う。

Leaflet.jsで作成した地図上にお天気情報をオーバーレイする

ぬるぬる動く！Web地図クライアント「Leaflet」を使おう！

ハイクオリティでちょーかっこいいデータ視覚化地図が作れる「Leaflet-dvf」

[leaflet]クライアントサイドでの画像処理を可能にする「tilefilter」プラグイン

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

D3 Geo Hello World!

Leaflet.jsを使って、巨大な画像を地図のように表示するプラグイン「Leaflet.Zoomify」

ブラウザおよびnode.jsのための高度な地理空間データ分析ライブラリ「turf.js」

[Turf.js]ラインに沿って任意の距離を移動する