チュートリアル6 - 版の履歴

Admin: /* geojson1.html */

2024-09-12T09:50:12Z

‎geojson1.html

Admin: /* geoJsonExample1.html */

2024-07-24T10:53:28Z

‎geoJsonExample1.html

Admin: /* geoJsonExample1.html, geoJsonExample1.js */

2024-07-24T10:52:43Z

‎geoJsonExample1.html, geoJsonExample1.js

Admin: /* geoJsonExample1.html, geoJsonExample1.js */

2024-07-24T10:26:48Z

‎geoJsonExample1.html, geoJsonExample1.js

Admin: /* geoJsonExample1.html */

2024-07-19T10:15:08Z

‎geoJsonExample1.html

Admin: /* geoJsonExample1.html */

2023-11-16T07:42:55Z

‎geoJsonExample1.html

Admin: /* チュートリアル6 WebApp Layer geoJSON */

2023-06-23T14:24:48Z

‎チュートリアル6 WebApp Layer geoJSON

Admin: /* Container.svg */

2023-04-11T09:06:10Z

‎Container.svg

Admin: /* geojson1.html */

2023-04-11T08:21:04Z

‎geojson1.html

Admin: /* geojson1.html */

2022-08-16T11:59:45Z

‎geojson1.html

@@ 4行目: / 4行目: @@
 == geojson1.html ==
-[[チュートリアル2b]]のhtmlに対して、
+[[チュートリアル2b]]のhtmlに対して、読み込む[https://svgmap.org/devinfo/devkddi/tutorials/geojson1/Container.svg SVGコンテンツ]が異なるだけです。
 <pre>
@@ 20行目: / 16行目: @@
 <!-- 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>
 <!-- レイヤーリストUIのスタイルシート読み込み -->

@@ 110行目: / 110行目: @@
 ===geoJsonExample1.html===
-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の初期化処理のための共通ライブラリの読み込み]]と、このレイヤー固有の処理内容を記述したscriptコード部(<code>geoJsonExample1.js</code>)、及びUI(html,css等)から構成されます。
+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等)から構成されます。
 <pre>

@@ 106行目: / 106行目: @@
 ==geoJsonExample1.html, geoJsonExample1.js==
-*[[解説書#.E6.8B.A1.E5.BC.B5API|レイヤー固有のUI:拡張API]]記載の通りsvgImage, svgMapGIStoolオブジェクトが自動的にwindowに組み込まれています。
+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.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データを選択できるようになっています。
+===geoJsonExample1.html===
-*<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)への変換をしています。
+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の初期化処理のための共通ライブラリの読み込み]]と、このレイヤー固有の処理内容を記述したscriptコード部(<code>geoJsonExample1.js</code>)、及びUI(html,css等)から構成されます。
 <pre>
@@ 133行目: / 128行目: @@
 </html>
 </pre>
 <pre>

@@ 124行目: / 124行目: @@
 	<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>

@@ 105行目: / 105行目: @@
 </pre>
-==geoJsonExample1.html==
+==geoJsonExample1.html, geoJsonExample1.js==
 *[[解説書#.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]]
@@ 125行目: / 125行目: @@
 </head>
-<script>
+<script src="geoJsonExample1.js"></script>
 var dataPaths = {
 	"A34b-180316.geojson":"世界遺産構成資産範囲ポリゴン（代表点）",
@@ 189行目: / 198行目: @@
+}
 </pre>

@@ 111行目: / 111行目: @@
 *<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)への変換をしています。
 **なお、自力でgeoJsonをSVGMapコンテンツのDOMに変換することももちろん可能ですが、チュートリアル6ではライブラリを使っています。
 **<code>drawGeoJson</code>関数については[[解説書#drawGeoJson]]を参照

@@ 1行目: / 1行目: @@
 = チュートリアル6 WebApp Layer geoJSON =
 * 実際の動作は、[https://svgmap.org/devinfo/devkddi/tutorials/geojson1/geojson1.html こちら]をクリック。
-* [https://svgmap.org/devinfo/devkddi/tutorials/geojson1/ ソースコードのディレクトリ]
+* 使用ファイルの[https://www.svgmap.org/devinfo/devkddi/tutorials/geojson1.zip ZIPアーカイブファイル]
 == geojson1.html ==

@@ 69行目: / 69行目: @@
 <!-- OpenStretMap背景地図を表示状態として読み込む -->
-<animation xlink:href="../tutorial5/dynamicOSM_r11.svg" x="-3000" y="-3000" width="6000" height="6000" title="OpenStreetMap" 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)を表示状態として読み込む -->

@@ 20行目: / 20行目: @@
 <!-- SVGMapのコアAPIの読み込み -->
-<script type="text/javascript" src="../js/SVGMapLv0.1_r17.js"></script>
+<script type="text/javascript" src="./js/SVGMapLv0.1_r17.js"></script>
-<script type="text/javascript" src="../js/SVGMapLv0.1_LayerUI2_r4.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/jsts.min.js"></script>
-<script type="text/javascript" src="../js/SVGMapLv0.1_GIS_r3.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">
+<link href="./js/layerListStyle.css" rel="stylesheet" type="text/css">
 <body bgcolor="#ffffff" style="overflow:hidden;" >
@@ 35行目: / 35行目: @@
   <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ボタン -->
-   <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>
@@ 45行目: / 45行目: @@
    <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>

@@ 7行目: / 7行目: @@
 * [[解説書#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://unpkg.com/jsts@1.6.1/dist/jsts.min.js jsts.min.js download])
+** <code>jsts.min.js</code>：同ライブラリが使用している、[https://bjornharrtell.github.io/jsts/ OSSの地理空間演算ライブラリ(JSTS)] [https://github.com/bjornharrtell/jsts github] ([https://unpkg.com/jsts@1.6.1/dist/jsts.min.js jsts.min.js download])
 *これれらを除けば、読み込む[https://svgmap.org/devinfo/devkddi/tutorials/geojson1/Container.svg SVGコンテンツ]が異なるだけです。