2023年4月11日 (火) 05:00時点における版

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

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

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

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

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

前章のhtmlとリンク先のコンテナsvgを除き同じです。

Container_add.svg

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

• 背景地図用のコンテンツのためのanimation要素を複数設定する
• title属性を背景地図ごとに異なる名前にする
• class属性
  • 背景地図に共通のクラス名を設定しておく
    • クラス名で指定した名前がレイヤーリストUIに現れるグループの名前になります。
  • さらに、UIでどちらかの背景地図だけが選ばれるようにクラス名に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と同じ内容です。