チュートリアル11

提供: svg2wiki
(版間での差分)
移動: 案内, 検索
(ページの作成:「=チュートリアル11 WebApp Layer 地図を使った位置指定UI= チュートリアル10をベースに、地図上で位置を指定して、その場所の...」)
 
(→‎rasterMeshI.html)
22行: 22行:
  
 
<pre>
 
<pre>
 +
<!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>
 
</pre>
 
</pre>

2022年2月16日 (水) 08:45時点における版

目次

チュートリアル11 WebApp Layer 地図を使った位置指定UI

チュートリアル10をベースに、地図上で位置を指定して、その場所のジオイド高を計算・表示する対話型アプリを構築します。 特徴的なコードはレイヤーに紐付いたwebAppにあります。



mesh3b.html

これまでと特に変わったところはありません。

Container.svg

これまでと特に変わったところはありません。

rasterMeshI.svg

チュートリアル10と特に変わったところはありません。

rasterMeshI.html

チュートリアル10のコードに対して、地図上で位置を指定するUIと、その位置のジオイド高を計算する機能が追加されています。

  • 地図上で位置を指定するUI：SVGMapAuthoring.jsというSVGMap.js用の追加ライブラリを用いています。
  • ジオイド高計算：バイリニア補間を用いて、グリッドデータを用いて任意の位置の値を演算します。 


<!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>
「https://www.svgmap.org/wiki/index.php?title=%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB11&oldid=1071」から取得
個人用ツール
名前空間

変種
操作
案内
ツール
Translate