独自ホストにsvgmapAppLayersをコピーして利用

提供: svg2wiki
(版間での差分)
移動: 案内, 検索
(ディレクトリの構造)
(ディレクトリの構造)
19行: 19行:
  
 
== ディレクトリの構造 ==
 
== ディレクトリの構造 ==
 +
このサンプルでは、国交省道路交通情報系のレイヤーと、CSVオーサリングツールレイヤーのみを使用
 
<pre>
 
<pre>
 
|--Container.svg
 
|--Container.svg

2025年7月7日 (月) 09:33時点における版

目次

はじめに

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

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

手順

  • svgmapAppLayerの内容を複製します
  • 使いたいレイヤー以外のディレクトリは消去して構いません
    • ただしcommonLibは共通ライブラリは各ディレクトリの中からシンボリックリンクが張られているファイルがあるので、慎重に扱ってください
  • authoringLayers/bbsの内容はphpを使って、オーサリングしたものをサーバに保存する機能に関する実装です、このチュートリアルでは扱いませんので必ず消してください。
  • 地図ページのhtmlを用意する(前章と同じです)
  • プロキシーを構築する(前章と同じです)
  • Container.svgは編集して必要なレイヤーのみを残します。

ディレクトリの構造

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

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

Container.svg

  • このサンプルでは、国交省道路交通情報系のレイヤーと、CSVオーサリングツールレイヤーのみを使用
<?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="令和6年能登半島地震 道路復旧状況" 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>
個人用ツール
名前空間

変種
操作
案内
ツール
Translate