チュートリアル6

提供: svg2wiki
(版間での差分)
移動: 案内, 検索
(→‎geojson1.html)
(→‎geojson1.html)
 
(1人の利用者による、間の33版が非表示)
1行: 1行:
 
= チュートリアル6 WebApp Layer geoJSON =
 
= チュートリアル6 WebApp Layer geoJSON =
−
実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/geojson1/geojson1.html こちら]をクリック。
+
* 実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/geojson1/geojson1.html こちら]をクリック。
 +
* 使用ファイルの[https://www.svgmap.org/devinfo/devkddi/tutorials/geojson1.zip ZIPアーカイブファイル]
  
 
== geojson1.html ==
 
== geojson1.html ==
−
[[チュートリアル2b]]のhtmlに対して、
+
[[チュートリアル2b]]のhtmlに対して、読み込む[https://svgmap.org/devinfo/devkddi/tutorials/geojson1/Container.svg SVGコンテンツ]が異なるだけです。
−
* [[解説書#svgMapGIStool..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI|SVGMap GISライブラリ]]を導入しています。このライブラリはgeoJsonを簡単にSVGMapコンテンツに変換する関数等が入っています。
+
−
** <code>SVGMapLv0.1_GIS_r3.js</code> : [[解説書#svgMapGIStool..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI|SVGMap GISライブラリ]]本体
+
−
** <code>jsts.min.js</code>：同ライブラリが使用している、[https://bjornharrtell.github.io/jsts/ OSSの地理空間演算ライブラリ(JSTS)]
+
−
*これれらを除けば、読み込む[https://svgmap.org/devinfo/devkddi/tutorials/geojson1/Container.svg SVGコンテンツ]が異なるだけです。
+
  
 
<pre>
 
<pre>
19行: 16行:
  
 
<!-- SVGMapのコアAPIの読み込み -->
 
<!-- SVGMapのコアAPIの読み込み -->
−
<script type="text/javascript" src="../js/SVGMapLv0.1_r17.js"></script>
+
<script type="module">
−
<script type="text/javascript" src="../js/SVGMapLv0.1_LayerUI2_r4.js"></script>
+
  import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
−
 
+
  window.svgMap=svgMap
−
<!-- SVGMap GISライブラリの読み込み-->
+
</script>
−
<script type="text/javascript" src="../js/jsts.min.js"></script>
+
−
<script type="text/javascript" src="../js/SVGMapLv0.1_GIS_r3.js"></script>
+
  
 
<!-- レイヤーリストUIのスタイルシート読み込み -->
 
<!-- レイヤーリストUIのスタイルシート読み込み -->
−
<link href="../js/layerListStyle.css" rel="stylesheet" type="text/css">
+
<link href="./js/layerListStyle.css" rel="stylesheet" type="text/css">
  
 
<body bgcolor="#ffffff" style="overflow:hidden;" >
 
<body bgcolor="#ffffff" style="overflow:hidden;" >
34行: 29行:
 
  <div id="gui">
 
  <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="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" />
+
   <img id="zoomdownButton" style="left: 5px; top: 25px; position: absolute;" src="./img/zoomdown.png" onclick="svgMap.zoomdown()" width="20" height="20" />
 
<!-- GPSボタン -->
 
<!-- GPSボタン -->
−
   <img id="gpsButton" style="left: 5px; top: 45px; position: absolute;" src="../img/gps.png" onclick="svgMap.gps()" width="20" height="20" />
+
   <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; top: 5px; position: absolute;" >SVGMapLevel0.1 Rev14 Draft : Tutorial2 Coastline & Air Port</font>
44行: 39行:
 
   <font color="blue" style="right: 5px; bottom: 5px; position: absolute;" size="-2" >by SVGMap tech.</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"/>
+
   <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="posCmt" size="-2" color="brown" style="left: 5px; bottom: 5px; position: absolute;">Lat,Lng:</font>
58行: 53行:
  
 
== Container.svg ==
 
== Container.svg ==
−
* 特に変わったところはありません。[https://svgmap.org/devinfo/devkddi/tutorials/geojson1/geoJsonExample1.svg GeoJsonを表示する主題レイヤ]と、背景地図(OpenStreetMap)を読み込んでいます。
+
* [https://svgmap.org/devinfo/devkddi/tutorials/geojson1/geoJsonExample1.svg GeoJsonを表示する主題レイヤ]と、背景地図(OpenStreetMap)をanimation要素で読み込んでいます。
 +
* GeoJsonデータはベクトルデータのため、class属性で[[解説書#class.E5.B1.9E.E6.80.A7.E3.81.AB.E3.82.88.E3.82.8B.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E3.81.AE.E3.82.B0.E3.83.AB.E3.83.BC.E3.83.94.E3.83.B3.E3.82.B0.E3.83.BB.E3.82.AF.E3.83.AA.E3.83.83.E3.82.AB.E3.83.96.E3.83.AB.E6.A9.9F.E8.83.BD.E3.81.AE.E6.8F.90.E4.BE.9B|clickable]]を指定しています。
 +
* それ以外は[[チュートリアル1#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.AA.E3.83.B3.E3.82.B0|こちらの要点]]を参考にしたレイヤリングを行っています。
  
 
<pre>
 
<pre>
66行: 63行:
  
 
<!-- OpenStretMap背景地図を表示状態として読み込む -->
 
<!-- OpenStretMap背景地図を表示状態として読み込む -->
−
<animation xlink:href="../tutorial5/dynamicOSM_r11.svg" x="-3000" y="-3000" width="6000" height="6000" title="Japan Coastline" class="basemap" visibility="visible"/>
+
<animation xlink:href="./dynamicOSM_r11.svg" x="-3000" y="-3000" width="6000" height="6000" title="OpenStreetMap" class="basemap" visibility="visible"/>
  
 
<!-- 各種GeoJsonデータ(Point Feature)を表示状態として読み込む -->
 
<!-- 各種GeoJsonデータ(Point Feature)を表示状態として読み込む -->
74行: 71行:
  
 
==geoJsonExample1.svg==
 
==geoJsonExample1.svg==
−
* ドキュメントルート要素(svg要素)の、data-controller属性で、このレイヤーを操作する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要素でgeoJsonのポイントフィーチャーを可視化するときに使うマーカー(アイコン)を定義しています
  
 
<pre>
 
<pre>
83行: 81行:
 
   xmlns="http://www.w3.org/2000/svg"
 
   xmlns="http://www.w3.org/2000/svg"
 
   xmlns:xlink="http://www.w3.org/1999/xlink"
 
   xmlns:xlink="http://www.w3.org/1999/xlink"
−
   xmlns:go="http://purl.org/svgmap/profile"
+
   data-controller="geoJsonExample1.html#exec=appearOnLayerLoad"
 
   viewBox="12375.0 -4500.0 2250.0 2250.0"
 
   viewBox="12375.0 -4500.0 2250.0 2250.0"
 
   go:dataArea="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"
 
   property="name,address,phone,url"
 
>
 
>
102行: 99行:
 
</pre>
 
</pre>
  
 +
==geoJsonExample1.html, geoJsonExample1.js==
 +
geoJsonExample1.svgに紐付けられたwebApp([[解説書#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|レイヤー固有のUI]])です。レイヤーに紐付けられたwebAppでは、[[解説書#.E6.8B.A1.E5.BC.B5API|独自のAPI]]が利用できます。
  
−
==geoJsonExample1.html==
+
===geoJsonExample1.html===
−
*geoJsonExample1.svgに紐付けられ、そのDOMをコントロールできるwebApp
+
 
−
*このアプリでは簡単なUIを持ち、いくつかのgeoJsonデータを選択できるようになっています。
+
htmlは、[[解説書#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI.E3.81.AE.E3.81.9F.E3.82.81.E3.81.AEhtml.E6.96.87.E6.9B.B8.28webApp.29.E3.81.AE.E6.A7.8B.E9.80.A0.E3.83.BB.E4.BD.9C.E6.B3.95|レイヤー固有のUIの初期化処理のための共通ライブラリ(svgMapLayerLib.js)の読み込み]]と、このレイヤー固有の処理内容を記述したscriptコード部(<code>geoJsonExample1.js</code>)、及びUI(html,css等)から構成されます。
−
*svgMapGIStoolのdrawGeoJson関数を使用し、geoJsonをSVGMapコンテンツ(のDOM)への変換をしています。
+
−
**なお、自力でgeoJsonをSVGMapコンテンツのDOMに変換することももちろん可能です。
+
  
 
<pre>
 
<pre>
116行: 113行:
 
<title>SVGMapのwebAppレイヤーで、geoJsonを描画するサンプル</title>
 
<title>SVGMapのwebAppレイヤーで、geoJsonを描画するサンプル</title>
 
</head>
 
</head>
 +
<script src="https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/svgMapLayerLib.js"></script>
 +
<script src="geoJsonExample1.js"></script>
 +
<body>
 +
<h3>area layer</h3>
 +
<p>geoJsonの可視化</p>
 +
<select id="dataSelect" onchange="changeData()"></select>
 +
</body>
 +
</html>
 +
</pre>
  
−
<style>
+
===geoJsonExample1.js===
−
/* 奇数行のスタイル */
+
−
table tr:nth-child(odd){
+
−
  background-color:#c0c0ff;
+
−
}
+
−
+
−
/* 偶数行のスタイル */
+
−
table tr:nth-child(even){
+
−
  background-color:#e0e0e0;
+
−
}
+
−
</style>
+
  
−
<script>
+
*[[解説書#.E6.8B.A1.E5.BC.B5API|レイヤー固有のUI:拡張API]]記載の通りsvgImage, svgMapGIStoolオブジェクトが自動的にwindowに組み込まれています。
 +
*geoJsonExample1.svgに紐付けられ、[[解説書#.E3.83.AC.E3.82.A4.E3.83.A4.E3.83.BC.E5.9B.BA.E6.9C.89.E3.81.AEUI|そのDOMをコントロールできるwebApp]]
 +
*このアプリでは簡単なUIを持ち、<code>dataPaths </code>で設定した　いくつかのgeoJsonデータを選択できるようになっています。
 +
*<code>loadJSON(url)</code> : [https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function await] [https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch fetch]を使って[https://ja.wikipedia.org/wiki/GeoJSON GeoJsonデータ]を非同期読み込み
 +
*[[解説書#svgMapGIStool..E3.81.A7.E5.91.BC.E3.81.B3.E5.87.BA.E3.81.9B.E3.82.8BAPI|SVGMap GISライブラリ(svgMapGIStool)]]の<code>drawGeoJson</code>関数を使用し、geoJsonをSVGMapコンテンツ(のDOM)への変換をしています。
 +
** 変数 layerID 組み込み変数([[解説書#layerID]]参照)
 +
**なお、自力でgeoJsonをSVGMapコンテンツのDOMに変換することももちろん可能ですが、チュートリアル6ではライブラリを使っています。
 +
**<code>drawGeoJson</code>関数については[[解説書#drawGeoJson]]を参照
 +
*<code>svgMap.refreshScreen()</code> 伸縮スクロール以外のタイミングでDOMの再描画が必要な場合、[[解説書#refreshScreen|再描画を明示]]する必要があります。
 +
** [[解説書#.E5.86.8D.E6.8F.8F.E7.94.BB.E3.81.AE.E5.88.B6.E9.99.90|参考情報]]
 +
 
 +
<pre>
 
var dataPaths = {
 
var dataPaths = {
 
"A34b-180316.geojson":"世界遺産構成資産範囲ポリゴン（代表点）",
 
"A34b-180316.geojson":"世界遺産構成資産範囲ポリゴン（代表点）",
193行: 200行:
 
}
 
}
  
−
</script>
 
−
<body>
 
−
<h3>area layer</h3>
 
−
<p>geoJsonの可視化</p>
 
−
<select id="dataSelect" onchange="changeData()"></select>
 
−
</body>
 
−
</html>
 
 
</pre>
 
</pre>

2024年9月12日 (木) 09:50時点における最新版

目次

[編集] チュートリアル6 WebApp Layer geoJSON

[編集] geojson1.html

チュートリアル2bのhtmlに対して、読み込む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="module">
  import { svgMap } from 'https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/SVGMapLv0.1_r18module.js';
  window.svgMap=svgMap
</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 

<?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="./dynamicOSM_r11.svg" x="-3000" y="-3000" width="6000" height="6000" title="OpenStreetMap" 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のウィンドが出現する設定です。（詳しくはこちら）
  • defs要素でgeoJsonのポイントフィーチャーを可視化するときに使うマーカー(アイコン)を定義しています 
<?xml version="1.0" encoding="UTF-8"?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  data-controller="geoJsonExample1.html#exec=appearOnLayerLoad"
  viewBox="12375.0 -4500.0 2250.0 2250.0"
  go:dataArea="12375.0 -4500.0 2250.0 2250.0"
  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.js

geoJsonExample1.svgに紐付けられたwebApp(レイヤー固有のUI)です。レイヤーに紐付けられたwebAppでは、独自のAPIが利用できます。

[編集] geoJsonExample1.html

htmlは、レイヤー固有のUIの初期化処理のための共通ライブラリ(svgMapLayerLib.js)の読み込みと、このレイヤー固有の処理内容を記述したscriptコード部(geoJsonExample1.js)、及びUI(html,css等)から構成されます。 

<!doctype html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>SVGMapのwebAppレイヤーで、geoJsonを描画するサンプル</title>
</head>
<script src="https://cdn.jsdelivr.net/gh/svgmap/svgmapjs@latest/svgMapLayerLib.js"></script>
<script src="geoJsonExample1.js"></script>
<body>
<h3>area layer</h3>
<p>geoJsonの可視化</p>
<select id="dataSelect" onchange="changeData()"></select>
</body>
</html>

[編集] geoJsonExample1.js

  • レイヤー固有のUI:拡張API記載の通りsvgImage, svgMapGIStoolオブジェクトが自動的にwindowに組み込まれています。
  • geoJsonExample1.svgに紐付けられ、そのDOMをコントロールできるwebApp
  • このアプリでは簡単なUIを持ち、dataPaths で設定した　いくつかのgeoJsonデータを選択できるようになっています。
  • loadJSON(url) : await fetchを使ってGeoJsonデータを非同期読み込み
  • SVGMap GISライブラリ(svgMapGIStool)のdrawGeoJson関数を使用し、geoJsonをSVGMapコンテンツ(のDOM)への変換をしています。
    • 変数 layerID 組み込み変数(解説書#layerID参照)
    • なお、自力でgeoJsonをSVGMapコンテンツのDOMに変換することももちろん可能ですが、チュートリアル6ではライブラリを使っています。
    • drawGeoJson関数については解説書#drawGeoJsonを参照
  • svgMap.refreshScreen() 伸縮スクロール以外のタイミングでDOMの再描画が必要な場合、再描画を明示する必要があります。 
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);
}
「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=2055」から取得
個人用ツール
名前空間

変種
操作
案内
ツール
Translate