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

Admin: /* rasterMesh.html */

2024-07-19T10:24:02Z

‎rasterMesh.html

2023-06-23T14:29:46Z

‎チュートリアル10 WebApp Layer WebApp Layer メッシュデータのビットイメージ化

2023-04-13T01:40:25Z

‎使用するデータ

2022-02-16T10:12:23Z

‎rasterMesh.svg

2022-02-16T08:29:35Z

‎rasterMesh.html

2022-02-15T07:32:58Z

‎rasterMesh.html

2022-02-15T06:23:41Z

‎rasterMesh.html

2022-02-15T06:14:17Z

‎rasterMesh.html

2022-02-15T06:10:27Z

‎rasterMesh.html

2022-02-15T06:09:14Z

‎rasterMesh.html

@@ 42行目: / 42行目: @@
 </pre>
-==[https://svgmap.org/devinfo/devkddi/tutorials/mesh3/rasterMesh.html rasterMesh.html]==
+==[https://svgmap.org/devinfo/devkddi/tutorials/mesh3/rasterMesh.html rasterMesh.html], [https://svgmap.org/devinfo/devkddi/tutorials/mesh3/rasterMesh.js rasterMesh.js]==
 読み込んだテキストのラスターデータを用いてビットイメージを動的に生成、これを紐付けられたrasterMesh.svgに張り付けて可視化します。
@@ 57行目: / 57行目: @@
 <pre>
 // Description:
 // MeshData Visualizer.
@@ 244行目: / 238行目: @@
 	root.appendChild(rct);
+}
 </pre>

← 古い版		2023年6月23日 (金) 14:29時点における版
6行目:		6行目:

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

@@ 23行目: / 23行目: @@
 * Y(緯度)軸の向きが逆のため、元のラスターデータの原点は南端、ビットイメージの原点は上端、
 * ラスターデータの原点は、それをビットイメージとして可視化したときのピクセルの中心位置なのに対し、ビットイメージを配置するときの原点はピクセルの左上隅
-* [[ファイル:Raster.png|350px]] [https://svgmap.org/devinfo/devkddi/tutorials/img/mesh3_raster_exp.svg 説明図svg]
+* [[ファイル:Raster.png|350px]] [https://svgmap.org/devinfo/devkddi/tutorials/mesh3/mesh3_raster_exp.svg 説明図svg]
 ==[https://svgmap.org/devinfo/devkddi/tutorials/mesh3/mesh3.html mesh3.html]==

@@ 36行目: / 36行目: @@
 <pre>
 <?xml version="1.0" encoding="UTF-8"?>
-<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-42.8202042942663, -49.9999999999999, 513.842451531196, 600" xmlns:go="http://purl.org/svgmap/profile"  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" property="Local government codes" data-controller="rasterMesh.html#exec=appearOnLayerLoad">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  data-controller="rasterMesh.html#exec=appearOnLayerLoad" viewBox="-42.8202042942663, -49.9999999999999, 513.842451531196, 600" property="Local government codes">
 <globalCoordinateSystem srsName="http://purl.org/crs/84" transform="matrix(100,0,0,-100,0,0)" />

← 古い版		2022年2月16日 (水) 08:29時点における版
43行目:		43行目:

	==[https://svgmap.org/devinfo/devkddi/tutorials/mesh3/rasterMesh.html rasterMesh.html]==		==[https://svgmap.org/devinfo/devkddi/tutorials/mesh3/rasterMesh.html rasterMesh.html]==
		+
		+	読み込んだテキストのラスターデータを用いてビットイメージを動的に生成、これを紐付けられたrasterMesh.svgに張り付けて可視化します。

	*<code>onload=async function()</code>		*<code>onload=async function()</code>

@@ 52行目: / 52行目: @@
 **<code>buildSvgImage()</code> 生成したビットイメージ(dataURI)およびその領域情報を使って、webAppに紐付いたSVG DOMの中に、ビットイメージを張り付ける
 ***<code>svgImage</code> このwebAppに紐付いたSVGコンテンツのDOM(Documentオブジェクト)があらかじめ定義されている
-**<code>svgMap.refreshScreen()</code> 非同期での読み込みとデータ生成・SVGMapのDOM編集が完了したら再描画を明示し画面に反映する ([[解説書#.E6.8B.A1.E5.BC.B5API|参考]])
+**<code>svgMap.refreshScreen()</code> 非同期での読み込みとデータ生成・SVGMapのDOM編集が完了したら再描画を明示し画面に反映する ([[解説書#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90|参考]])

@@ 49行目: / 49行目: @@
 ***指定されたCanvas要素を作業用に使用し、読み込んだデータからビットイメージを生成、[https://developer.mozilla.org/ja/docs/Web/HTTP/Basics_of_HTTP/Data_URIs dataURI]として出力する
 ***<code>canvas.toDataURL()</code> [https://developer.mozilla.org/ja/docs/Web/API/HTMLCanvasElement/toDataURL canvasオブジェクトのtoDataURL]でPNGビットイメージをDataURLとして生成しています
-**<code>imageGeoArea</code> [[#.E4.BD.BF.E7.94.A8.E3.81.99.E3.82.8B.E3.83.87.E3.83.BC.E3.82.BF|データの注意点]での指摘の通り、ビットイメージをSVG座標に張り付けるための領域情報を計算しています
+**<code>imageGeoArea</code> [[#.E4.BD.BF.E7.94.A8.E3.81.99.E3.82.8B.E3.83.87.E3.83.BC.E3.82.BF|データの注意点]]での指摘の通り、ビットイメージをSVG座標に張り付けるための領域情報を計算しています
 **<code>buildSvgImage()</code> 生成したビットイメージ(dataURI)およびその領域情報を使って、webAppに紐付いたSVG DOMの中に、ビットイメージを張り付ける
 **<code>svgMap.refreshScreen()</code>