チュートリアル6
提供: svg2wiki
目次 |
チュートリアル6 WebApp Layer geoJSON
実際の動作は、こちらをクリック。
geojson1.html
チュートリアル2bのhtmlに対して、
- SVGMap GISライブラリを導入しています。このライブラリはgeoJsonを簡単にSVGMapコンテンツに変換する関数等が入っています。
-
SVGMapLv0.1_GIS_r3.js: SVGMap GISライブラリ本体 -
jsts.min.js：同ライブラリが使用している、OSSの地理空間演算ライブラリ(JSTS)
-
- これれらを除けば、読み込むSVGコンテンツが異なるだけです。
<!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> <!-- レイヤーリスト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
- 特に変わったところはありません。GeoJsonを表示する主題レイヤと、背景地図(OpenStreetMap)を読み込んでいます。
<?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=appearOnLayerLoadexec=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データを選択できるようになっています。
loadJSON(url): await fetchを使ってGeoJsonデータを非同期読み込み- SVGMap GISライブラリ(svgMapGIStool)のdrawGeoJson関数を使用し、geoJsonをSVGMapコンテンツ(のDOM)への変換をしています。
- なお、自力でgeoJsonをSVGMapコンテンツのDOMに変換することももちろん可能ですが、チュートリアル6ではライブラリを使っています。
<!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>
