チュートリアル11
提供: svg2wiki
(版間での差分)
(→mesh3b.html) |
(→mesh3b.html) |
||
10行: | 10行: | ||
==[https://svgmap.org/devinfo/devkddi/tutorials/mesh3b/mesh3b.html mesh3b.html]== | ==[https://svgmap.org/devinfo/devkddi/tutorials/mesh3b/mesh3b.html mesh3b.html]== | ||
*地図上で幾つかの図形を作成・編集できるUIを提供するライブラリ、<code>SVGMapLv0.1_Authoring_r7.js</code>を読み込んでいます。 | *地図上で幾つかの図形を作成・編集できるUIを提供するライブラリ、<code>SVGMapLv0.1_Authoring_r7.js</code>を読み込んでいます。 | ||
− | * | + | *他に大きな違いはありません。 |
− | + | ||
<pre> | <pre> | ||
− | |||
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> |
2022年2月16日 (水) 10:10時点における版
目次 |
チュートリアル11 WebApp Layer 地図を使った位置指定UI
チュートリアル10をベースに、地図上で位置を指定して、その場所のジオイド高を計算・表示する対話型アプリを構築します。 特徴的なコードはレイヤーに紐付いたwebAppにあります。
- 実際の動作は、こちらをクリック。
- ソースコードのディレクトリ
mesh3b.html
- 地図上で幾つかの図形を作成・編集できるUIを提供するライブラリ、
SVGMapLv0.1_Authoring_r7.js
を読み込んでいます。 - 他に大きな違いはありません。
<!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> <!-- SVGMap Authoringライブラリの読み込み--> <script type="text/javascript" src="../js/SVGMapLv0.1_Authoring_r7.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
これまでと特に変わったところはありません。
rasterMeshI.svg
チュートリアル10と特に大きな違いはありません。
rasterMeshI.html
チュートリアル10のコードに対して、地図上で位置を指定するUIと、その位置のジオイド高を計算する機能が追加されています。
- 地図上で位置を指定するUI:SVGMapAuthoring.jsというSVGMap.js用の追加ライブラリを用いています。
- ジオイド高計算:バイリニア補間を用いて、グリッドデータを用いて任意の位置の値を演算します。
- バイリニア補間については、地理院がこちらのページで公開するジオイド高データ(TEXTデータ)のパッケージ同梱文書(asc取扱説明書.pdf)にも計算式が記載されていますので参考にしてください。(本チュートリアルの
getGeoidHeight(lng,lat)
関数は同文書の式をベースにしています。)
- バイリニア補間については、地理院がこちらのページで公開するジオイド高データ(TEXTデータ)のパッケージ同梱文書(asc取扱説明書.pdf)にも計算式が記載されていますので参考にしてください。(本チュートリアルの
initPOIUI
地図上で位置を指定するUIの初期化をload時に実行svgMapAuthoringTool.initPOIregistTool
id="pointInputUI"
のdiv要素に、- svgMapAuthoringToolで使える、地図上でポイント情報を設置するUIを登録します。(initPOIregistTool )
POIUIcbFunc
ポイントを設定する操作を実施するすると呼び出されるコールバック関数。緯度、経度の情報をUIから取得し、ジオイド高を計算する関数(getGeoidHeight
)に渡して、答えを表示します。
getGeoidHeight
グリッドデータからジオイド高を計算する関数- バイリニア補間を用いて任意の緯度経度(ただしグリッドデータのある範囲)におけるジオイド高を計算します。
<!doctype html> <html> <head> <title>Geoid Height Calc WebApp</title> <meta charset="utf-8"></meta> </head> <script> ... ... onload = async function(){ initPOIUI(); ... ... } ... ... function getGeoidHeight(lng,lat){ // バイリニア補完によって、任意の緯度経度(実数)でのジオイド高を算出する(世界測地系) var px = Math.floor((lng-dataProps.glomn)/dataProps.dglo); var py = Math.floor((lat-dataProps.glamn)/dataProps.dgla); if ( px < 0 || px > dataProps.nlo -1 || py < 0 || py > dataProps.nla ){ return ( null ); } var lng0 = dataProps.glomn + px * dataProps.dglo; var lat0 = dataProps.glamn + py * dataProps.dgla; var lng1 = lng0 + dataProps.dglo; var lat1 = lat0 + dataProps.dgla; var Z00 = geoidGrid[py][px]; var Z10 = geoidGrid[py][px+1]; var Z01 = geoidGrid[py+1][px]; var Z11 = geoidGrid[py+1][px+1]; if ( Z00 == 999 || Z10 == 999 || Z01 == 999 || Z11 == 999 ){ return ( null ); } var u = (lng - lng0)/(lng1 - lng0); var t = (lat - lat0)/(lat1 - lat0); var Z = (1 - t) * (1 - u) * Z00 + (1 - t) * u * Z10 + t * (1 - u) * Z01 + t * u * Z11; return ( Z ); } ... ... var poiUI; function initPOIUI(){ poiUI=document.getElementById("pointInputUI"); var getPointOnly = false; svgMapAuthoringTool.initPOIregistTool(poiUI,svgImageProps.rootLayer,"targetPoint","p0","targetPoint","",POIUIcbFunc,"cbFuncParam",getPointOnly); } function POIUIcbFunc(){ var latlngs=(poiUI.getElementsByTagName("input")[2].value).split(","); console.log(latlngs); var lat=Number(latlngs[0]); var lng=Number(latlngs[1]); var geiodHeight = getGeoidHeight(lng,lat); messageDiv.innerText=geiodHeight+" m"; } </script> <body> <h3>ジオイド高計算</h3> <p><a href="https://fgd.gsi.go.jp/download/geoid.php" target="_blank">地理院のジオイド・モデル「日本のジオイド2011」(Ver.2.1)の提供</a>のASCII版に同梱されているデータを用いて<a href="https://www.gsi.go.jp/buturisokuchi/grageo_geoid.html" target="_blank">ジオイド高</a>を計算します。 </p> <div id="pointInputUI"></div> <div id="messageDiv"></div> <canvas id="geoidCanvas" style="display:none"></canvas> </body> </html>