2024年9月12日 (木) 09:48時点における最新版

[編集] チュートリアル4 Bitmapイメージ地図表示

実際の動作はこちらをクリック。
使用ファイルのZIPアーカイブファイル

[編集] tutorial4.html

基本的に、チュートリアル2bで使用したtutorial2b.htmlと同様。

SVGMapのコアプログラムファイル(SVGMapLv0.1_r18module.js)を読み込み、SVGMapの各種APIを利用可能にする。
レイヤーリストUI用のCSSを読み込み
地図表示部分を(DIVで)定義し、そこに表示するレイヤをまとめたSVGファイル(Containers.svg)を読み込む(上記SVGMapのコアプログラムにて自動的にVisibleになっているレイヤが表示される)。
ズームアップ・ズームダウン・GPSの各ボタンの表示とクリック時の動作(SVGMapのコアプログラムのそれぞれのAPIを呼び出す)を定義。
- ズームアップボタン:svgMap.zoomup() APIを呼び出すことで地図をズームアップする。
- ズームダウンボタン:svgMap.zoomdown() APIを呼び出すことで地図をズームダウンする。
- GPSボタン:svgMap.gps() APIを呼び出すことで、現在地(PCやスマートフォンの位置、特定できる場合のみ)を中心にズームアップ表示する。
中心を表す十字マークを表示。
上記十字マークが示している地図上の緯度・経度の表示(実際には、地図の移動時に地図の中心の緯度・経度を表示する)。
レイヤーリストUI用のdiv要素(id="layerList"を設置

<!DOCTYPE html>
<html>
<title>SVGMapLevel0.1-Rev14-Draft Tutorial4 BitmapImageSVG</title>
<!-- viewport 知表示領域を画面全体とする定義 -->
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0" />
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- SVGMapのコアAPIの読み込み -->
<script type="module">
  import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
  window.svgMap=svgMap
</script>

<!-- レイヤーリストUIのスタイルシート読み込み -->
<link href="./js/layerListStyle.css" rel="stylesheet" type="text/css">

<body bgcolor="#ffffff" style="overflow:hidden;" >
<!-- 地図SVGファイルを複数含むコンテナファイル(Container.svg)の読み込み -->
 <div id="mapcanvas" data-src="Container.svg"></div>
 <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="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" />
<!-- 画面右上に表示するタイトル -->
  <font color="blue" style="right: 5px; top: 5px; position: absolute;" >SVGMapLevel0.1 Rev14 Draft : Tutorial4 BitmapImageSVG</font>
<!-- 画面右下に表示する -->
  <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"/>
<!-- 画面左下に表示される十字マークの緯度・経度(タイトル) -->
  <font id="posCmt" size="-2" color="brown" style="left: 5px; bottom: 5px; position: absolute;">Lat,Lng:</font>
<!-- 画面左下に表示される十字マークの緯度・経度(実際の値の初期表示) -->
  <font id="centerPos" size="-2" color="brown" style="left: 50px; bottom: 5px; position: absolute;" >lat , lng</font>
<!-- レイヤーリストUIの表示 -->
  <div id="layerList" style="left :30px; top: 10px; width:300px;height:90%; position: absolute; "></div>
 </div>
</body>
</html>

[編集] Container.svg

チュートリアル2cと同様に、ビットマップイメージのbitmapImage.svg、dynamicOSM_r11.svgをレイヤーとして読み込んでいます。
チュートリアル2c追加の章と同様に背景地図を2つ(OpenStreetMapとCoastline.svg)選べるようにしています。

<?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)" />

<!-- 背景地図１ 日本の海岸線データ(非表示状態) -->
<animation xlink:href="Coastline.svg" x="-3000" y="-3000" width="6000" height="6000" title="Japan Coastline" class="basemap switch" visibility="hidden"/>
<!-- 背景地図２ OpenStreetMap (表示状態)-->
<animation xlink:href="dynamicOSM_r11.svg" x="-3000" y="-3000" width="6000" height="6000" title="OpenStreetMap" class="basemap switch" 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"/>

</svg>

[編集] bitmapImage.svg

重ね合わせるビットマップイメージSVGファイル。
- ビットイメージの地図画像をSVGMapのレイヤー化するツールを使用して作成。こちらのツール
- オリジナルのビットイメージは本章冒頭記載の文書から抽出

[編集] 経度緯度とSVGコンテンツのXY座標との関係

globalCoordinateSystem要素のtransform属性（一次変換マトリクスの６つの値）で指定されます

Xsvg = a * 経度 + c * 緯度 + e
Ysvg = b * 緯度 + d * 緯度 + f

一次変換マトリクスa,b,c,d,e,fの値がそれぞれ1,0,0,-1,0,0であることから、

Xsvg = 経度
Ysvg = -緯度

[編集] image要素のパラメータ

image要素によってビットイメージを配置しています
- xlink:href="[ビットイメージのURL]" 配置するビットイメージのURL
- x="139.1063918412553" 配置するX原点＝西端の経度（139.10..°）
- y="-35.90355823638255" 配置するX原点＝北端の緯度（35.903..°）をマイナスにした値
- width="0.8140711890480361" 幅（経度で0.81°）
- height="0.41815015611484085" 高さ (緯度で0.41°）
- preserveAspectRatio="none" ビットイメージの実際のサイズのアスペクト比を変えてでも上記指定領域にぴったりと配置する　（参考：SVG spec）

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 viewBox="139.1063918412553,-35.90355823638255,0.8140711890480361,0.41815015611484085" about="root">
 <globalCoordinateSystem srsName="http://purl.org/crs/84" transform="matrix(1,0,0,-1,0,0)"/>

 <image xlink:href="http://www.toshiseibi.metro.tokyo.jp/bosai/chousa_6/parts/kikendo_map.jpg"
   x="139.1063918412553"
   y="-35.90355823638255"
   width="0.8140711890480361"
   height="0.41815015611484085"
   preserveAspectRatio="none"
   opacity="0.5" />

</svg>

[編集] dynamicOSM_r11.svg (およびdynamicOSM_r11.html)

チュートリアル2cのdynamicOSM_r11.svgと同じものです。

[編集] Coastline.svg

チュートリアル1から使ってきているものと同じです。

チュートリアル4

2024年9月12日 (木) 09:48時点における最新版

目次

[編集] チュートリアル4 Bitmapイメージ地図表示

[編集] tutorial4.html

[編集] Container.svg

[編集] bitmapImage.svg

[編集] 経度緯度とSVGコンテンツのXY座標との関係

[編集] image要素のパラメータ

[編集] dynamicOSM_r11.svg (およびdynamicOSM_r11.html)

[編集] Coastline.svg

個人用ツール

名前空間

変種

表示

操作

検索

案内

ツール

Translate

@@ 1行: / 1行: @@
 = チュートリアル4 Bitmapイメージ地図表示 =
-実際の動作は[http://svg2.mbsrv.net/devinfo/devkddi/tutorials/tutorial4/tutorial4.html こちら]をクリック。
+* 実際の動作は[https://www.svgmap.org/devinfo/devkddi/tutorials/tutorial4/tutorial4.html こちら]をクリック。
+* 使用ファイルの[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ページ]
 == tutorial4.html ==
-基本的に、チュートリアル2bで使用したtutorial2b.htmlと同様。
+基本的に、[[チュートリアル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になっているレイヤが表示される)。
@@ 26行: / 30行: @@
 <!-- SVGMapのコアAPIの読み込み -->
-<script type="text/javascript" src="../js/SVGMapLv0.1_r14.js"></script>
+<script type="module">
+  import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
+  window.svgMap=svgMap
+</script>
+<!-- レイヤーリストUIのスタイルシート読み込み -->
+<link href="./js/layerListStyle.css" rel="stylesheet" type="text/css">
 <body bgcolor="#ffffff" style="overflow:hidden;" >
@@ 33行: / 43行: @@
   <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 : Tutorial4 BitmapImageSVG</font>
@@ 43行: / 53行: @@
    <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>
 <!-- 画面左下に表示される十字マークの緯度・経度(実際の値の初期表示) -->
    <font id="centerPos" size="-2" color="brown" style="left: 50px; bottom: 5px; position: absolute;" >lat , lng</font>
+<!-- レイヤーリストUIの表示 -->
+  <div id="layerList" style="left :30px; top: 10px; width:300px;height:90%; position: absolute; "></div>
   </div>
 </body>
@@ 54行: / 66行: @@
 == Container.svg ==
-チュートリアル1と同様のCoastline.svgと重ね合わせて表示するビットマップイメージのbitmapImage.svgを読み込む。
+* [[チュートリアル2c]]と同様に、ビットマップイメージのbitmapImage.svg、dynamicOSM_r11.svgをレイヤーとして読み込んでいます。
+* [[チュートリアル2c#.E8.BF.BD.E5.8A.A0.EF.BC.9A.E8.83.8C.E6.99.AF.E5.9C.B0.E5.9B.B3.E3.82.92.E9.81.B8.E3.81.B9.E3.82.8B.E3.82.88.E3.81.86.E3.81.AB.E3.81.99.E3.82.8B|チュートリアル2c追加の章]]と同様に背景地図を2つ(OpenStreetMapとCoastline.svg)選べるようにしています。
 <PRE>
@@ 61行: / 74行: @@
   <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"/>
+<!-- 背景地図２ OpenStreetMap (表示状態)-->
+<animation xlink:href="dynamicOSM_r11.svg" x="-3000" y="-3000" width="6000" height="6000" title="OpenStreetMap" class="basemap switch" visibility="visible"/>
 <!-- ビットマップイメージの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>
 </PRE>
-== Coastline.svg ==
+== bitmapImage.svg ==
-*チュートリアル1と同じ日本の海岸線データ。
+*重ね合わせるビットマップイメージSVGファイル。
+** ビットイメージの地図画像をSVGMapのレイヤー化するツールを使用して作成。 [https://svgmap.org/devinfo/devkddi/lvl0.1/bitimage2geoInfo/mapPage/ こちらのツール]
+** オリジナルのビットイメージは本章冒頭記載の文書から抽出
-*ソースコードは省略
+===経度緯度とSVGコンテンツのXY座標との関係===
+<code>globalCoordinateSystem</code>要素の<code>transform</code>属性（一次変換マトリクスの６つの値）で指定されます
+ Xsvg = a * 経度 + c * 緯度 + e
+ Ysvg = b * 緯度 + d * 緯度 + f
+一次変換マトリクスa,b,c,d,e,fの値がそれぞれ1,0,0,-1,0,0であることから、
+ Xsvg = 経度
+ Ysvg = -緯度
-== bitmapImage.svg ==
+===image要素のパラメータ===
-*重ね合わせるビットマップイメージSVGファイル。以下のWebページ内にあるツールを使用して作成したもの。
+*image要素によってビットイメージを配置しています
-*ビットマップイメージSVGについては、[http://svg2.mbsrv.net/devinfo/devkddi/lvl0.1/bitimage2geoInfo/mashupCollections.html こちら]を参照。
+**<code>xlink:href="[ビットイメージのURL]"</code> 配置するビットイメージのURL
+**<code>x="139.1063918412553"</code> 配置するX原点＝西端の経度（139.10..°）
+**<code>y="-35.90355823638255"</code> 配置するX原点＝北端の緯度（35.903..°）をマイナスにした値
+**<code>width="0.8140711890480361"</code> 幅（経度で0.81°）
+**<code>height="0.41815015611484085"</code> 高さ (緯度で0.41°）
+**<code>preserveAspectRatio="none"</code> ビットイメージの実際のサイズのアスペクト比を変えてでも上記指定領域にぴったりと配置する　（[https://www.w3.org/TR/SVG2/coords.html#PreserveAspectRatioAttribute 参考：SVG spec]）
 <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="139.1063918412553,-35.90355823638255,0.8140711890480361,0.41815015611484085" about="root">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+ viewBox="139.1063918412553,-35.90355823638255,0.8140711890480361,0.41815015611484085" about="root">
   <globalCoordinateSystem srsName="http://purl.org/crs/84" transform="matrix(1,0,0,-1,0,0)"/>
+  <image xlink:href="http://www.toshiseibi.metro.tokyo.jp/bosai/chousa_6/parts/kikendo_map.jpg"
-  <image xlink:href="http://www.toshiseibi.metro.tokyo.jp/bosai/chousa_6/parts/kikendo_map.jpg" x="139.1063918412553" y="-35.90355823638255" width="0.8140711890480361" height="0.41815015611484085" preserveAspectRatio="none" title="image" opacity="0.5" />
+   x="139.1063918412553"
+   y="-35.90355823638255"
+   width="0.8140711890480361"
+   height="0.41815015611484085"
+   preserveAspectRatio="none"
+   opacity="0.5" />
 </svg>
 </PRE>
+== dynamicOSM_r11.svg (およびdynamicOSM_r11.html) ==
+[[チュートリアル2c#dynamicOSM_r11.svg.E3.80.81.28dynamicOSM_r11.html.29|チュートリアル2cのdynamicOSM_r11.svg]]と同じものです。
+==Coastline.svg==
+[[チュートリアル1#Coastline.svg|チュートリアル1]]から使ってきているものと同じです。