チュートリアル11
提供: svg2wiki
目次 |
チュートリアル11 WebApp Layer 地図を使った位置指定UI
チュートリアル10をベースに、地図上で位置を指定して、その場所のジオイド高を計算・表示する対話型アプリを構築します。 特徴的なコードはレイヤーに紐付いたwebAppにあります。
- 実際の動作は、こちらをクリック。
- ソースコードのディレクトリ
mesh3b.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.initPOIregistToolid="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>
