チュートリアル15 WebApp Layer 伸縮スクロールに応じたベクトル地理情報サービス結合

動的にベクトルデータが生成・配信されているサービスをSVGMap.jsに結合します。チュートリアル14に対して、こちらは伸縮スクロールする度にその表示領域に応じたデータをサービスから取得して表示します。またチュートリアル14はgeoJsonデータのサービスでしたがこちらはCSVデータです。

結合するサービスはNatural Resources Canadaが提供している、Geoname Service API(カナダの地名データサービス)です。

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

vectorService1.html

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

Container.svg

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

CanadianGeoNames.svg

チュートリアル14と特に違いはありません。アイコンの色もこちらは赤に固定しています。

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="120,-50,30,30" data-controller="CanadianGeoNames.html#exec=appearOnLayerLoad">
 <globalCoordinateSystem srsName="http://purl.org/crs/84" transform="matrix(1,0,0,-1,0,0)"/>
 <defs>
 <g id="p0">
   <circle cx="0" cy="0" r="6" fill="red"/>
 </g>
 </defs>
</svg>

CanadianGeoNames.html

REST API

少し複雑ですので、Geographical names in Canada : Geoname Serviceが提供するAPIのうち今回使用する部分をまとめます。

使用するクエリパラメータ

今回は以下の二つを使います。

bbox 西、南、東、北の座標(世界測地系の度の値)をカンマ区切りで指定
num 出力する最大数

.csv拡張子　厳密にはクエリパラメータではありませんが、パス部の拡張子を設定することで指定したメディアが配信されます。（デフォルトはhtml）今回はCSVを使うことにします。

クロスオリジン設定　今回は別ドメインのサービスにアクセスすることになるので、ウェブサービスがクロスオリジンアクセスを許可している必要があります。Geographical names in Canada : Geoname Serviceは許可されているようです。

配信されるデータ

クエリパラメータに基づいたCSVデータが返信されます。1行目がスキーマ行２行目以降にデータ続きます。以下のカラムがあるようです。latitude、longitudeカラムで地図上にPointフィーチャを設置、nameカラムでそのタイトルを設置できそうです。その他のカラムはシンボルをクリックしたときにプロパティとして表示できるでしょう。データを取得してみると、カンマを含むデータがダブルクォーテーションでエスケープされていることがあるようです。

id
name
language.code
language.href
syllabic
feature.id
feature.href
category
status.code
status.href
concise.code
concise.href
generic.code
generic.href
location
province.code
province.href
map
relevance
accuracy
latitude
longitude
decision

コード

geoJsonExample2.svgに紐付けられ、そのDOMをコントロールできるwebApp
チュートリアル6#geoJsonExample1.htmlに対して以下が相違点
addEventListener("load", function(){..})
- changeData() UIの設定に基づき、地震データをリクエストして可視化する関数
  - getUSGSURL() USGSが配信する地震データを取得するためのGETリクエストを生成
  - loadAndDrawGeoJson()
    - buildSchema()
      - svgMapGIStool.drawGeoJson関数で可視化する際に、SVGMap.jsが持つメタデータ表示フレームワークに適応させるためのスキーマデータを構築
      - svgMapGIStool.drawGeoJson関数で渡す末尾の引数(metaSchema)を生成している
    - setMagColors()
      - svgMapGIStool.drawGeoJson関数の持つ、各フィーチャーのproperties値を使ってスタイルを設定可能な機能を使い、マグニチュード値をもとにpointフィーチャの色を指定
- setInterval(function(){..}..) 指定した間隔で定期的に更新する関数（地震データはリアルタイムに更新されるため）

<!doctype html>
<html>
<head>
<title>basic dynamic wms layer controller</title>
<meta charset="utf-8"></meta>
</head>
<script>

var canadianGeoNamesService = "https://geogratis.gc.ca/services/geoname/en/geonames.csv";

onload=function(){
	addEventListener("zoomPanMap", async function(){
		geoNames = await getGeoNames();
	});
	getGeoNames();
}


var crsAD=1;
var maxItems=100;

async function getGeoNames(){
	console.log("called getGeoNames");
	
	var geoViewBox = svgMap.getGeoViewBox();
	var req = getCanadianGeoNamesReq(geoViewBox);
	var csv = await getCsv(req);
	if ( csv.length > maxItems){
		messageDiv.innerText="Exceeded maximum number. Please zoom in.";
	}else{
		messageDiv.innerText="";
	}
	drawPoints(csv);
	console.log(csv);
}

function getCanadianGeoNamesReq(geoArea){
	var area_x0=geoArea.x;
	var area_y0=geoArea.y;
	var area_x1=geoArea.x+geoArea.width;
	var area_y1=geoArea.y+geoArea.height;
	var ans = `${canadianGeoNamesService}?bbox=${area_x0},${area_y0},${area_x1},${area_y1}&num=${maxItems}`;
	return ( ans );
}

async function getCsv(url){
	var response = await fetch(url); 
	var txt = await response.text();
	txt = txt.split("\n");
	var ans = [];
	for ( var line of txt ){
		// https://www.ipentec.com/document/csharp-read-csv-file-by-regex ダブルクォーテーションエスケープを加味したcsvパース
		line = line.split(/,(?=(?:[^"]*"[^"]*")*[^"]*$)/);
		if (line.length > 1){
			ans.push(line);
		}
	}
	return ( ans );
}

function drawPoints(csv){
	removeUses();
	var schema = csv[0].join();
	var latCol=csv[0].indexOf("latitude");
	var lngCol=csv[0].indexOf("longitude");
	svgImage.documentElement.setAttribute("property",schema);
	for ( var i = 1 ; i < csv.length ; i++){
		var point = csv[i];
		var meta = point.join();
		var lat = Number(point[latCol]);
		var lng = Number(point[lngCol]);
		var use=svgImage.createElement("use");
		use.setAttribute("xlink:href","#p0");
		use.setAttribute("content",meta);
		use.setAttribute("x",0);
		use.setAttribute("y",0);
		use.setAttribute("transform",`ref(svg,${lng},${-lat})`);
		svgImage.documentElement.appendChild(use);
	}
	svgMap.refreshScreen();
}

function removeUses(){
	var uses = svgImage.getElementsByTagName("use");
	console.log(uses.length);
	for ( var i = uses.length-1 ; i >=0 ; i--){
		uses[i].remove();
	}
	
	console.log(svgImage.getElementsByTagName("use").length);
}
</script>
<body>
<h3>Canadian GeoNames layer controller</h3>
<p>Get CanadianGeoNames Features from <a href="https://www.nrcan.gc.ca/maps-tools-and-publications/maps/geographical-names-canada/application-programming-interface-api/9249" target="_blank">Canadian GeoNames Search Service</a></p>
<div id="messageDiv" style="color:red">-</div>
</body>
</html>

チュートリアル15

目次