チュートリアル2b

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

移動: 案内, 検索

レイヤリングを行うと、必要に応じてレイヤーごとに表示非表示をユーザが指示できるようになります。またレイヤーごとにデータをカプセル化して整備できるようになり、開発の効率がよくなります。 本章では背景地図と上乗せ情報(空港POI)をそれぞれレイヤーとして、レイヤリングを試してみます。


目次

チュートリアル2 海岸線地図とPOI(空港)表示 (レイヤリング)

コンテンツの構造

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ファイルを読み込む)
     |
     +-Coastline.svg (実際に表示される地図レイヤーコンテンツ(海岸線))
     |
     +-Airport.svg (実際に表示される地図レイヤーコンテンツ(空港ポイント))

tutorial2b.html

チュートリアル1で使用したtutorial1.htmlに対して、レイヤーリスト表示・制御用UIを追加。(ただし、なくてもレイヤリング自体は可能。レイヤの表示非表示UIが使えないのみ)

  • レイヤーリストUIを設置
    • id="layerList"の空の div要素を設置する(id名はフレームワークによって規定)
    • このdiv要素用のスタイルシートを読み込む(#layerListStyle.css)

ソースコード

<!DOCTYPE html>
<html>
<title>SVGMapLevel0.1-Rev14-Draft Tutorial2 Coastline & Air Port</title>
<!-- viewport 知表示領域を画面全体とする定義 -->
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0" />
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- SVGMapのコアAPIの読み込み -->
<script type="text/javascript" src="../js/SVGMapLv0.1_r17.js"></script>
<script type="text/javascript" src="../js/SVGMapLv0.1_LayerUI2_r4.js"></script>

<!-- レイヤーリストUIのスタイルシート読み込み -->
<link href="../js/layerListStyle.css" rel="stylesheet" type="text/css">

<body bgcolor="#ffffff" style="overflow:hidden;" >
<!-- 地図SVGファイル(レイヤー)を複数含むコンテナファイル(Container.svg)の読み込み -->
 <div id="mapcanvas" data-src="Container.svg"></div>
 <div id="gui">
<!-- ズームアップボタン -->
  <img id="zoomupButton" style="left: 5px; top: 5px; position: absolute;" src="../img/zoomup.png" onclick="svgMap.zoomup()" width="20" height="20" />
<!-- ズームダウンボタン -->
  <img id="zoomdownButton" style="left: 5px; top: 25px; position: absolute;" src="../img/zoomdown.png" onclick="svgMap.zoomdown()" width="20" height="20" />
<!-- GPSボタン -->
  <img id="gpsButton" style="left: 5px; top: 45px; position: absolute;" src="../img/gps.png" onclick="svgMap.gps()" width="20" height="20" />
<!-- 画面右上に表示するタイトル -->
  <font color="blue" style="right: 5px; top: 5px; position: absolute;" >SVGMapLevel0.1 Rev14 Draft : Tutorial2 Coastline & Air Port</font>
<!-- 画面右下に表示する -->
  <font color="blue" style="right: 5px; bottom: 5px; position: absolute;" size="-2" >by SVGMap tech.</font>
<!-- 中央に表示される十字マーク -->
  <img id="centerSight" style="opacity:0.5" src="../img/Xcursor.png" width="15" height="15"/>
<!-- 画面左下に表示される十字マークの緯度・経度(タイトル) -->
  <font id="posCmt" size="-2" color="brown" style="left: 5px; bottom: 5px; position: absolute;">Lat,Lng:</font>
<!-- 画面左下に表示される十字マークの緯度・経度(実際の値の初期表示) -->
  <font id="centerPos" size="-2" color="brown" style="left: 50px; bottom: 5px; position: absolute;" >lat , lng</font>
<!-- レイヤーリストUIの表示 -->
  <div id="layerList" style="left :30px; top: 10px; width:300px;height:90%; position: absolute; "></div>
 </div>
</body>
</html>

layerListStyle.css

レイヤーリストUI用のdiv要素(id:layerList)のためのスタイルシート

ソースコード

/** レイヤーリストUIのスタイルシート **/
 body {
 	font-family: Meiryo;
 }
 #layerTable{
 	background:#ffE0E0;
 	border: 2px solid #bbb;
 }
 .layerItem{
 	background-color: white;
 }
 .noGroup{
 	background-color: #fff0f0;
 }
 #layerList{
 	background-color: #ffff80;opacity:0.8;font-size:12px;
 }
 
 #layerList button{
 	padding: 1px 3px;
 }

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

<!-- 日本の海岸線データのSVGファイルを表示状態として読み込む -->
<animation xlink:href="Coastline.svg" x="-3000" y="-3000" width="6000" height="6000" title="Japan Coastline" class="basemap" 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

  • Coastline.svgはチュートリアル1と同じです。(同じデータが流用できるので開発効率が高くなる)

Airport.svg

  • チュートリアル2aのCoastline_Airport.svgから、空港ポイント部分のみを抜き出して作成したSVGファイルです
個人用ツール
名前空間

変種
操作
案内
ツール
Translate