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

Admin: /* wmsController.html */

2024-07-19T10:27:57Z

‎wmsController.html

Admin: /* チュートリアル13 WebApp Layer WMS 伸縮スクロールに応じた表示 */

2023-06-23T14:32:25Z

‎チュートリアル13 WebApp Layer WMS 伸縮スクロールに応じた表示

Admin: /* wms_dynamic.svg */

2022-02-17T05:31:03Z

‎wms_dynamic.svg

Admin: /* wmsController.html */

2022-02-17T05:29:29Z

‎wmsController.html

Admin: /* wmsController.html */

2022-02-17T05:29:06Z

‎wmsController.html

Admin: /* wmsController.html */

2022-02-17T05:28:21Z

‎wmsController.html

Admin: /* wmsController.html */

2022-02-17T05:27:48Z

‎wmsController.html

Admin: /* wmsController.html */

2022-02-17T05:24:39Z

‎wmsController.html

Admin: /* wmsController.html */

2022-02-17T05:17:05Z

‎wmsController.html

Admin: /* wmsController.html */

2022-02-17T05:11:34Z

‎wmsController.html

@@ 22行目: / 22行目: @@
 </pre>
-==[https://svgmap.org/devinfo/devkddi/tutorials/wms2/wmsController.html wmsController.html]==
+==[https://svgmap.org/devinfo/devkddi/tutorials/wms2/wmsController.html wmsController.html], [https://svgmap.org/devinfo/devkddi/tutorials/wms2/wmsController.js wmsController.js]==
 *<code>onload</code> webApp読み込み直後に呼ばれる関数
 **<code>svgMap.refreshScreen()</code> webAppが読み込まれた直後に地図の[[[解説書#refreshScreen|再描画を明示]]し、<code>preRenderFunction</code>が実行されるようにします。
@@ 37行目: / 37行目: @@
 **<code>svgImage.documentElement.appendChild(newImage)</code>生成したImage要素をSVGコンテンツに設置
 <pre>
 onload=function(){
 	svgMap.refreshScreen();
@@ 108行目: / 103行目: @@
+	}
+}
 </pre>

@@ 3行目: / 3行目: @@
 * 実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/wms2/wms2.html こちら]をクリック。
-* [https://svgmap.org/devinfo/devkddi/tutorials/wms2/ ソースコードのディレクトリ]
+* 使用ファイルの[https://www.svgmap.org/devinfo/devkddi/tutorials/wms2.zip ZIPアーカイブファイル]
 ==[https://svgmap.org/devinfo/devkddi/tutorials/wms2/wms2.html wms2.html]==

@@ 11行目: / 11行目: @@
 ==[https://svgmap.org/devinfo/devkddi/tutorials/wms2/wms_dynamic.svg wms_dynamic.svg]==
 *<code>data-controller="wmsController.html"</code> このレイヤーにWebApp("wmsController.html)を紐付けています
-**WebAppではWMSのコンテンツを表示するためのDOM操作を行っています。
+**WebAppではWMSのコンテンツを表示するためのDOM操作を伸縮スクロールのたびに行っています。
 *image要素はダミーです（xlink:href属性がないので表示されない）
 <pre>

@@ 107行目: / 107行目: @@
+	}
+}
 </script>
 <body>

@@ 25行目: / 25行目: @@
 **<code>svgMap.refreshScreen()</code> webAppが読み込まれた直後に地図の[[[解説書#refreshScreen|再描画を明示]]し、<code>preRenderFunction</code>が実行されるようにします。
-*<code>preRenderFunction</code> [[解説書#preRenderFunction|再描画に際して実行されるコールバック関数]]です。伸縮スクロール時も再描画されるため呼び出される関数。
+*<code>preRenderFunction</code> [[解説書#preRenderFunction|再描画に際して実行されるコールバック関数]]です。伸縮スクロール時も再描画されるため呼び出されます。
 **<code>prevImageElement.remove()</code> １ステップ前（伸縮スクロールが起きる直前）のWMSからの画像を消去
 **<code>svgMap.getGeoViewBox()</code> [[解説書#getGeoViewBox|表示領域を地理座標で取得]]

@@ 31行目: / 31行目: @@
 **<code>getWMSreq(GEBCOurl, GEBCOlayer, geoViewBox, screenSize)</code>
 ***表示領域、スクリーンサイズなどのパラメータをもとにGEBCO WMSへのリクエストURLを生成する関数
-***パラメータの設定内容については、[[チュートリアル12#WMS.E3.81.AE.E3.82.AF.E3.82.A8.E3.83.AA.E3.83.91.E3.83.A9.E3.83.A1.E3.83.BC.E3.82.BF|チュートリアル12のWMSに関する説明]]を参照
+***クエリパラメータの設定内容については、[[チュートリアル12#WMS.E3.81.AE.E3.82.AF.E3.82.A8.E3.83.AA.E3.83.91.E3.83.A9.E3.83.A1.E3.83.BC.E3.82.BF|チュートリアル12のWMSに関する説明]]を参照
 **<code>getSvgImage(req, geoViewBox)</code>上で生成したWMSへのリクエストURIと、その地図データの領域情報をもとに、image要素を生成する関数
-***パラメータの設定内容については、[[チュートリアル12#image.E8.A6.81.E7.B4.A0.E3.81.AE.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3|チュートリアル12のimage要素の説明]]を参照
+***プロパティの設定内容については、[[チュートリアル12#image.E8.A6.81.E7.B4.A0.E3.81.AE.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3|チュートリアル12のimage要素の説明]]を参照
 **<code>svgImage.documentElement.appendChild(newImage)</code>生成したImage要素をSVGコンテンツに設置

← 古い版		2022年2月17日 (木) 05:11時点における版
22行目:		22行目:

	==[https://svgmap.org/devinfo/devkddi/tutorials/wms2/wmsController.html wmsController.html]==		==[https://svgmap.org/devinfo/devkddi/tutorials/wms2/wmsController.html wmsController.html]==
		+
		+	<pre>
		+
		+	<!doctype html>
		+	<html>
		+	<head>
		+	<title>basic dynamic wms layer controller</title>
		+	<meta charset="utf-8"></meta>
		+	</head>
		+	<script>
		+	onload=function(){
		+	svgMap.refreshScreen();
		+	}
		+
		+	var GEBCOurl="https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/mapserv";
		+	var GEBCOlayer="GEBCO_LATEST";
		+
		+	var crsAD=1;
		+
		+	function preRenderFunction(){
		+	var prevImageElement = svgImage.getElementById("wmsImage");
		+	prevImageElement.remove();
		+
		+	var geoViewBox = svgMap.getGeoViewBox();
		+	var screenSize = getScreenSize();
		+	console.log("screenSize:",screenSize);
		+	var req = getWMSreq(GEBCOurl, GEBCOlayer, geoViewBox, screenSize);
		+
		+	var newImage = getSvgImage(req, geoViewBox);
		+	svgImage.documentElement.appendChild(newImage);
		+	}
		+
		+	function getSvgImage( imageUrl, geoViewBox){
		+	var imageElement = svgImage.createElement("image");
		+	imageElement.setAttribute("opacity", 0.5);
		+	imageElement.setAttribute("preserveAspectRatio", "none");
		+	imageElement.setAttribute("id", "wmsImage");
		+	imageElement.setAttribute("xlink:href", imageUrl);
		+	imageElement.setAttribute("x", geoViewBox.x * crsAD);
		+	imageElement.setAttribute("y", -(geoViewBox.y+geoViewBox.height) * crsAD); // 軸反転のため北端を設定
		+	imageElement.setAttribute("width", geoViewBox.width * crsAD);
		+	imageElement.setAttribute("height", geoViewBox.height * crsAD);
		+	return(imageElement);
		+	}
		+
		+	function getWMSreq(baseUrl, layerName, geoArea, screenSize){
		+	var wmsArea_x0=geoArea.x;
		+	var wmsArea_y0=geoArea.y;
		+	var wmsArea_x1=geoArea.x+geoArea.width;
		+	var wmsArea_y1=geoArea.y+geoArea.height;
		+
		+	var ans = `${baseUrl}?
		+	request=GetMap&
		+	service=WMS&
		+	version=1.1.1&
		+	layers=${layerName}&
		+	srs=EPSG:4326&
		+	bbox=${wmsArea_x0},${wmsArea_y0},${wmsArea_x1},${wmsArea_y1}&
		+	width=${screenSize.width}&
		+	height=${screenSize.height}&
		+	format=image%2Fpng`;
		+
		+	ans = ans.replace(/\s/g,""); // 空白文字(改行含)を除去
		+	return ( ans );
		+	}
		+
		+	function getScreenSize(){
		+	var gvb = svgMap.getGeoViewBox();
		+	var scale = svgImageProps.scale;
		+	return {
		+	width : Math.round(gvb.width * scale),
		+	height: Math.round(gvb.height * scale),
		+	}
		+	}
		+
		+	</script>
		+	<body>
		+	<h3>Basic dynamic WMS layer controller</h3>
		+	<p>Get the map bit image from <a href="https://www.gebco.net/data_and_products/gebco_web_services/web_map_service/" target="_blank">GEBCO WMS</a> according to the display area. No <a href="https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E3%83%9E%E3%83%83%E3%83%97%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9" target="_blank">tiling</a> is performed.</p>
		+	</body>
		+	</html>
		+	</pre>