チュートリアル2b
提供: svg2wiki
レイヤリングを行うと、必要に応じてレイヤーごとに表示非表示をユーザが指示できるようになります。またレイヤーごとにデータをカプセル化して整備できるようになり、開発の効率がよくなります。 本章では背景地図と上乗せ情報(空港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
- 表示する２つのレイヤ用の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ファイルです
