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

背景地図として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

• Coastline.svgに代えてデフォルトで表示されるOpenStreetMapの背景地図レイヤーです
• このコンテンツは、単なるSVGコンテンツではなく、javascriptで動的にコンテンツが生成されるWebAppLayerとなっています。
  • WebAppLayerはチュートリアル5以降で詳しく説明します。ここではCoastline.svgに代えて、拡大すると詳細な地図が表示される、実用的な背景地図のレイヤーに簡単に差し替えることができたと考えていただければ大丈夫です。

Airport.svg

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

追加：背景地図を選べるようにする

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

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

Container_add.svg

<code>
<?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>
</code>

Coastline.svg

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