2025年7月8日 (火) 00:22時点における最新版

[編集] はじめに

本章では、svgmapAppLayersリポジトリを自分のホストにコピーして使用します。 前章の制限事項はありませんが、svgmapAppLayersリポジトリのアップデートの反映は自身で行う必要があります。

• 実際の動作はこちらをクリック
  • このサンプルでは、国交省道路交通情報のレイヤー群と、CSVオーサリングツールレイヤー、basemapsのみを使用しています
• 使用ファイルのZIPアーカイブファイル

[編集] 手順

• svgmapAppLayerの内容を複製します
  • https://github.com/svgmap/svgmapAppLayers の UI(<>Codeボタン⇒Download ZIP)でダウンロードする(解凍はシンボリックリンクが有効な環境(linux等)で実施)
    か、
  • gitコマンドでクローンする　git clone git@github.com:svgmap/svgmapAppLayers
• 使いたいレイヤー以外のディレクトリは消去して構いません
  • ただしcommonLibは共通ライブラリは各ディレクトリの中からシンボリックリンクが張られているファイル群のため、基本的には削除できません。(使用するレイヤーのディレクトリから参照されていないファイルを消すことは可能）
• authoringLayers/bbsディレクトリはphpを使って、オーサリングしたものをサーバに保存する機能に関する実装です、このチュートリアルでは扱いませんので不用意なサーバ動作を防ぐため必ず削除してください。
• 地図ページのhtmlを用意（前章と同じです）
• img, jsディレクトリとその内容を配置
• プロキシーサービスを構築（前章と同じです）
• Container.svgは編集して必要なレイヤーのみを残します。

[編集] ディレクトリの構造

このサンプルでは、国交省道路交通情報のレイヤー群と、CSVオーサリングツールレイヤー、basemapsのみを使用

|--Container.svg
|--appLayers
|  |--mlitRoad
|     |--...
|
|--authoringLayers
|  |--local
|  |  |--csvLayer
|  |     |--...
|  |
|  |--mappin.png
|  
|--basemaps
|  |--...
|  
|--commonLib
|  |--...
|  
|--ghAppLayers_clone.html
|--img
|  |--...
|  
|--js
|  |--...
|  
|--simpleCORSproxy.php

[編集] Container.svg

このサンプルでは、国交省道路交通情報のレイヤー群と、CSVオーサリングツールレイヤー、basemapsのみを使用

<?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="123 -46 22 22" >

<globalCoordinateSystem srsName="http://purl.org/crs/84" transform="matrix(1.0,0.0,0.0,-1.0,0.0,0.0)" />

<!-- Basemap Layers -->
<animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./basemaps/dynamicWMTS.svg" title="sentinel2_2018_WMTS" class="basemap switch" visibility="hidden"/>
<animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./basemaps/dynamicDenshiKokudo2016.svg#map=ort" title="DenshiKokudo:orthoPhoto" class="basemap switch" visibility="hidden"/>
<animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./basemaps/dynamicDenshiKokudo2016.svg#map=pale" title="DenshiKokudo:淡色" class="basemap switch" visibility="hidden"/>
<animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./basemaps/dynamicDenshiKokudo2016.svg#map=relief" title="DenshiKokudo:relief" class="basemap switch" visibility="hidden"/>
<animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./basemaps/dynamicDenshiKokudo2016.svg" title="DenshiKokudo" class="basemap switch" visibility="hidden"/>
<animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./basemaps/osmTileProviders/osmtp.svg" title="OpenStreetMap Etc" class="basemap switch" visibility="hidden"/>
<animation x="-300" y="-300" width="600" height="600" xlink:href="./basemaps/dynamicOSM_r11.svg" title="OpenStreetMap(Global)" class="basemap switch" visibility="visible"/>

<!-- オーサリングツール的なもののグループ -->
<animation xlink:href="./authoringLayers/local/csvLayer/csvXhr_r20.svg" title="CSVデータ可視化" data-cross-origin-restricted="true" x="-30000" y="-30000" width="60000" height="60000" class="オーサリング・ファイル editable" opacity="0.75" visibility="hidden"/>

<!-- 国交省道路情報 -->
  <animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./appLayers/mlitRoad/notoEQ2024/notoRoad.svg" title="令和６年能登半島地震　道路復旧状況" data-cross-origin-proxy-required="true" opacity="0.75" class="国交省道路情報 batch clickable" visibility="hidden"/>
  <animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./appLayers/mlitRoad/doroBosai/kinkyuYuso.svg" title="緊急輸送道路R" data-cross-origin-proxy-required="true" opacity="0.85" class="国交省道路情報 batch" visibility="hidden"/>
  <animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./appLayers/mlitRoad/jpAll2023.svg#layer=imusho" title="国道事務所等" data-cross-origin-proxy-required="true" opacity="0.75" class="国交省道路情報 batch" visibility="hidden"/>
  <animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./appLayers/mlitRoad/jpAll2023.svg#layer=station" title="道の駅R" data-cross-origin-proxy-required="true" opacity="0.75" class="国交省道路情報 batch" visibility="hidden"/>
  <animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./appLayers/mlitRoad/jpAll2023.svg#layer=kojiyotei" title="工事予定" data-cross-origin-proxy-required="true" opacity="0.8" class="国交省道路情報 clickable batch" visibility="hidden"/>
  <animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./appLayers/mlitRoad/jpAll2023.svg#layer=expressway" title="高速道路事前通行規制区間" data-cross-origin-proxy-required="true" opacity="0.8" class="国交省道路情報 clickable batch" visibility="hidden"/>
  <animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./appLayers/mlitRoad/jpAll2023.svg#layer=jizenkisei" title="事前通行規制区間R" data-cross-origin-proxy-required="true" opacity="0.8" class="国交省道路情報 clickable batch" visibility="hidden"/>
  <animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./appLayers/mlitRoad/jpAll2023.svg#layer=weather" title="時間雨量" data-cross-origin-proxy-required="true" opacity="0.75" class="国交省道路情報 clickable batch" visibility="hidden"/>
  <animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./appLayers/mlitRoad/jpAll2023.svg#layer=camera" title="ライブカメラ" data-cross-origin-proxy-required="true" opacity="0.75" class="国交省道路情報 batch" visibility="hidden"/>
  <animation x="-30000" y="-30000" width="60000" height="60000" xlink:href="./appLayers/mlitRoad/jpAll2023.svg" title="通行規制" data-cross-origin-proxy-required="true" opacity="0.75" class="国交省道路情報 batch" visibility="hidden"/>
</svg>