チュートリアル14
提供: svg2wiki
(版間での差分)
(ページの作成:「= チュートリアル6 WebApp Layer geoJSON = * 実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/geojson1/geojson1.html こちら]をクリック。 *...」) |
(→チュートリアル6 WebApp Layer geoJSON) |
||
| 1行: | 1行: | ||
| − | = | + | = チュートリアル14 WebApp Layer geoJSON = |
| − | * 実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/ | + | 動的にベクトルデータが生成・配信されているサービスをSVGMap.jsに結合します。ここではUSGS Hazards Programが配信している、[https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php 世界の地震発生状況データ](GeoJSON版)を結合してみます。基本的には[[#.E3.83.81.E3.83.A5.E3.83.BC.E3.83.88.E3.83.AA.E3.82.A2.E3.83.AB6_WebApp_Layer_geoJSON|チュートリアル6]]との違いはありません。 |
| − | * [https://svgmap.org/devinfo/devkddi/tutorials/ | + | |
| + | * 実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/geojson2/geojson2.html こちら]をクリック。 | ||
| + | * [https://svgmap.org/devinfo/devkddi/tutorials/geojson2/ ソースコードのディレクトリ] | ||
== geojson1.html == | == geojson1.html == | ||
| − | + | * [[チュートリアル6]]と特に違いはありません。 | |
| − | * [[ | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
== Container.svg == | == Container.svg == | ||
| − | * | + | * [[チュートリアル6]]と特に違いはありません。 |
| − | + | ||
| − | + | ||
| − | + | ==geoJsonExample2.svg== | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
* ドキュメントルート要素(svg要素)の、data-controller属性で、この[[解説書#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|レイヤーを操作するwebApp]]を指定しています。 | * ドキュメントルート要素(svg要素)の、data-controller属性で、この[[解説書#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|レイヤーを操作するwebApp]]を指定しています。 | ||
**<code>data-controller="geoJsonExample1.html#exec=appearOnLayerLoad</code> | **<code>data-controller="geoJsonExample1.html#exec=appearOnLayerLoad</code> | ||
**<code>exec=appearOnLayerLoad</code>は、レイヤが表示状態になるとwebAppのウィンドが出現する設定です。（[[解説書#.E8.A9.B3.E7.B4.B0|詳しくはこちら]]） | **<code>exec=appearOnLayerLoad</code>は、レイヤが表示状態になるとwebAppのウィンドが出現する設定です。（[[解説書#.E8.A9.B3.E7.B4.B0|詳しくはこちら]]） | ||
| + | *defs要素でマーカー(POIのアイコン)を定義しています | ||
| + | **マーカーの色はマグニチュードに応じて変化させるためここでは未定義にしてあります | ||
<pre> | <pre> | ||
<?xml version="1.0" encoding="UTF-8"?> | <?xml version="1.0" encoding="UTF-8"?> | ||
| − | <svg | + | <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="geoJsonExample2.html#exec=appearOnLayerLoad" property="name,address,phone,url"> |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | > | + | |
<defs> | <defs> | ||
<g id="p0"> | <g id="p0"> | ||
| − | <circle cx="0" cy="0" r="10 | + | <circle cx="0" cy="0" r="10" stroke="none"/> |
</g> | </g> | ||
</defs> | </defs> | ||
| 101行: | 31行: | ||
<g id="mapContents"></g> | <g id="mapContents"></g> | ||
</svg> | </svg> | ||
| − | |||
</pre> | </pre> | ||
2022年2月28日 (月) 03:11時点における版
目次 |
チュートリアル14 WebApp Layer geoJSON
動的にベクトルデータが生成・配信されているサービスをSVGMap.jsに結合します。ここではUSGS Hazards Programが配信している、世界の地震発生状況データ(GeoJSON版)を結合してみます。基本的にはチュートリアル6との違いはありません。
- 実際の動作は、こちらをクリック。
- ソースコードのディレクトリ
geojson1.html
- チュートリアル6と特に違いはありません。
Container.svg
- チュートリアル6と特に違いはありません。
geoJsonExample2.svg
- ドキュメントルート要素(svg要素)の、data-controller属性で、このレイヤーを操作するwebAppを指定しています。
data-controller="geoJsonExample1.html#exec=appearOnLayerLoadexec=appearOnLayerLoadは、レイヤが表示状態になるとwebAppのウィンドが出現する設定です。（詳しくはこちら）
- defs要素でマーカー(POIのアイコン)を定義しています
- マーカーの色はマグニチュードに応じて変化させるためここでは未定義にしてあります
<?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="geoJsonExample2.html#exec=appearOnLayerLoad" property="name,address,phone,url"> <defs> <g id="p0"> <circle cx="0" cy="0" r="10" 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を持ち、
dataPathsで設定した いくつかのgeoJsonデータを選択できるようになっています。 loadJSON(url): await fetchを使ってGeoJsonデータを非同期読み込み- SVGMap GISライブラリ(svgMapGIStool)の
drawGeoJson関数を使用し、geoJsonをSVGMapコンテンツ(のDOM)への変換をしています。- なお、自力でgeoJsonをSVGMapコンテンツのDOMに変換することももちろん可能ですが、チュートリアル6ではライブラリを使っています。
svgMap.refreshScreen()伸縮スクロール以外のタイミングでDOMの再描画が必要な場合、再描画を明示する必要があります。
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>SVGMapのwebAppレイヤーで、geoJsonを描画するサンプル</title>
</head>
<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>
