チュートリアル7
提供: svg2wiki
目次 |
チュートリアル7 WebApp Layer ベクトルタイル
実際の動作は、こちらをクリック。
tiling1.html
- チュートリアル6のhtmlと特に違いはありません。
- 同様にSVGMap GISライブラリを導入しています。
<!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> <!-- SVGMap GISライブラリの読み込み--> <script type="text/javascript" src="../js/jsts.min.js"></script> <script type="text/javascript" src="../js/SVGMapLv0.1_GIS_r3.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>
Container.svg
<?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)" /> <!-- OpenStretMap背景地図を表示状態として読み込む --> <animation xlink:href="../tutorial5/dynamicOSM_r11.svg" x="-3000" y="-3000" width="6000" height="6000" title="Japan Coastline" class="basemap" visibility="visible"/> <!-- 日本の公共施設データのPoint CSVファイルのタイルデータを表示状態として読み込む --> <animation xlink:href="simpleTiling.svg" x="-3000" y="-3000" width="6000" height="6000" title="Cultural Facility" class="POI clickable" visibility="visible"/> </svg>
simpleTiling.svg
- defs要素でアイコンを定義しています。
- データの実体はここにはありません。webAppで動的に生成されます。
- id="mapTiles"のグループ内に、タイルごとにサブグループが作られ、そこにアイコン(Point)が配置されます。
<?xml version="1.0" encoding="UTF-8"?> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-42.8202042942663, -49.9999999999999, 513.842451531196, 600" xmlns:go="http://purl.org/svgmap/profile" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" property="" data-controller="simpleTiling.html#exec=appearOnLayerLoad"> <defs> <g id="p0"> <circle cx="0" cy="0" r="5" fill="blue"/> </g> </defs> <globalCoordinateSystem srsName="http://purl.org/crs/84" transform="matrix(100,0,0,-100,0,0)" /> <g id="mapTiles"> </g> </svg>
simpleTiling.html
- simpleTiling.svgに紐付けられ、そのDOMをコントロールできるwebApp
- 表示領域に応じてタイル分割されたGeoJsonデータを動的に読み込みます。この点はチュートリアル5と類似しています。
- 縮尺に応じたピラミッド構造は持っていないので、このチュートリアルのほうが単純です。
- その代わり、小縮尺(縮小表示)では読み込むデータが大量になりすぎるので、読み込みを行わず、webAppのウィンド上に拡大を促すメッセージを出します。
addEventListener("zoomPanMap",zpmFunc): 伸縮スクロールが発生したときに、 zpmFunc()を呼び出す。zpmFunc(): 表示領域に応じて読み込むべきタイルを選別して表示するsvgMap.getGeoViewBox(): 地理的な表示領域を取得getTileList(geoViewBox):表示すべきタイルをリストアップするdelete tiles[tileKey]表示領域から外れたタイルのグループを消去drawTiles(): 既に表示済みのものを除き、表示すべきデータを読み込み表示する- タイルを表示するためのグループを作成
