チュートリアル15 - 版の履歴

Admin: /* CanadianGeoNames.html */

2024-07-19T10:32:03Z

‎CanadianGeoNames.html

2023-06-23T14:34:12Z

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

2022-02-28T08:14:43Z

‎コード

2022-02-28T08:13:10Z

‎コード

2022-02-28T08:11:20Z

‎コード

2022-02-28T08:10:05Z

‎コード

2022-02-28T08:06:45Z

‎コード

2022-02-28T08:04:16Z

‎コード

2022-02-28T08:03:54Z

‎コード

2022-02-28T08:03:20Z

‎コード

@@ 28行目: / 28行目: @@
 </pre>
-==CanadianGeoNames.html==
+==CanadianGeoNames.html, CanadianGeoNames.js==
 ===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のうち今回使用する部分をまとめます。
@@ 88行目: / 88行目: @@
 ***<code>svgMap.refreshScreen();</code> : SVGMapコンテンツのDOM生成完了したら再描画する
 ****参考: [[解説書#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90|再描画の制限]]
 <pre>
 <!doctype html>
@@ 95行目: / 97行目: @@
 <meta charset="utf-8"></meta>
 </head>
-<script>
+<script src="CanadianGeoNames.js"></script>
 var canadianGeoNamesService = "https://geogratis.gc.ca/services/geoname/en/geonames.csv";
@@ 172行目: / 184行目: @@
+	}
+}
 </pre>

@@ 5行目: / 5行目: @@
 * 実際の動作は、[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 ==

@@ 78行目: / 78行目: @@
 **<code>drawPoints()</code> : 取得したデータを可視化します。 今回はCSVから直接SVGのuse要素を作り、可視化しています。
 ***<code>svgImage</code> : レイヤーに紐づいたwebAppに組み込まれた同レイヤーのSVGMapドキュメントオブジェクト
 ***<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フレームワーク]]

@@ 77行目: / 77行目: @@
 ***<code>line.split(...)</code> : [https://www.ipentec.com/document/csharp-read-csv-file-by-regex こちらの記事]をもとにダブルクォーテーションエスケープを加味してパース
 **<code>drawPoints()</code> : 取得したデータを可視化します。 今回はCSVから直接SVGのuse要素を作り、可視化しています。
 ***<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フレームワーク]]

@@ 69行目: / 69行目: @@
 ===コード===
-*<code>addEventListener("zoomPanMap",  getGeoNames)</code> : 伸縮スクロールの度にサービスに問い合わせ可視化します。
+*<code>addEventListener("zoomPanMap",  getGeoNames)</code> : 伸縮スクロールの度にサービスに問い合わせ、紐づいたレイヤーのSVGMapコンテンツのDOMを構築し可視化します。
-**１ステップ前（伸縮スクロール前）のデータは、たとえ現ステップでも存在していたとしても全消去してから再描画しています。（タイリングなどの、より高度な仕組みは実装していない）
+**１ステップ前（伸縮スクロール前）のデータは、たとえ現ステップでも存在していたとしても単純に全消去してから再配置しています。（タイリングなどの、より高度な仕組みは実装していない）
 *<code>getGeoNames()</code> : サービスにと合わせて可視化する非同期関数
 **<code>svgMap.getGeoViewBox()</code> : 地理的な表示領域を得る

@@ 96行目: / 96行目: @@
 onload=function(){
-	addEventListener("zoomPanMap", getGeoNames);
+	addEventListener("zoomPanMap",  getGeoNames);
 	getGeoNames();
+}
@@ 105行目: / 105行目: @@
 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){ // 最大数以上の場合メッセージを出す
 		messageDiv.innerText="Exceeded maximum number. Please zoom in.";
 	}else{
 		messageDiv.innerText="";
+	}
-	drawPoints(csv);
+	drawPoints(csv); // 取得したデータを可視化する
+}
@@ 167行目: / 164行目: @@
 function removeUses(){
 	var uses = svgImage.getElementsByTagName("use");
 	for ( var i = uses.length-1 ; i >=0 ; i--){
 		uses[i].remove();
+	}
+}
 </script>

@@ 74行目: / 74行目: @@
 **<code>getCanadianGeoNamesReq()</code> : 表示領域をもとにサービスへのクエリを組み立て
 **<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>schema</code> : 紐づいたレイヤーのSVGMapコンテンツのドキュメント要素のpropertyにスキーマを設置

@@ 82行目: / 82行目: @@
 ***<code>"content"</code> : メタデータをcsvで設置
 ***<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|再描画の制限]]
 <pre>