前の記事

地理院地図の導入

　通常、インターネットであれば、WebサーバーにGithubからダウンロードしたレポジトリ一式をアップすれば、各種タイル、検索機能など使用可能だ。
　しかし、イントラネットの場合、参照先が存在しないので、自分で新しく作成する必要がある。

地理院タイルの参照設定

　地理院タイル参照に関しては、layers_txtディレクトリ内のlayers0.txtに記述がある。

layers0.txt

{
  "layers": [
    {
      "type": "Layer",
      "id": "std",
      "title": "標準地図",
      "url": "https://maps.gsi.go.jp/xyz/std/{z}/{x}/{y}.png",
      "cocotile": true,
      "legendUrl": "https://maps.gsi.go.jp/development/ichiran.html#std",
      "errorTileUrl": "./image/map/no-data-std.png"
    }
  ]
}

　webサーバー上に設置した場合、url部分のhttps://maps.gsi.go.jp/xyz/stdを自分が設置したディレクトリに変更すればよい。
　ファイルサーバーに設置した場合、file://ipアドレス/フォルダ名/std/{z}/{x}/{y}.pngのように記述する。
　ファイルサーバーに置いた場合、アクセス権を付与された端末にしか地図は表示されないので注意

ファイルサーバーのIPアドレス確認方法

　ファイルサーバーのIPアドレス確認にはコマンドプロントを用いる。
　コマンドプロントを立ち上げて、「net use X:」のように入力すると確認できる

レイヤーについて

　下図を見たことはあるだろうか？

　それぞれ、選択すると自分が必要とする情報が地図上に表示される。
　この機能のことをレイヤー機能という。
　今回は、これを追加しようという話だ。
　ここに関する記述は2019年3月26日までは、jsディレクトリのgsimaps.jsにそれ以降は、layers_txtディレクトリのlayers.txtに記述されている。
　最新のものでもgsimaps.jsに記述されていた頃の名残はみられるが、そこを編集しても意味はないので注意が必要だ。
　詳しくは、ReadMeにもある
レイヤ定義規約（別レポジトリからの提供）：https://github.com/gsi-cyberjapan/layers-dot-txt-spec
を参照してほしい。

レイヤーの追加

　まずは、レイヤーに追加したいものを作成する。ということでlayers_txtの中を見てみるが、

　ご覧のとおりごちゃごちゃしていてわかりづらい。
　纏めると主に３つのファイルで構成されいる。他機関の情報の空港の周辺空域を参考に見ていく。
　まず、情報をクリックすると出てくる

　これを表示させるファイル。
　そして、他機関の情報をクリックすると出てくる

　こいつを、表示させるファイル。
　最後に、空港の周辺空域をクリックすると表示される

　このポリゴンだ。
　それぞれ順番にレイヤーグループ、レイヤー、Geojsonファイルという。
　なお、Geojsonファイルに関しては、場合によっては地図タイル等に変わるため、説明しない。
　Geojsonの書き方に関してはwikipediaを参照してほしい。

レイヤーグループの作成

　今回は、以下の構成で説明する。
test
└layersgroup_test.txt
└ayers_test.txt
└data
　 └test1.geojson
　 └test2.geojson

先ずはレイヤーグループから

layersgroup_test.txt

{
  "layers": [
    {
     "type": "LayerGroup",
     "title": "グループタイトル",
     "iconUrl": "./image/system/folder.png",
     "toggleall": false,
     "src": "./layers_test.txt"
     }
  ]
}

　レイヤーグループを作成する場合、タイプにLayerGroupを指定する。
　srcにレイヤーへのパスを記述する。

　次にレイヤー

layers_test.txt

{
  "layers": [
        {
          "type": "Layer",
          "id":"test",
          "title": "レイヤータイトル",
          "url": "./layers_txt/test/data/test1.geojson",
          "minZoom": 15,
          "maxZoom": 18,
          "maxNativeZoom": 16,
          "html": "test"
        },
        {
          "type": "Layer",
          "id":"test2",
          "title": "レイヤータイトル2",
          "url": "./layers_txt/test/data/test2.geojson",
          "minZoom": 15,
          "maxZoom": 18,
          "maxNativeZoom": 16,
          "html": "test"
        }
  ]
}

　レイヤーを作成する場合、タイプにLayerを指定する。
　複数のレイヤーを作成する場合、任意のidを割り振らなければひとつのレイヤーとみなされる。
　urlにファイルへのパスを記述する。この際、index.htmlからの参照となるため、ディレクトリは、layers_txtから書く必要がある。
　geojsonの説明は前述の通り省略

　最後に、layers.txtを編集する。

layers.txt

[
	{
		"url":"./layers1.txt"
	},
	{
		"url":"./layers2.txt"
	},
	{
		"url":"./layers3.txt"
	},
	{
		"url":"./layers4.txt"
	},
	{
		"url":"./layers_skhb.txt"
	},
	{
		"url":"./layers_antarctic.txt"
	},	
	{
		"url":"./layers_topic_chirikyoiku.txt"
	},
	{
		"url":"./layers5.txt"
	},
	{
		"url":"./layers_experimental.txt"
	}
]

　任意の位置にパスを追加するが、一番上に記載しても、gismaps.jsで、layers0.txt(ベースマップ)が先に表示されるようになっている。
　layers0.txtより先に表示したい場合は、gsimaps.jsの記述を変更する必要がある

layers.txt

[
	{
		"url":"./test/layersgroup_test.txt"
	},
	{
		"url":"./layers1.txt"
	},
	{
		"url":"./layers2.txt"
	},
	{
		"url":"./layers3.txt"
	},
	{
		"url":"./layers4.txt"
	},
	{
		"url":"./layers_skhb.txt"
	},
	{
		"url":"./layers_antarctic.txt"
	},	
	{
		"url":"./layers_topic_chirikyoiku.txt"
	},
	{
		"url":"./layers5.txt"
	},
	{
		"url":"./layers_experimental.txt"
	}
]

表示結果については以下のようになる。

次回は、ジオコーダについて記事を書く。