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

Admin: /* tutorial3.html */

2024-09-12T09:47:04Z

‎tutorial3.html

Admin: /* チュートリアル3 海岸線地図のタイリングからの表示 */

2023-06-23T14:11:24Z

‎チュートリアル3 海岸線地図のタイリングからの表示

Admin: /* 既存のフレームワークとの本質的違い */

2023-04-13T10:37:34Z

‎既存のフレームワークとの本質的違い

Admin: /* 既存のフレームワークとの本質的違い */

2023-04-13T10:28:35Z

‎既存のフレームワークとの本質的違い

Admin: /* コンテンツの構造 */

2023-04-13T10:17:52Z

‎コンテンツの構造

Admin: /* チュートリアル3 海岸線地図のタイリングからの表示 */

2023-04-11T09:26:33Z

‎チュートリアル3 海岸線地図のタイリングからの表示

Admin: /* チュートリアル3 海岸線地図のタイリングからの表示 */

2023-04-11T09:16:37Z

‎チュートリアル3 海岸線地図のタイリングからの表示

2023年4月11日 (火) 08:18にAdminによる

2023-04-11T08:18:21Z

Admin: /* タイリング */

2023-04-11T01:12:01Z

‎タイリング

Admin: /* タイリング */

2023-04-11T01:10:59Z

‎タイリング

@@ 50行目: / 50行目: @@
 基本的に、チュートリアル1で使用したtutorial1.htmlと同様。
-*SVGMapのコアプログラムファイル(SVGMapLv0.1_r17.js, SVGMapLv0.1_LayerUI2_r4.js)を読み込み、SVGMapの各種APIを利用可能にする。
+*SVGMapのコアプログラムファイル(SVGMapLv0.1_r18module.js)を読み込み、SVGMapの各種APIを利用可能にする。
 *地図表示部分を(DIVで)定義し、そこに表示するレイヤをまとめたSVGファイル(Containers.svg)を読み込む(上記SVGMapのコアプログラムにて自動的にVisibleになっているレイヤが表示される)。
 *ズームアップ・ズームダウン・GPSの各ボタンの表示とクリック時の動作(SVGMapのコアプログラムのそれぞれのAPIを呼び出す)を定義。
@@ 69行目: / 69行目: @@
 <!-- SVGMapのコアAPIの読み込み -->
-<script type="text/javascript" src="./js/SVGMapLv0.1_r14.js"></script>
+<script type="module">
 <body bgcolor="#ffffff" style="overflow:hidden;" >

@@ 1行目: / 1行目: @@
 = チュートリアル3 海岸線地図のタイリングからの表示 =
 * 実際の動作は[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/tutorial3.html こちら]をクリック。
-* 使用ファイルは[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3/ こちら]
+* 使用ファイルの[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial3.zip ZIPアーカイブファイル]
 == 既存のフレームワークとの本質的違い ==

@@ 6行目: / 6行目: @@
 SVGMapのタイリングは他のフレームワーク(openlayersやleaflet,googlemapsなど)と本質的に考え方が異なっています。そのため既存のフレームワークに慣れた開発者は、その仕組みの違いに戸惑うかもしれませんので、ここで説明したいと思います。
-他の地図フレームワークはあらかじめ規定されたタイリング規則([https://ja.wikipedia.org/wiki/%E3%82%BF%E3%82%A4%E3%83%AB%E3%83%9E%E3%83%83%E3%83%97%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9 TMS]など)がを前提とし'''フレームワークにタイリング規則がハードコード'''されています。その規則に基づいて構築されたサーバへのアクセスのためのパラメータだけを指定する仕組みとなっています。
+他の地図フレームワークはあらかじめ決め打ちされたタイリング規則([https://ja.wikipedia.org/wiki/%E3%82%BF%E3%82%A4%E3%83%AB%E3%83%9E%E3%83%83%E3%83%97%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9 TMS]など)を前提とし'''フレームワークにこの規則がハードコード'''されています。その規則に基づいて構築されたサーバへのアクセスのためのパラメータだけを指定する仕組みとなっています。パラメータを設定すればタイリングされたコンテンツを導入できるので簡単ですが柔軟性に課題があります。
-一方、SVGMapのタイリングはよりプリミティブなもので、タイリングに対する規則内蔵されていません。（それは[[チュートリアル5]]で解説するWebApp Layerとして容易且つ任意に実装可能）フレームワークには、タイリングの動作を起こすために必要な より基本的な機能要素が提供されています。この機能を利用して多様なタイリング方式を実現可能です。
+一方、SVGMapのタイリングはよりプリミティブなもので、タイリング規則は内蔵されていません。（ただしそれは[[チュートリアル5]]で解説するWebApp Layerとして容易に実装可能です）。それに対して、タイリングの動作を起こすために必要な より基本的な機能が提供され、これを利用して多様なタイリング方式が実現可能です。
-本章では、この機能を用いた最も基本的な静的タイリングを実践してみマタイと思います。タイル分割ざれたデータの配置情報をインラインで展開したsvgを用意し、ビューアはビューポートとそのコンテナを照合して必要なタイルを取得することで静的なタイリングの動作を実現します。
+本章では、この機能を用いた最も基本的な静的タイリングを実践してみます。タイル分割ざれたデータの配置情報をインラインで展開したsvgを用意し、ビューアはビューポートとそのコンテナを照合して必要なタイルを取得することで静的なタイリング動作が実現されます。
 この仕組みの図解は、[https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-for-web-mapping-in-japanese こちらのより高度な解説資料]の

@@ 6行目: / 6行目: @@
 SVGMapのタイリングは他のフレームワーク(openlayersやleaflet,googlemapsなど)と本質的に考え方が異なっています。そのため既存のフレームワークに慣れた開発者は、その仕組みの違いに戸惑うかもしれませんので、ここで説明したいと思います。
-他のフレームワークではあらかじめ規定されたタイリング規則([https://ja.wikipedia.org/wiki/%E3%82%BF%E3%82%A4%E3%83%AB%E3%83%9E%E3%83%83%E3%83%97%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9 TMS]など)を前提とし、その規則に基づいて構築されたサーバへのアクセスのためのパラメータだけを指定する仕組みとなっています。一方、SVGMapのタイリングはよりプリミティブなもので、タイリングに対する規則を内蔵しておらず（それは[[チュートリアル5]]で解説するWebApp Layerとして実装可能）、タイリングの動作を起こすために必要な より基本的な機能要素が提供されているだけです。そして、タイル分割ざれたデータをタイル状に並べて配置するリンクをインラインで展開したコンテナsvgを用意し、ビューアはビューポートとそのコンテナを照合して必要なタイルを取得することでタイリングの動作を実現します。
+他の地図フレームワークはあらかじめ規定されたタイリング規則([https://ja.wikipedia.org/wiki/%E3%82%BF%E3%82%A4%E3%83%AB%E3%83%9E%E3%83%83%E3%83%97%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9 TMS]など)がを前提とし'''フレームワークにタイリング規則がハードコード'''されています。その規則に基づいて構築されたサーバへのアクセスのためのパラメータだけを指定する仕組みとなっています。
 この仕組みの図解は、[https://www.slideshare.net/totipalmate/quad-tree-composite-tiling-for-web-mapping-in-japanese こちらのより高度な解説資料]の

@@ 23行目: / 23行目: @@
     +-Contaiber.svg (様々なデータ(レイヤー)を束ねるための役割を持つ一個のSVGファイルを読み込む)
+      |
-      +-Coastline.svg (タイル分割された海岸線コンテンツを束ねるコンテンツ）
+      +-Coastline.svg (海岸線レイヤー：タイル分割された海岸線コンテンツを束ねている）
+        |
         +-0_0.svg (タイル分割された実際の海岸線コンテンツ）

@@ 64行目: / 64行目: @@
 <!-- SVGMapのコアAPIの読み込み -->
-<script type="text/javascript" src="../js/SVGMapLv0.1_r14.js"></script>
+<script type="text/javascript" src="./js/SVGMapLv0.1_r14.js"></script>
 <body bgcolor="#ffffff" style="overflow:hidden;" >
@@ 71行目: / 71行目: @@
   <div id="gui">
 <!-- ズームアップボタン -->
-   <img id="zoomupButton" style="left: 5px; top: 5px; position: absolute;" src="../img/zoomup.png" onclick="svgMap.zoomup()" width="20" height="20" />
+   <img id="zoomupButton" style="left: 5px; top: 5px; position: absolute;" src="./img/zoomup.png" onclick="svgMap.zoomup()" width="20" height="20" />
 <!-- ズームダウンボタン -->
-   <img id="zoomdownButton" style="left: 5px; top: 25px; position: absolute;" src="../img/zoomdown.png" onclick="svgMap.zoomdown()" width="20" height="20" />
+   <img id="zoomdownButton" style="left: 5px; top: 25px; position: absolute;" src="./img/zoomdown.png" onclick="svgMap.zoomdown()" width="20" height="20" />
 <!-- GPSボタン -->
-   <img id="gpsButton" style="left: 5px; top: 45px; position: absolute;" src="../img/gps.png" onclick="svgMap.gps()" width="20" height="20" />
+   <img id="gpsButton" style="left: 5px; top: 45px; position: absolute;" src="./img/gps.png" onclick="svgMap.gps()" width="20" height="20" />
 <!-- 画面右上に表示するタイトル -->
    <font color="blue" style="right: 5px; top: 5px; position: absolute;" >SVGMapLevel0.1 Rev14 Draft : Tutorial3 Coastline Tiling</font>
@@ 81行目: / 81行目: @@
    <font color="blue" style="right: 5px; bottom: 5px; position: absolute;" size="-2" >by SVGMap tech.</font>
 <!-- 中央に表示される十字マーク -->
-   <img id="centerSight" style="opacity:0.5" src="../img/Xcursor.png" width="15" height="15"/>
+   <img id="centerSight" style="opacity:0.5" src="./img/Xcursor.png" width="15" height="15"/>
 <!-- 画面左下に表示される十字マークの緯度・経度(タイトル) -->
    <font id="posCmt" size="-2" color="brown" style="left: 5px; bottom: 5px; position: absolute;">Lat,Lng:</font>

@@ 110行目: / 110行目: @@
 SVGMapコンテンツの[[チュートリアル1#animation.E8.A6.81.E7.B4.A0|animation要素]]によるタイリングを実施している例になります。
-タイリングは、実際のデータが保存されている、タイルコンテンツと、それを統合するコンテナコンテンツ(このファイル)から構成されます。
+タイリングは、実際のデータが保存されているタイルコンテンツと、それを統合するコンテナコンテンツ(このファイル)から構成されます。
 *この例では、4×4(16)にタイル分割したそれぞれのSVGMapファイルを統合しているコンテナコンテンツ。
-*animation要素を使用して16個全てのタイルを参照
+*'''animation要素'''を使用して16個全てのタイルを参照
 **xlink:href属性にタイルコンテンツのリンクを記述
 **x,y,width,height属性にタイルの存在領域を記述

@@ 117行目: / 117行目: @@
 **x,y,width,height属性にタイルの存在領域を記述
 ***この存在領域情報をもとに必要に応じてタイルが読み込まれます(画面で表示している領域にタイルの存在領域が入ると自動的に読み込まれる)
-***Note: ∴レイヤリングと異なり、タイリングでのx,y,width,height属性値は重要な意味を持ちます。
+***Note: ∴レイヤリングと異なり、タイリングでのx,y,width,height属性は重要な意味を持ちます。
 ===各タイルの配置===