2022年2月28日 (月) 03:22時点における版

チュートリアル14 WebApp Layer geoJSON

動的にベクトルデータが生成・配信されているサービスをSVGMap.jsに結合します。ここではUSGS Hazards Programが配信している、世界の地震発生状況データ(GeoJSON版)を結合してみます。基本的にはチュートリアル6との違いはありません。

実際の動作は、こちらをクリック。
ソースコードのディレクトリ

geojson1.html

チュートリアル6と特に違いはありません。

Container.svg

チュートリアル6と特に違いはありません。

geoJsonExample2.svg

ドキュメントルート要素(svg要素)の、data-controller属性で、このレイヤーを操作するwebAppを指定しています。
- data-controller="geoJsonExample1.html#exec=appearOnLayerLoad
- exec=appearOnLayerLoadは、レイヤが表示状態になるとwebAppのウィンドが出現する設定です。（詳しくはこちら）
defs要素でマーカー(POIのアイコン)を定義しています
- マーカーの色はマグニチュードに応じて変化させるためここでは未定義にしてあります

<?xml version="1.0" encoding="UTF-8"?>
<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:go="http://purl.org/svgmap/profile" viewBox="12375.0 -4500.0 2250.0 2250.0" go:dataArea="12375.0 -4500.0 2250.0 2250.0" data-controller="geoJsonExample2.html#exec=appearOnLayerLoad" property="name,address,phone,url">

<defs>
<g id="p0">
<circle cx="0" cy="0" r="10" stroke="none"/>
</g>
</defs>

<globalCoordinateSystem srsName="http://purl.org/crs/84" transform="matrix(100.0,0.0,0.0,-100.0,0.0,0.0)" />
<g id="mapContents"></g>
</svg>

geoJsonExample2.html

geoJsonExample2.svgに紐付けられ、そのDOMをコントロールできるwebApp
チュートリアル6#geoJsonExample1.htmlに対して以下が相違点
loadJSON(url) : await fetchを使ってGeoJsonデータを非同期読み込み
SVGMap GISライブラリ(svgMapGIStool)のdrawGeoJson関数を使用し、geoJsonをSVGMapコンテンツ(のDOM)への変換をしています。
- なお、自力でgeoJsonをSVGMapコンテンツのDOMに変換することももちろん可能ですが、チュートリアル6ではライブラリを使っています。
- 引数については解説書#drawGeoJsonを参照

svgMap.refreshScreen() 伸縮スクロール以外のタイミングでDOMの再描画が必要な場合、再描画を明示する必要があります。
- 参考情報

<!doctype html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>SVGMapのwebAppレイヤーで、geoJsonを描画するサンプル</title>
</head>

<style>
/* 奇数行のスタイル */
table tr:nth-child(odd){
  background-color:#c0c0ff;
}
 
/* 偶数行のスタイル */
table tr:nth-child(even){
  background-color:#e0e0e0;
}
</style>

<script>
var usgsEarthquakeService="https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/";
var timeSpanKeys=["hour","day","week","month"]; // 配信データの期間設定の選択枝
var timeSpanDefault=2; // 過去1週間のデータの表示をデフォルトに
var levelKeys=["significant","4.5","2.5","1.0","all"]; // マグニチュード別の配信データの選択枝
var levelDefault=2; // M2.5以上の地震の表示をデフォルトに
var intervalMinutes=10; // 10分おきに更新する
var metaSchema; // SVGMap.jsの標準で用意されているジオメトリ選択時のメタデータ表示UIの正規化されたスキーマを格納する

addEventListener("load", function(){
	buildDataSelect();
	changeData();
	setInterval(function(){
		changeData();
		messageDiv.innerText=new Date().toLocaleString() + " update";
	} ,intervalMinutes * 60 * 1000);
});

function changeData(){
	var param1 = dataSelect1.selectedIndex;
	var param2 = dataSelect2.selectedIndex;
	var path = getUSGSURL(param1,param2);
	loadAndDrawGeoJson(path);
}

async function loadAndDrawGeoJson(dataPath){
	var gjs = await loadJSON(dataPath);
	buildSchema(gjs.features);
	setMagColors(gjs.features);
	console.log("geoJson:",gjs);
	var parentElm = svgImage.getElementById("mapContents");
	removeChildren(parentElm);
	svgMapGIStool.drawGeoJson(gjs, layerID, "orange", 2, "orange", "p0", "poi", "", parentElm, metaSchema);
	svgMap.refreshScreen();
}

function buildDataSelect(){
	var first=true;
	for ( var i = 0 ; i < timeSpanKeys.length; i++){
		var timeSpanKey = timeSpanKeys[i];
		var selectedOpt="";
		if ( timeSpanDefault == i){
			selectedOpt="selected";
		}
		dataSelect1.insertAdjacentHTML('beforeend', `<option value="${timeSpanKey}" ${selectedOpt}>${timeSpanKey}</option>`);
	}
	for ( var i = 0 ; i < levelKeys.length ; i++){
		var levelKey = levelKeys[i];
		var selectedOpt="";
		if ( levelDefault == i){
			selectedOpt="selected";
		}
		dataSelect2.insertAdjacentHTML('beforeend',  `<option value="${levelKey}" ${selectedOpt}>${levelKey}</option>`);
	}
}

async function loadJSON(url){
	var response = await fetch(url+"?time="+new Date().getTime()); // 常に最新のデータを得るには何かダミーのクエリパートを付けるBad Tips..
	// https://stackoverflow.com/questions/37204296/cache-invalidation-using-the-query-string-bad-practice
	// https://stackoverflow.com/questions/9692665/cache-busting-via-params
	var json = await response.json();
	return ( json );
}

function removeChildren(element){
	while (element.firstChild) element.removeChild(element.firstChild);
}

function getUSGSURL(timeSpan, level){
	if (!timeSpanKeys[timeSpan]){return};
	if (!levelKeys[level]){return};
	var ans = `${usgsEarthquakeService}${levelKeys[level]}_${timeSpanKeys[timeSpan]}.geojson`;
	console.log("getUSGSURL:",ans);
	return (ans);
}

function buildSchema(features){ // geojsonのfeatureのproprerty名から正規化されたスキーマを生成
	metaSchema={};
	for ( var feature of features){ // 一応全データをトレース
		for ( var propName in feature.properties){
			if (!metaSchema[propName]){
				metaSchema[propName]=true;
			}
		}
	}
	metaSchema=Object.keys(metaSchema);
	svgImage.documentElement.setAttribute("property",metaSchema.join());
}

function setMagColors(features){ // [[解説書#drawGeoJson]]のスタイリング仕様を使い、マグニチュードに応じた色を付ける
	for ( var feature of features){
		var mag = feature.properties.mag;
		// マグニチュード3...7でクリッピング
		mag = Math.max(3,mag);
		mag = Math.min(7,mag);
		// 色相(hue)に変換し、そこからRGBカラーを生成
		var hue = (7-mag)/(4)*240;
		var rgb = svgMapGIStool.hsv2rgb(hue,100,100);
		console.log(rgb);
		if ( rgb){
			feature.properties["marker-color"]=`#${rgb.r.toString(16).padStart(2, '0')}${rgb.g.toString(16).padStart(2, '0')}${rgb.b.toString(16).padStart(2, '0')}`;
		}
	}
	console.log(features);
}

</script>
<body>
<h3>area layer</h3>
<p><a href="https://earthquake.usgs.gov/earthquakes/feed/">USGS Earthquake Hazards Program Feed</a>の可視化</p>
期間<select id="dataSelect1" onchange="changeData()"></select><br>
規模<select id="dataSelect2" onchange="changeData()"></select>
<div id="messageDiv"></div>
</body>
</html>

チュートリアル14

2022年2月28日 (月) 03:22時点における版

目次

チュートリアル14 WebApp Layer geoJSON

geojson1.html

Container.svg

geoJsonExample2.svg

geoJsonExample2.html

個人用ツール

名前空間

変種

表示

操作

検索

案内

ツール

Translate

@@ 33行: / 33行: @@
 </pre>
-==geoJsonExample1.html==
+==geoJsonExample2.html==
-*geoJsonExample1.svgに紐付けられ、[[解説書#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|そのDOMをコントロールできるwebApp]]
+*geoJsonExample2.svgに紐付けられ、[[解説書#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|そのDOMをコントロールできるwebApp]]
-*このアプリでは簡単なUIを持ち、<code>dataPaths </code>で設定した　いくつかのgeoJsonデータを選択できるようになっています。
+*[[チュートリアル6#geoJsonExample1.html]]に対して以下が相違点
 *<code>loadJSON(url)</code> : [https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function await] [https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch fetch]を使って[https://ja.wikipedia.org/wiki/GeoJSON GeoJsonデータ]を非同期読み込み
 *[[解説書#svgMapGIStool..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI|SVGMap GISライブラリ(svgMapGIStool)]]の<code>drawGeoJson</code>関数を使用し、geoJsonをSVGMapコンテンツ(のDOM)への変換をしています。
@@ 51行: / 51行: @@
 	<title>SVGMapのwebAppレイヤーで、geoJsonを描画するサンプル</title>
 </head>
+<style>
+/* 奇数行のスタイル */
+table tr:nth-child(odd){
+  background-color:#c0c0ff;
+}
+/* 偶数行のスタイル */
+table tr:nth-child(even){
+  background-color:#e0e0e0;
+}
+</style>
 <script>
-var dataPaths = {
+var usgsEarthquakeService="https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/";
-	"A34b-180316.geojson":"世界遺産構成資産範囲ポリゴン（代表点）",
+var timeSpanKeys=["hour","day","week","month"]; // 配信データの期間設定の選択枝
-	"A34a-180316.geojson":"世界遺産構成資産範囲ポリゴンデータ",
+var timeSpanDefault=2; // 過去1週間のデータの表示をデフォルトに
-	"A34d-180316.geojson":"世界遺産構成資産範囲ライン（代表点）",
+var levelKeys=["significant","4.5","2.5","1.0","all"]; // マグニチュード別の配信データの選択枝
-	"A34c-180316.geojson":"世界遺産構成資産範囲ラインデータ",
+var levelDefault=2; // M2.5以上の地震の表示をデフォルトに
-	"A34e-180316.geojson":"世界遺産構成資産",
+var intervalMinutes=10; // 10分おきに更新する
-	"A34f-180316.geojson":"世界遺産緩衝地帯ポリゴンデータ",
+var metaSchema; // SVGMap.jsの標準で用意されているジオメトリ選択時のメタデータ表示UIの正規化されたスキーマを格納する
-	"A34g-180316.geojson":"世界遺産緩衝地帯ポリゴン（代表点）",
-	"C28-20_Airport.geojson":"空港データ空港",
-	"C28-20_AirportReferencePoint.geojson":"空港データ標点",
-	"C28-20_SurveyContent.geojson":"空港データ調査内容",
-	"C28-20_TerminalBuilding.geojson":"空港データターミナルビル",
-	"N02-20_RailroadSection.geojson":"鉄道データ鉄道",
-	"N02-20_Station.geojson":"鉄道データ駅"
-};
 addEventListener("load", function(){
 	buildDataSelect();
 	changeData();
+	setInterval(function(){
+		changeData();
+		messageDiv.innerText=new Date().toLocaleString() + " update";
+	} ,intervalMinutes * 60 * 1000);
 });
 function changeData(){
-	var path = dataSelect.options[dataSelect.selectedIndex].value;
+	var param1 = dataSelect1.selectedIndex;
+	var param2 = dataSelect2.selectedIndex;
+	var path = getUSGSURL(param1,param2);
 	loadAndDrawGeoJson(path);
 }
@@ 81行: / 91行: @@
 async function loadAndDrawGeoJson(dataPath){
 	var gjs = await loadJSON(dataPath);
+	buildSchema(gjs.features);
+	setMagColors(gjs.features);
+	console.log("geoJson:",gjs);
 	var parentElm = svgImage.getElementById("mapContents");
 	removeChildren(parentElm);
-	svgMapGIStool.drawGeoJson(gjs, layerID, "orange", 2, "orange", "p0", "poi", "", parentElm);
+	svgMapGIStool.drawGeoJson(gjs, layerID, "orange", 2, "orange", "p0", "poi", "", parentElm, metaSchema);
 	svgMap.refreshScreen();
 }
@@ 89行: / 102行: @@
 function buildDataSelect(){
 	var first=true;
-	for ( var dataPath in dataPaths){
+	for ( var i = 0 ; i < timeSpanKeys.length; i++){
-		dataSelect.insertAdjacentHTML('beforeend', '<option value="' + dataPath +'" >'+dataPaths[dataPath]+'</option>');
+		var timeSpanKey = timeSpanKeys[i];
+		var selectedOpt="";
+		if ( timeSpanDefault == i){
+			selectedOpt="selected";
+		}
+		dataSelect1.insertAdjacentHTML('beforeend', `<option value="${timeSpanKey}" ${selectedOpt}>${timeSpanKey}</option>`);
+	}
+	for ( var i = 0 ; i < levelKeys.length ; i++){
+		var levelKey = levelKeys[i];
+		var selectedOpt="";
+		if ( levelDefault == i){
+			selectedOpt="selected";
+		}
+		dataSelect2.insertAdjacentHTML('beforeend',  `<option value="${levelKey}" ${selectedOpt}>${levelKey}</option>`);
 	}
 }
 async function loadJSON(url){
-	var dt = getDateStr(new Date(),10);
+	var response = await fetch(url+"?time="+new Date().getTime()); // 常に最新のデータを得るには何かダミーのクエリパートを付けるBad Tips..
-	var response = await fetch(url+"?time="+dt); // 常に最新のデータを得るには何かダミーのクエリパートを付けるBad Tips..
 	// https://stackoverflow.com/questions/37204296/cache-invalidation-using-the-query-string-bad-practice
 	// https://stackoverflow.com/questions/9692665/cache-busting-via-params
@@ 103行: / 128行: @@
 }
-function getDateStr(dateData , tStep){
+function removeChildren(element){
-	var mind = tStep * Math.floor( dateData.getUTCMinutes() / tStep ) ;
+	while (element.firstChild) element.removeChild(element.firstChild);
-	var ans = dateData.getUTCFullYear()+ pad(dateData.getUTCMonth() + 1) + pad(dateData.getUTCDate()) + pad(dateData.getUTCHours()) + pad(mind);
-	return ( ans );
 }
-function pad( inp ){
-	return ( ("0"+inp).slice(-2));
+function getUSGSURL(timeSpan, level){
+	if (!timeSpanKeys[timeSpan]){return};
+	if (!levelKeys[level]){return};
+	var ans = `${usgsEarthquakeService}${levelKeys[level]}_${timeSpanKeys[timeSpan]}.geojson`;
+	console.log("getUSGSURL:",ans);
+	return (ans);
 }
-function removeChildren(element){
+function buildSchema(features){ // geojsonのfeatureのproprerty名から正規化されたスキーマを生成
-	while (element.firstChild) element.removeChild(element.firstChild);
+	metaSchema={};
+	for ( var feature of features){ // 一応全データをトレース
+		for ( var propName in feature.properties){
+			if (!metaSchema[propName]){
+				metaSchema[propName]=true;
+			}
+		}
+	}
+	metaSchema=Object.keys(metaSchema);
+	svgImage.documentElement.setAttribute("property",metaSchema.join());
+}
+function setMagColors(features){ // [[解説書#drawGeoJson]]のスタイリング仕様を使い、マグニチュードに応じた色を付ける
+	for ( var feature of features){
+		var mag = feature.properties.mag;
+		// マグニチュード3...7でクリッピング
+		mag = Math.max(3,mag);
+		mag = Math.min(7,mag);
+		// 色相(hue)に変換し、そこからRGBカラーを生成
+		var hue = (7-mag)/(4)*240;
+		var rgb = svgMapGIStool.hsv2rgb(hue,100,100);
+		console.log(rgb);
+		if ( rgb){
+			feature.properties["marker-color"]=`#${rgb.r.toString(16).padStart(2, '0')}${rgb.g.toString(16).padStart(2, '0')}${rgb.b.toString(16).padStart(2, '0')}`;
+		}
+	}
+	console.log(features);
 }
@@ 119行: / 173行: @@
 <body>
 <h3>area layer</h3>
-<p>geoJsonの可視化</p>
+<p><a href="https://earthquake.usgs.gov/earthquakes/feed/">USGS Earthquake Hazards Program Feed</a>の可視化</p>
-<select id="dataSelect" onchange="changeData()"></select>
+期間<select id="dataSelect1" onchange="changeData()"></select><br>
+規模<select id="dataSelect2" onchange="changeData()"></select>
+<div id="messageDiv"></div>
 </body>
 </html>
 </pre>