チュートリアル2c

提供: svg2wiki
2023年4月11日 (火) 03:56時点におけるAdmin (トーク | 投稿記録)による版

移動: 案内, 検索

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

目次

tutorial2c.html

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

layerListStyle.css

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

Container.svg

  • 表示する2つのレイヤ用の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)" />

<!-- 背景地図1 日本の海岸線データ(非表示状態) -->
<animation xlink:href="Coastline.svg" x="-3000" y="-3000" width="6000" height="6000" title="Japan Coastline" class="basemap switch" visibility="hidden"/>
<!-- 背景地図2 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と同じ内容です。

個人用ツール
名前空間

変種
操作
案内
ツール
Translate