2023年6月23日 (金) 14:10時点における最新版

背景地図にOpenStreetMapを使用して、より実用的な地図ページを構築してみます。

[編集] チュートリアル2c OpenStreetMapとPOI(空港)表示 （レイヤリング)

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

背景地図としてOpenStreetMap.svgを使用している点以外はチュートリアル2bと違いはありません。

[編集] コンテンツの構造

tutorial2b.html
 |
 +-img/zoomup.png, img/zoomdown.png, img/gps.png, img/Xcursor.png (地図操作UIのイメージ類)
 |
 +-js/SVGMapLv0.1_r17.js, js/SVGMapLv0.1_LayerUI2_r4.js (SVGMapを表示するjavascriptライブラリ)
   |
   +-Container.svg (様々なデータ(レイヤー)を束ねる役割を持つ一個のSVGファイル)
     |
     +-dynamicOSM_r11.svg (OpenStreetMaapレイヤー）
     |  |
     |  + dynamicOSM_r11.html (OpenStreetMapレイヤーを動的に生成しているWebApp)
     |
     +-Airport.svg (実際に表示される地図レイヤーコンテンツ(空港ポイント)）

[編集] tutorial2c.html

チュートリアル2bと同じ内容です。

[編集] layerListStyle.css

チュートリアル2bと同じ内容です。

[編集] Container.svg

• 表示する２つのレイヤ用のSVGファイルをレイヤーとして読み込む
  • Coastline.svg
  • Airport.svg
• レイヤーの順番は、下の行ほど上のレイヤーになる。SVGのPainters Model
• class指定でレイヤーリストUIのグルーピングが可能
• animation要素によってレイヤーを参照
• visibility属性によって初期表示状態を設定する（もしレイヤーリストUIがないと初期表示状態から変更不可能です）
• x,y,width,height値は取りうる最大領域を設定

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

<!-- 背景地図 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="Airport.svg" x="-3000" y="-3000" width="6000" height="6000" title="Japan Air Port" class="poi" visibility="visible"/>
</svg>

[編集] dynamicOSM_r11.svg、(dynamicOSM_r11.html)

• Coastline.svgに代えてデフォルトで表示されるOpenStreetMapの背景地図レイヤーです
• このコンテンツは、単なるSVGコンテンツではなく、javascriptで動的にコンテンツが生成されるWebAppLayerとなっています。
  • dynamicOSM_r11.htmlは、そのjavascriptが入っているWebAppコンテンツで、 dynamicOSM_r11.svgからリンクされています。
  • WebAppLayerについてはチュートリアル:WebAppLayer編で詳しく説明します。ここではCoastline.svgからこれに代えるだけで、拡大すると詳細な地図が表示される、実用的な背景地図のレイヤーを簡単に利用することができたと考えていただくだけで大丈夫です。

[編集] Airport.svg

チュートリアル2bと同じ内容です。

[編集] 追加：背景地図を選べるようにする

前章ではCoastline.svgの代わりにdynamicOSM_r11.svgを置き換えましたが、レイヤー機能を用いればユーザ側でUIから複数ある背景地図を選ぶことができます。

また、同じ方法で、上乗せ情報を複数設置し、切り替えて利用できるようにすることもできます。

• 実際の動作はこちらをクリック。
  • 画面左上のレイヤーリストUIをクリックすると、2個の背景地図が選べるようになっています。
• 使用ファイルはこちら

異なるのはContainer.svgの内容になります。

[編集] tutorial2c_add.html

リンク先のコンテナsvgが、Container_add.svgになっていることを除き、前章のhtmlと同じです。

[編集] Container_add.svg

animation要素がポイントです。（他に差異はありません）

• 背景地図用のコンテンツのためのanimation要素を複数設定する
• title属性を背景地図ごとに異なる名前にする
• class属性
  • 背景地図に共通のクラス名を設定しておく
    • クラス名で指定した名前がレイヤーリストUIに現れるグループの名前になります。
  • さらに、UIでどちらかの背景地図だけが選ばれるようにクラス名にswitchも追加する。(同時に両方とも表示できるようにしたい場合はswitchを追加しない)
    • class="basemap switch"
• デフォルトで表示状態にしたい背景地図以外はvisibility="hidden"を設定する

[編集] ソースコード

<?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="Airport.svg" x="-3000" y="-3000" width="6000" height="6000" title="Japan Air Port" class="poi" visibility="visible"/>
</svg>

[編集] Coastline.svg

チュートリアル2bと同じ内容です。