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

Admin: /* tutorial4.html */

2024-09-12T09:48:17Z

‎tutorial4.html

2023-06-23T14:15:50Z

‎チュートリアル4 Bitmapイメージ地図表示

2023-04-13T02:47:57Z

‎Container.svg

2023-04-13T02:42:39Z

Admin (トーク) による版 1648 を取り消し

2023-04-13T02:40:40Z

‎Coastline.svg

2023-04-13T02:40:07Z

‎dynamicOSM_r11.svg (およびdynamicOSM_r11.html)

2023-04-13T02:39:16Z

‎Container.svg

2023-04-13T02:38:03Z

‎dynamicOSM_r11.svg (およびdynamicOSM_r11.html)

2023-04-13T02:35:56Z

‎dynamicOSM_r11.svg (およびdynamicOSM_r11.html)

2023-04-13T02:35:33Z

‎bitmapImage.svg

@@ 9行目: / 9行目: @@
 基本的に、[[チュートリアル2b]]で使用したtutorial2b.htmlと同様。
-*SVGMapのコアプログラムファイル(SVGMapLv0.1_r17.js, SVGMapLv0.1_LayerUI2_r4.js)を読み込み、SVGMapの各種APIを利用可能にする。
+*SVGMapのコアプログラムファイル(SVGMapLv0.1_r18module.js)を読み込み、SVGMapの各種APIを利用可能にする。
 *レイヤーリストUI用のCSSを読み込み
 *地図表示部分を(DIVで)定義し、そこに表示するレイヤをまとめたSVGファイル(Containers.svg)を読み込む(上記SVGMapのコアプログラムにて自動的にVisibleになっているレイヤが表示される)。
@@ 30行目: / 30行目: @@
 <!-- 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のスタイルシート読み込み -->

@@ 1行目: / 1行目: @@
 = チュートリアル4 Bitmapイメージ地図表示 =
 * 実際の動作は[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial4/tutorial4.html こちら]をクリック。
-* 使用ファイルは[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial4/ こちら]
+* 使用ファイルの[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial4.zip ZIPアーカイブファイル]
 出典：[https://www.bousai.go.jp/kyoiku/bousai-vol/drill/h26/tokyo/tokyo03_kato.pdf#page=4 首都直下地震の被害想定 7ページ]

@@ 64行目: / 64行目: @@
 == Container.svg ==
-チュートリアル1と同様のCoastline.svgと重ね合わせて表示するビットマップイメージのbitmapImage.svgを読み込む。
+* [[チュートリアル2c]]と同様に、ビットマップイメージのbitmapImage.svg、dynamicOSM_r11.svgをレイヤーとして読み込んでいます。
 <PRE>
@@ 71行目: / 72行目: @@
   <globalCoordinateSystem srsName="http://purl.org/crs/84" transform="matrix(1,0,0,-1,0,0)" />
-<!-- 日本の海岸線データのSVGファイルを表示状態として読み込む -->
+<!-- 背景地図１ 日本の海岸線データ(非表示状態) -->
-<animation xlink:href="Coastline.svg" x="-3000" y="-3000" width="6000" height="6000" title="Japan Coastline" visibility="visible"/>
+<animation xlink:href="Coastline.svg" x="-3000" y="-3000" width="6000" height="6000" title="Japan Coastline" class="basemap switch" visibility="hidden"/>
 <!-- ビットマップイメージのSVGファイルを表示状態として読み込む -->
-<animation xlink:href="bitmapImage.svg" x="-3000" y="-3000" width="6000" height="6000" title="Bitmap Image SVG" visibility="visible"/>
+<animation xlink:href="bitmapImage.svg" x="-3000" y="-3000" width="6000" height="6000" title="Bitmap Image SVG" visibility="visible" opacity="0.6"/>
 </svg>

@@ 63行目: / 63行目: @@
 </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="122.9800817, -45.398095, 21.97626, 21.0533039" >
   <globalCoordinateSystem srsName="http://purl.org/crs/84" transform="matrix(1,0,0,-1,0,0)" />
-<!-- 背景地図１ 日本の海岸線データ(非表示状態) -->
+<!-- 日本の海岸線データのSVGファイルを表示状態として読み込む -->
-<animation xlink:href="Coastline.svg" x="-3000" y="-3000" width="6000" height="6000" title="Japan Coastline" class="basemap switch" visibility="hidden"/>
+<animation xlink:href="Coastline.svg" x="-3000" y="-3000" width="6000" height="6000" title="Japan Coastline" visibility="visible"/>
 <!-- ビットマップイメージのSVGファイルを表示状態として読み込む -->
-<animation xlink:href="bitmapImage.svg" x="-3000" y="-3000" width="6000" height="6000" title="Bitmap Image SVG" visibility="visible" opacity="0.6"/>
+<animation xlink:href="bitmapImage.svg" x="-3000" y="-3000" width="6000" height="6000" title="Bitmap Image SVG" visibility="visible"/>
 </svg>
 == bitmapImage.svg ==

← 古い版		2023年4月13日 (木) 02:40時点における版
120行目:		120行目:

	==Coastline.svg==		==Coastline.svg==
−	[[チュートリアル1]]から使ってきているものと同じです。	+	[[チュートリアル1#Coastline.svg\|チュートリアル1]]から使ってきているものと同じです。

← 古い版		2023年4月13日 (木) 02:40時点における版
118行目:		118行目:
	== dynamicOSM_r11.svg (およびdynamicOSM_r11.html) ==		== dynamicOSM_r11.svg (およびdynamicOSM_r11.html) ==
	[[チュートリアル2c#dynamicOSM_r11.svg.E3.80.81.28dynamicOSM_r11.html.29\|チュートリアル2cのdynamicOSM_r11.svg]]と同じものです。		[[チュートリアル2c#dynamicOSM_r11.svg.E3.80.81.28dynamicOSM_r11.html.29\|チュートリアル2cのdynamicOSM_r11.svg]]と同じものです。
		+
		+	==Coastline.svg==
		+	[[チュートリアル1]]から使ってきているものと同じです。

← 古い版		2023年4月13日 (木) 02:38時点における版
119行目:		119行目:

	== dynamicOSM_r11.svg (およびdynamicOSM_r11.html) ==		== dynamicOSM_r11.svg (およびdynamicOSM_r11.html) ==
−	[[~~チュートリアル2~~#dynamicOSM_r11.svg\|チュートリアル2cのdynamicOSM_r11.svg]]と同じものです。	+	[[チュートリアル2c#dynamicOSM_r11.svg.E3.80.81.28dynamicOSM_r11.html.29\|チュートリアル2cのdynamicOSM_r11.svg]]と同じものです。

← 古い版		2023年4月13日 (木) 02:35時点における版
119行目:		119行目:

	== dynamicOSM_r11.svg (およびdynamicOSM_r11.html) ==		== dynamicOSM_r11.svg (およびdynamicOSM_r11.html) ==
−	[チュートリアル2#dynamicOSM_r11.svg チュートリアル2cのdynamicOSM_r11.svg]と同じものです。	+	[[チュートリアル2#dynamicOSM_r11.svg\|チュートリアル2cのdynamicOSM_r11.svg]]と同じものです。

← 古い版		2023年4月13日 (木) 02:35時点における版
117行目:		117行目:
	</svg>		</svg>
	</PRE>		</PRE>
		+
		+	== dynamicOSM_r11.svg (およびdynamicOSM_r11.html) ==
		+	[チュートリアル2#dynamicOSM_r11.svg チュートリアル2cのdynamicOSM_r11.svg]と同じものです。