チュートリアル15

提供: svg2wiki
(版間での差分)
移動: 案内, 検索
(コード)
(CanadianGeoNames.html)
 
(1人の利用者による、間の10版が非表示)
5行: 5行:
  
 
* 実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/vectorService1/vectorService1.html こちら]をクリック。
 
* 実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/vectorService1/vectorService1.html こちら]をクリック。
* [https://svgmap.org/devinfo/devkddi/tutorials/vectorService1/ ソースコードのディレクトリ]
+
* 使用ファイルの[https://www.svgmap.org/devinfo/devkddi/tutorials/vectorService1.zip ZIPアーカイブファイル]
 +
 
  
 
== vectorService1.html ==
 
== vectorService1.html ==
27行: 28行:
 
</pre>
 
</pre>
  
==CanadianGeoNames.html==
+
==CanadianGeoNames.html, CanadianGeoNames.js==
 
===REST API===
 
===REST API===
 
少し複雑ですので、[https://www.nrcan.gc.ca/maps-tools-and-publications/maps/geographical-names-canada/application-programming-interface-api/9249 Geographical names in Canada : Geoname Service]が提供するAPIのうち今回使用する部分をまとめます。
 
少し複雑ですので、[https://www.nrcan.gc.ca/maps-tools-and-publications/maps/geographical-names-canada/application-programming-interface-api/9249 Geographical names in Canada : Geoname Service]が提供するAPIのうち今回使用する部分をまとめます。
69行: 70行:
 
===コード===
 
===コード===
  
*<code>addEventListener("zoomPanMap",  getGeoNames)</code> : 伸縮スクロールの度にサービスに問い合わせ可視化する。
+
*<code>addEventListener("zoomPanMap",  getGeoNames)</code> : 伸縮スクロールの度にサービスに問い合わせ、紐づいたレイヤーのSVGMapコンテンツのDOMを構築し可視化します。
 +
**1ステップ前(伸縮スクロール前)のデータは、たとえ現ステップでも存在していたとしても単純に全消去してから再配置しています。(タイリングなどの、より高度な仕組みは実装していない)
 
*<code>getGeoNames()</code> : サービスにと合わせて可視化する非同期関数
 
*<code>getGeoNames()</code> : サービスにと合わせて可視化する非同期関数
 
**<code>svgMap.getGeoViewBox()</code> : 地理的な表示領域を得る
 
**<code>svgMap.getGeoViewBox()</code> : 地理的な表示領域を得る
**<code>getCanadianGeoNamesReq()</code> : 表示領域をもとにサービスへのクエリを組み立てる
+
**<code>getCanadianGeoNamesReq()</code> : 表示領域をもとにサービスへのクエリを組み立て
 
**<code>await getCsv()</code> : クエリを使って非同期でCSVを取得・パース
 
**<code>await getCsv()</code> : クエリを使って非同期でCSVを取得・パース
***<code>line.split(...)</code> : [https://www.ipentec.com/document/csharp-read-csv-file-by-regex こちらの記事]をもとにダブルクォーテーションエスケープを加味してパースする
+
***<code>line.split(...)</code> : [https://www.ipentec.com/document/csharp-read-csv-file-by-regex こちらの記事]をもとにダブルクォーテーションエスケープを加味してパース
**<code>drawPoints()</code> : 取得したデータを可視化する 今回はCSVから直接SVGのuse要素を作り、可視化しています。
+
**<code>drawPoints()</code> : 取得したデータを可視化します。 今回はCSVから直接SVGのuse要素を作り、可視化しています。
 +
***<code>svgImage</code> : レイヤーに紐づいたwebAppに組み込まれた同レイヤーのSVGMapドキュメントオブジェクト
 +
****参考:[[解説書#svgImage]]
 
***<code>schema</code> : 紐づいたレイヤーのSVGMapコンテンツのドキュメント要素のpropertyにスキーマを設置
 
***<code>schema</code> : 紐づいたレイヤーのSVGMapコンテンツのドキュメント要素のpropertyにスキーマを設置
 
****参考:[[解説書#metadata.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF|SVGMap.jsのmetadataフレームワーク]]
 
****参考:[[解説書#metadata.E3.83.95.E3.83.AC.E3.83.BC.E3.83.A0.E3.83.AF.E3.83.BC.E3.82.AF|SVGMap.jsのmetadataフレームワーク]]
 
***<code>"transform", `ref(svg,${lng},${-lat})`</code> : svg1.2の[https://www.w3.org/TR/SVGTiny12/single-page.html#coords-transform-ref TransformRef]を使い、サイズが変化しないアイコンを設置しています。
 
***<code>"transform", `ref(svg,${lng},${-lat})`</code> : svg1.2の[https://www.w3.org/TR/SVGTiny12/single-page.html#coords-transform-ref TransformRef]を使い、サイズが変化しないアイコンを設置しています。
****参考:[[解説書#.E5.B1.9E.E6.80.A7]]
+
****参考:[[解説書#.E5.B1.9E.E6.80.A7|サポートされている属性]]
 
***<code>"content"</code> : メタデータをcsvで設置
 
***<code>"content"</code> : メタデータをcsvで設置
 
***<code>"xlink:href", "#p0"</code> : defs要素内のid:p0のシンボル(赤い丸)を参照
 
***<code>"xlink:href", "#p0"</code> : defs要素内のid:p0のシンボル(赤い丸)を参照
***<code>svgMap.refreshScreen();</code> : DOMが生成完了したら再描画する
+
***<code>svgMap.refreshScreen();</code> : SVGMapコンテンツのDOM生成完了したら再描画する
 
****参考: [[解説書#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90|再描画の制限]]
 
****参考: [[解説書#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90|再描画の制限]]
 +
 +
CanadianGeoNames.html
 
<pre>
 
<pre>
 
<!doctype html>
 
<!doctype html>
91行: 97行:
 
<meta charset="utf-8"></meta>
 
<meta charset="utf-8"></meta>
 
</head>
 
</head>
<script>
+
<script src="CanadianGeoNames.js"></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>
 +
</pre>
 +
 
 +
CanadianGeoNames.js
 +
<pre>
  
 
var canadianGeoNamesService = "https://geogratis.gc.ca/services/geoname/en/geonames.csv";
 
var canadianGeoNamesService = "https://geogratis.gc.ca/services/geoname/en/geonames.csv";
  
 
onload=function(){
 
onload=function(){
addEventListener("zoomPanMap", getGeoNames);
+
addEventListener("zoomPanMap", getGeoNames);
 
getGeoNames();
 
getGeoNames();
 
}
 
}
105行: 121行:
  
 
async function getGeoNames(){
 
async function getGeoNames(){
console.log("called getGeoNames");
+
var geoViewBox = svgMap.getGeoViewBox(); // 地理的な表示領域を得る
+
var req = getCanadianGeoNamesReq(geoViewBox); // 表示領域をもとにサービスへのクエリを組み立てる
var geoViewBox = svgMap.getGeoViewBox();
+
var csv = await getCsv(req); // クエリを使って非同期でCSVを取得
var req = getCanadianGeoNamesReq(geoViewBox);
+
if ( csv.length > maxItems){ // 最大数以上の場合メッセージを出す
var csv = await getCsv(req);
+
if ( csv.length > maxItems){
+
 
messageDiv.innerText="Exceeded maximum number. Please zoom in.";
 
messageDiv.innerText="Exceeded maximum number. Please zoom in.";
 
}else{
 
}else{
 
messageDiv.innerText="";
 
messageDiv.innerText="";
 
}
 
}
drawPoints(csv);
+
drawPoints(csv); // 取得したデータを可視化する
console.log(csv);
+
 
}
 
}
  
167行: 180行:
 
function removeUses(){
 
function removeUses(){
 
var uses = svgImage.getElementsByTagName("use");
 
var uses = svgImage.getElementsByTagName("use");
console.log(uses.length);
 
 
for ( var i = uses.length-1 ; i >=0 ; i--){
 
for ( var i = uses.length-1 ; i >=0 ; i--){
 
uses[i].remove();
 
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>
 
 
</pre>
 
</pre>

2024年7月19日 (金) 10:32時点における最新版

目次

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

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

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


[編集] vectorService1.html

[編集] Container.svg

[編集] 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, CanadianGeoNames.js

[編集] REST API

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

[編集] 使用するクエリパラメータ

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

  • bbox 西、南、東、北の座標(世界測地系の度の値)をカンマ区切りで指定
  • num 出力する最大数
  • .csv拡張子 厳密にはクエリパラメータではありませんが、パス部の拡張子を設定することで指定したメディアが配信されます。(デフォルトはhtml)今回はCSVを使うことにします。
  • クロスオリジン設定 今回は別ドメインのサービスにアクセスすることになるので、ウェブサービスがクロスオリジンアクセスを許可している必要があります。Geographical names in Canada : Geoname Serviceは許可されているようです。

[編集] 配信されるデータ

クエリパラメータに基づいたCSVデータが返信されます。1行目がスキーマ行2行目以降にデータ続きます。以下のカラムがあるようです。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

[編集] コード

  • addEventListener("zoomPanMap", getGeoNames) : 伸縮スクロールの度にサービスに問い合わせ、紐づいたレイヤーのSVGMapコンテンツのDOMを構築し可視化します。
    • 1ステップ前(伸縮スクロール前)のデータは、たとえ現ステップでも存在していたとしても単純に全消去してから再配置しています。(タイリングなどの、より高度な仕組みは実装していない)
  • getGeoNames() : サービスにと合わせて可視化する非同期関数
    • svgMap.getGeoViewBox() : 地理的な表示領域を得る
    • getCanadianGeoNamesReq() : 表示領域をもとにサービスへのクエリを組み立て
    • await getCsv() : クエリを使って非同期でCSVを取得・パース
      • line.split(...) : こちらの記事をもとにダブルクォーテーションエスケープを加味してパース
    • drawPoints() : 取得したデータを可視化します。 今回はCSVから直接SVGのuse要素を作り、可視化しています。
      • svgImage : レイヤーに紐づいたwebAppに組み込まれた同レイヤーのSVGMapドキュメントオブジェクト
      • schema : 紐づいたレイヤーのSVGMapコンテンツのドキュメント要素のpropertyにスキーマを設置
      • "transform", `ref(svg,${lng},${-lat})` : svg1.2のTransformRefを使い、サイズが変化しないアイコンを設置しています。
      • "content" : メタデータをcsvで設置
      • "xlink:href", "#p0" : defs要素内のid:p0のシンボル(赤い丸)を参照
      • svgMap.refreshScreen(); : SVGMapコンテンツのDOM生成完了したら再描画する

CanadianGeoNames.html

<!doctype html>
<html>
<head>
<title>basic dynamic wms layer controller</title>
<meta charset="utf-8"></meta>
</head>
<script src="CanadianGeoNames.js"></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>

CanadianGeoNames.js


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

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


var crsAD=1;
var maxItems=100;

async function getGeoNames(){
	var geoViewBox = svgMap.getGeoViewBox(); // 地理的な表示領域を得る
	var req = getCanadianGeoNamesReq(geoViewBox); // 表示領域をもとにサービスへのクエリを組み立てる
	var csv = await getCsv(req); // クエリを使って非同期でCSVを取得
	if ( csv.length > maxItems){ // 最大数以上の場合メッセージを出す
		messageDiv.innerText="Exceeded maximum number. Please zoom in.";
	}else{
		messageDiv.innerText="";
	}
	drawPoints(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");
	for ( var i = uses.length-1 ; i >=0 ; i--){
		uses[i].remove();
	}
}
個人用ツール
名前空間

変種
操作
案内
ツール
Translate