チュートリアル2c

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

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

<!-- 背景地図１ 日本の海岸線データ(非表示状態) -->
<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>

dynamicOSM_r11.svg

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

Airport.svg

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

Coastline.svg

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