チュートリアル6

提供: svg2wiki
(版間での差分)
移動: 案内, 検索
細 (→‎geoJsonExample1.svg)
(→‎geoJsonExample1.svg)
49行: 49行:
 
</svg>
 
</svg>
  
 +
</pre>
 +
 +
 +
==geoJsonExample1.html==
 +
*geoJsonExample1.svgに紐付けられ、そのDOMをコントロールできるwebApp
 +
*このアプリでは簡単なUIを持ち、いくつかのgeoJsonデータを選択できるようになっています。
 +
*svgMapGIStoolのdrawGeoJson関数を使用し、geoJsonをSVGMapコンテンツ(のDOM)への変換をしています。
 +
**なお、自力でgeoJsonをSVGMapコンテンツのDOMに変換することももちろん可能です。
 +
 +
<pre>
 +
<!doctype html>
 +
<html>
 +
<head>
 +
<meta charset="utf-8"/>
 +
<title>SVGMapのwebAppレイヤーで、geoJsonを描画するサンプル</title>
 +
</head>
 +
 +
<style>
 +
/* 奇数行のスタイル */
 +
table tr:nth-child(odd){
 +
  background-color:#c0c0ff;
 +
}
 +
 +
/* 偶数行のスタイル */
 +
table tr:nth-child(even){
 +
  background-color:#e0e0e0;
 +
}
 +
</style>
 +
 +
<script>
 +
var dataPaths = {
 +
"A34b-180316.geojson":"世界遺産構成資産範囲ポリゴン（代表点）",
 +
"A34a-180316.geojson":"世界遺産構成資産範囲ポリゴンデータ",
 +
"A34d-180316.geojson":"世界遺産構成資産範囲ライン（代表点）",
 +
"A34c-180316.geojson":"世界遺産構成資産範囲ラインデータ",
 +
"A34e-180316.geojson":"世界遺産構成資産",
 +
"A34f-180316.geojson":"世界遺産緩衝地帯ポリゴンデータ",
 +
"A34g-180316.geojson":"世界遺産緩衝地帯ポリゴン（代表点）",
 +
"C28-20_Airport.geojson":"空港データ空港",
 +
"C28-20_AirportReferencePoint.geojson":"空港データ標点",
 +
"C28-20_SurveyContent.geojson":"空港データ調査内容",
 +
"C28-20_TerminalBuilding.geojson":"空港データターミナルビル",
 +
"N02-20_RailroadSection.geojson":"鉄道データ鉄道",
 +
"N02-20_Station.geojson":"鉄道データ駅"
 +
};
 +
 +
addEventListener("load", function(){
 +
buildDataSelect();
 +
changeData();
 +
});
 +
 +
function changeData(){
 +
var path = dataSelect.options[dataSelect.selectedIndex].value;
 +
loadAndDrawGeoJson(path);
 +
}
 +
 +
async function loadAndDrawGeoJson(dataPath){
 +
var gjs = await loadJSON(dataPath);
 +
var parentElm = svgImage.getElementById("mapContents");
 +
removeChildren(parentElm);
 +
svgMapGIStool.drawGeoJson(gjs, layerID, "orange", 2, "orange", "p0", "poi", "", parentElm);
 +
svgMap.refreshScreen();
 +
}
 +
 +
function buildDataSelect(){
 +
var first=true;
 +
for ( var dataPath in dataPaths){
 +
dataSelect.insertAdjacentHTML('beforeend', '<option value="' + dataPath +'" >'+dataPaths[dataPath]+'</option>');
 +
}
 +
}
 +
 +
async function loadJSON(url){
 +
var dt = getDateStr(new Date(),10);
 +
var response = await fetch(url+"?time="+dt); // 常に最新のデータを得るには何かダミーのクエリパートを付けるBad Tips..
 +
// https://stackoverflow.com/questions/37204296/cache-invalidation-using-the-query-string-bad-practice
 +
// https://stackoverflow.com/questions/9692665/cache-busting-via-params
 +
var json = await response.json();
 +
return ( json );
 +
}
 +
 +
function getDateStr(dateData , tStep){
 +
var mind = tStep * Math.floor( dateData.getUTCMinutes() / tStep ) ;
 +
var ans = dateData.getUTCFullYear()+ pad(dateData.getUTCMonth() + 1) + pad(dateData.getUTCDate()) + pad(dateData.getUTCHours()) + pad(mind);
 +
return ( ans );
 +
}
 +
function pad( inp ){
 +
return ( ("0"+inp).slice(-2));
 +
}
 +
 +
function removeChildren(element){
 +
while (element.firstChild) element.removeChild(element.firstChild);
 +
}
 +
 +
</script>
 +
<body>
 +
<h3>area layer</h3>
 +
<p>geoJsonの可視化</p>
 +
<select id="dataSelect" onchange="changeData()"></select>
 +
</body>
 +
</html>
 
</pre>
 
</pre>

2022年2月4日 (金) 04:48時点における版

目次

チュートリアル6 WebApp Layer geoJSON

実際の動作は、こちらをクリック。

geojson1.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"/>

<!-- 各種GeoJsonデータ(Point Feature)を表示状態として読み込む -->
<animation xlink:href="geoJsonExample1.svg" x="-3000" y="-3000" width="6000" height="6000" title="GeoJson Layer" class="poi clickable" visibility="visible" opacity="0.7"/>
</svg>

geoJsonExample1.svg

  • ドキュメントルート要素(svg要素)の、data-controller属性で、このレイヤーを操作するwebAppを指定しています。
    • data-controller="geoJsonExample1.html#exec=appearOnLayerLoad
    • exec=appearOnLayerLoadは、レイヤが表示状態になるとwebAppのウィンドが出現する設定です。（詳しくはこちら） 
<?xml version="1.0" encoding="UTF-8"?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xmlns:go="http://purl.org/svgmap/profile"
  viewBox="12375.0 -4500.0 2250.0 2250.0"
  go:dataArea="12375.0 -4500.0 2250.0 2250.0"
  data-controller="geoJsonExample1.html#exec=appearOnLayerLoad"
  property="name,address,phone,url"
>

<defs>
<g id="p0">
<circle cx="0" cy="0" r="10" fill="blue" stroke="none"/>
</g>
</defs>

<globalCoordinateSystem srsName="http://purl.org/crs/84" transform="matrix(100.0,0.0,0.0,-100.0,0.0,0.0)" />
<g id="mapContents"></g>
</svg>


geoJsonExample1.html

  • geoJsonExample1.svgに紐付けられ、そのDOMをコントロールできるwebApp
  • このアプリでは簡単なUIを持ち、いくつかのgeoJsonデータを選択できるようになっています。
  • svgMapGIStoolのdrawGeoJson関数を使用し、geoJsonをSVGMapコンテンツ(のDOM)への変換をしています。
    • なお、自力でgeoJsonをSVGMapコンテンツのDOMに変換することももちろん可能です。 
<!doctype html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>SVGMapのwebAppレイヤーで、geoJsonを描画するサンプル</title>
</head>

<style>
/* 奇数行のスタイル */
table tr:nth-child(odd){
  background-color:#c0c0ff;
}
 
/* 偶数行のスタイル */
table tr:nth-child(even){
  background-color:#e0e0e0;
}
</style>

<script>
var dataPaths = {
	"A34b-180316.geojson":"世界遺産構成資産範囲ポリゴン（代表点）",
	"A34a-180316.geojson":"世界遺産構成資産範囲ポリゴンデータ",
	"A34d-180316.geojson":"世界遺産構成資産範囲ライン（代表点）",
	"A34c-180316.geojson":"世界遺産構成資産範囲ラインデータ",
	"A34e-180316.geojson":"世界遺産構成資産",
	"A34f-180316.geojson":"世界遺産緩衝地帯ポリゴンデータ",
	"A34g-180316.geojson":"世界遺産緩衝地帯ポリゴン（代表点）",
	"C28-20_Airport.geojson":"空港データ空港",
	"C28-20_AirportReferencePoint.geojson":"空港データ標点",
	"C28-20_SurveyContent.geojson":"空港データ調査内容",
	"C28-20_TerminalBuilding.geojson":"空港データターミナルビル",
	"N02-20_RailroadSection.geojson":"鉄道データ鉄道",
	"N02-20_Station.geojson":"鉄道データ駅"
};

addEventListener("load", function(){
	buildDataSelect();
	changeData();
});

function changeData(){
	var path = dataSelect.options[dataSelect.selectedIndex].value;
	loadAndDrawGeoJson(path);
}

async function loadAndDrawGeoJson(dataPath){
	var gjs = await loadJSON(dataPath);
	var parentElm = svgImage.getElementById("mapContents");
	removeChildren(parentElm);
	svgMapGIStool.drawGeoJson(gjs, layerID, "orange", 2, "orange", "p0", "poi", "", parentElm);
	svgMap.refreshScreen();
}

function buildDataSelect(){
	var first=true;
	for ( var dataPath in dataPaths){
		dataSelect.insertAdjacentHTML('beforeend', '<option value="' + dataPath +'" >'+dataPaths[dataPath]+'</option>');
	}
}

async function loadJSON(url){
	var dt = getDateStr(new Date(),10);
	var response = await fetch(url+"?time="+dt); // 常に最新のデータを得るには何かダミーのクエリパートを付けるBad Tips..
	// https://stackoverflow.com/questions/37204296/cache-invalidation-using-the-query-string-bad-practice
	// https://stackoverflow.com/questions/9692665/cache-busting-via-params
	var json = await response.json();
	return ( json );
}

function getDateStr(dateData , tStep){
	var mind = tStep * Math.floor( dateData.getUTCMinutes() / tStep ) ;
	var ans = dateData.getUTCFullYear()+ pad(dateData.getUTCMonth() + 1) + pad(dateData.getUTCDate()) + pad(dateData.getUTCHours()) + pad(mind);
	return ( ans );
}
function pad( inp ){
	return ( ("0"+inp).slice(-2));
}

function removeChildren(element){
	while (element.firstChild) element.removeChild(element.firstChild);
}

</script>
<body>
<h3>area layer</h3>
<p>geoJsonの可視化</p>
<select id="dataSelect" onchange="changeData()"></select>
</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%AB6&oldid=772」から取得
個人用ツール
名前空間

変種
操作
案内
ツール
Translate