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

Admin: /* meshTileViewer.html, meshTileViewer.js */

2024-07-24T10:29:18Z

‎meshTileViewer.html, meshTileViewer.js

2024-07-19T10:20:14Z

‎meshTileViewer.html

2023-06-23T14:27:50Z

‎チュートリアル9 WebApp Layer メッシュタイル

2023-04-11T09:09:13Z

‎Container.svg

2022-02-16T10:13:37Z

‎meshTileViewer.svg

2022-02-15T09:53:59Z

‎チュートリアル9 WebApp Layer メッシュタイル

2022-02-15T09:53:24Z

‎チュートリアル9 WebApp Layer メッシュタイル

2022-02-15T07:34:13Z

‎meshTileViewer.html

2022-02-10T05:56:56Z

‎meshTileViewer.html

2022-02-10T05:56:20Z

‎meshTileViewer.html

@@ 162行目: / 162行目: @@
 <title>Tiled UTM Grid Data visualizer</title>
 </head>
+<script src="https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/svgMapLayerLib.js"></script>
 <script src="meshTileViewer.js"></script>
 <body>

@@ 125行目: / 125行目: @@
 </pre>
-=meshTileViewer.html=
+=meshTileViewer.html, meshTileViewer.js=
 タイルピラミッドとして分割・階層化されたメッシュデータを縮尺と表示領域に応じて読み込み、上記SVGコンテンツのDOMを操作して一個一個のメッシュをsvgのrect要素として可視化します。
@@ 163行目: / 163行目: @@
 </head>
-<script>
+<script src="meshTileViewer.js"></script>
 var meshCsvHd = "meshTiles/";
@@ 537行目: / 545行目: @@
+}
 </pre>

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

@@ 104行目: / 104行目: @@
 <!-- OpenStretMap背景地図を表示状態として読み込む -->
-<animation xlink:href="../tutorial5/dynamicOSM_r11.svg" x="-3000" y="-3000" width="6000" height="6000" title="Japan Coastline" class="basemap" visibility="visible"/>
+<animation xlink:href="./dynamicOSM_r11.svg" x="-3000" y="-3000" width="6000" height="6000" title="Japan Coastline" class="basemap" visibility="visible"/>
 <!-- 自治体コード3次メッシュデータレイヤーを表示状態として読み込む -->

@@ 119行目: / 119行目: @@
 <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="meshTileViewer.html#exec=hiddenOnLayerLoad">
+<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-controller="meshTileViewer.html#exec=hiddenOnLayerLoad" 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月15日 (火) 09:53時点における版
3行目:		3行目:

	また、[[チュートリアル8]]よりも大きいデータ（メッシュ数が多い、細かい）を扱います。そのためタイリングに加えて簡単なタイルピラミッドを構築し、小縮尺と大縮尺で表示するデータを変化させる機能([https://en.wikipedia.org/wiki/Level_of_detail_(computer_graphics) Level of Detail])も実装します。		また、[[チュートリアル8]]よりも大きいデータ（メッシュ数が多い、細かい）を扱います。そのためタイリングに加えて簡単なタイルピラミッドを構築し、小縮尺と大縮尺で表示するデータを変化させる機能([https://en.wikipedia.org/wiki/Level_of_detail_(computer_graphics) Level of Detail])も実装します。
		+
		+
		+	* 実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/mesh1/mesh1.html こちら]をクリック。
		+	* [https://svgmap.org/devinfo/devkddi/tutorials/mesh1/ ソースコードのディレクトリ]

	=表示するデータ=		=表示するデータ=

@@ 150行目: / 150行目: @@
 **<code>svgMap.refreshScreen()</code> DOM生成が完了したら描画を指示する
 ***タイルが１個読まれる毎に再描画が起きることになります（プログレッシブに表示）
 <pre>

@@ 149行目: / 149行目: @@
 **<code>blendColor()</code> 加色混合関数（一つのメッシュに複数の自治体（の色）が割り付けられることがあるため色混合する）
 **<code>svgMap.refreshScreen()</code> DOM生成が完了したら描画を指示する
-***タイルが１個読まれる毎に非同期で再描画が起きることになります（プログレッシブに表示）
+***タイルが１個読まれる毎に再描画が起きることになります（プログレッシブに表示）
 <pre>

@@ 141行目: / 141行目: @@
 *<code>buildMeshTileSvg()</code>
 **svgの<code>g</code>要素でタイルコンテンツのメッシュデータをグループ化
 **svgの<code>rect</code>要素で各メッシュデータを可視化
 ***<code>data-src</code> 属性に、そのタイルコンテンツのソースファイル名を設定（次ステップでの再利用判別用）
-**<code>getHue</code> 適当なハッシュ関数を使い、自治体コードに適当な色（色相 H値）を割り当てる関数
+**<code>getHue()</code> 適当なハッシュ関数を使い、自治体コードに適当な色（色相 H値）を割り当てる関数
-**<code>HSVtoRGB</code> HSV値(S,Vは最大値固定)からRGB値を算出する関数
+**<code>HSVtoRGB()</code> HSV値(S,Vは最大値固定)からRGB値を算出する関数
-**<code>blendColor</code> 加色混合関数（一つのメッシュに複数の自治体（の色）が割り付けられることがあるため色混合する）
+**<code>blendColor()</code> 加色混合関数（一つのメッシュに複数の自治体（の色）が割り付けられることがあるため色混合する）
 <pre>