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

Admin: /* ソースコード */

2024-09-12T09:46:01Z

‎ソースコード

Admin: /* チュートリアル2b 海岸線地図とPOI(空港)表示（レイヤリング) */

2023-06-23T14:09:48Z

‎チュートリアル2b 海岸線地図とPOI(空港)表示（レイヤリング)

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

2023-04-13T10:13:40Z

‎コンテンツの構造

Admin: /* チュートリアル2b 海岸線地図とPOI(空港)表示（レイヤリング) */

2023-04-11T09:25:18Z

‎チュートリアル2b 海岸線地図とPOI(空港)表示（レイヤリング)

Admin: /* チュートリアル2 海岸線地図とPOI(空港)表示（レイヤリング) */

2023-04-11T08:17:17Z

‎チュートリアル2 海岸線地図とPOI(空港)表示（レイヤリング)

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

2023-04-11T08:16:57Z

Admin: /* tutorial2b.html */

2023-04-11T02:02:45Z

‎tutorial2b.html

Admin: /* tutorial2b.html */

2023-04-11T02:02:17Z

‎tutorial2b.html

Admin: /* Coastline.svg */

2023-04-11T02:01:04Z

‎Coastline.svg

Admin: /* Coastline.svg */

2023-04-11T02:00:47Z

‎Coastline.svg

@@ 38行目: / 38行目: @@
 <!-- SVGMapのコアAPIの読み込み -->
-<script type="text/javascript" src="./js/SVGMapLv0.1_r17.js"></script>
+<script type="module">
-<script type="text/javascript" src="./js/SVGMapLv0.1_LayerUI2_r4.js"></script>
+  import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
 <!-- レイヤーリストUIのスタイルシート読み込み -->

@@ 4行目: / 4行目: @@
 = チュートリアル2b 海岸線地図とPOI(空港)表示 （レイヤリング)=
 * 実際の動作は[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b/tutorial2b.html こちら]をクリック。
-* 使用ファイルは[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b/ こちら]
+* 使用ファイルの[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b.zip ZIPアーカイブファイル]
 ==コンテンツの構造==

@@ 14行目: / 14行目: @@
   +-js/SVGMapLv0.1_r17.js, js/SVGMapLv0.1_LayerUI2_r4.js (SVGMapを表示するjavascriptライブラリ)
+    |
-    +-Container.svg (様々なデータ(レイヤー)を束ねるための役割を持つ一個のSVGファイルを読み込む)
+    +-Container.svg (様々なデータ(レイヤー)を束ねる役割を持つ一個のSVGファイル。2aと異なりレイヤー2個を参照している)
+      |
       +-Coastline.svg (実際に表示される地図レイヤーコンテンツ(海岸線)）

@@ 3行目: / 3行目: @@
 = チュートリアル2b 海岸線地図とPOI(空港)表示 （レイヤリング)=
-* 実際の動作は[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2b/tutorial2b.html こちら]をクリック。
+* 実際の動作は[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b/tutorial2b.html こちら]をクリック。
-* 使用ファイルは[https://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2b/ こちら]
+* 使用ファイルは[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial2b/ こちら]
 ==コンテンツの構造==

@@ 2行目: / 2行目: @@
-= チュートリアル2 海岸線地図とPOI(空港)表示 （レイヤリング)=
+= チュートリアル2b 海岸線地図とPOI(空港)表示 （レイヤリング)=
 * 実際の動作は[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2b/tutorial2b.html こちら]をクリック。
 * 使用ファイルは[https://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial2b/ こちら]

@@ 38行目: / 38行目: @@
 <!-- SVGMapのコアAPIの読み込み -->
-<script type="text/javascript" src="../js/SVGMapLv0.1_r17.js"></script>
+<script type="text/javascript" src="./js/SVGMapLv0.1_r17.js"></script>
-<script type="text/javascript" src="../js/SVGMapLv0.1_LayerUI2_r4.js"></script>
+<script type="text/javascript" src="./js/SVGMapLv0.1_LayerUI2_r4.js"></script>
 <!-- レイヤーリストUIのスタイルシート読み込み -->
-<link href="../js/layerListStyle.css" rel="stylesheet" type="text/css">
+<link href="./js/layerListStyle.css" rel="stylesheet" type="text/css">
 <body bgcolor="#ffffff" style="overflow:hidden;" >
@@ 49行目: / 49行目: @@
   <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 : Tutorial2 Coastline & Air Port</font>
@@ 59行目: / 59行目: @@
    <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>
@@ 137行目: / 137行目: @@
   <defs>
    <g id="syl5" >
-    <image xlink:href="../img/mappin1.png" preserveAspectRatio="none" x="-8" y="-25" width="19" height="27"/>
+    <image xlink:href="./img/mappin1.png" preserveAspectRatio="none" x="-8" y="-25" width="19" height="27"/>
    </g>
    <g id="syl6" >
-    <image xlink:href="../img/mappin2.png" preserveAspectRatio="none" x="-8" y="-25" width="19" height="27"/>
+    <image xlink:href="./img/mappin2.png" preserveAspectRatio="none" x="-8" y="-25" width="19" height="27"/>
    </g>
    <g id="syl7" >
-    <image xlink:href="../img/mappin2.png" preserveAspectRatio="none" x="-8" y="-25" width="19" height="27"/>
+    <image xlink:href="./img/mappin2.png" preserveAspectRatio="none" x="-8" y="-25" width="19" height="27"/>
    </g>
    <g id="syl8" >
-    <image xlink:href="../img/mappin3.png" preserveAspectRatio="none" x="-5.6" y="-17.5" width="13.3" height="18.9"/>
+    <image xlink:href="./img/mappin3.png" preserveAspectRatio="none" x="-5.6" y="-17.5" width="13.3" height="18.9"/>
    </g>
    <g id="syl9" >
-    <image xlink:href="../img/mappin4.png" preserveAspectRatio="none" x="-8" y="-25" width="19" height="27"/>
+    <image xlink:href="./img/mappin4.png" preserveAspectRatio="none" x="-8" y="-25" width="19" height="27"/>
    </g>
    <g id="syl10" >
-    <image xlink:href="../img/mappin4.png" preserveAspectRatio="none" x="-8" y="-25" width="19" height="27"/>
+    <image xlink:href="./img/mappin4.png" preserveAspectRatio="none" x="-8" y="-25" width="19" height="27"/>
    </g>
    <g id="syl11" >
-    <image xlink:href="../img/mappin4.png" preserveAspectRatio="none" x="-8" y="-25" width="19" height="27"/>
+    <image xlink:href="./img/mappin4.png" preserveAspectRatio="none" x="-8" y="-25" width="19" height="27"/>
    </g>
    <g id="syl12" >
-    <image xlink:href="../img/mappin5.png" preserveAspectRatio="none" x="-8" y="-25" width="19" height="27"/>
+    <image xlink:href="./img/mappin5.png" preserveAspectRatio="none" x="-8" y="-25" width="19" height="27"/>
    </g>
    <g id="syl13" >
-    <image xlink:href="../img/mappin3.png" preserveAspectRatio="none" x="-4" y="-12.5" width="9.5" height="13.5"/>
+    <image xlink:href="./img/mappin3.png" preserveAspectRatio="none" x="-4" y="-12.5" width="9.5" height="13.5"/>
    </g>
   </defs>

@@ 25行目: / 25行目: @@
 *レイヤーリストUIを設置
 **id="'''layerList'''"の空の div要素を設置する（id名はフレームワークによって規定）
-**このdiv要素用のスタイルシートを読み込む([[#layerListStyle.css]])
+**このlayerList div要素用のスタイルシートを読み込む([[#layerListStyle.css]])
 === ソースコード ===

@@ 124行目: / 124行目: @@
 == Coastline.svg ==
-* Coastline.svgは[[チュートリアル1]]と同じです。（同じデータが流用できるので開発効率が高くなる）
+* Coastline.svgは[[チュートリアル1#Coastline.svg]]と同じです。（同じデータが流用できるので開発効率が高くなる）
 == Airport.svg ==

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

Admin: /* ソースコード */

Admin: /* チュートリアル2b 海岸線地図とPOI(空港)表示 （レイヤリング) */

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

Admin: /* チュートリアル2b 海岸線地図とPOI(空港)表示 （レイヤリング) */

Admin: /* チュートリアル2 海岸線地図とPOI(空港)表示 （レイヤリング) */

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

Admin: /* tutorial2b.html */

Admin: /* tutorial2b.html */

Admin: /* Coastline.svg */

Admin: /* Coastline.svg */

Admin: /* チュートリアル2b 海岸線地図とPOI(空港)表示（レイヤリング) */

Admin: /* チュートリアル2b 海岸線地図とPOI(空港)表示（レイヤリング) */

Admin: /* チュートリアル2 海岸線地図とPOI(空港)表示（レイヤリング) */