イントラネットで地図サービスを使いたい３-サーバー設置・レイヤー追加編-

<a href="https://qiita.com/notmushroomnot/items/2e7cb89ad623ca6edf9f">前の記事</a>
#地理院地図の導入
　通常、インターネットであれば、WebサーバーにGithubからダウンロードしたレポジトリ一式をアップすれば、各種タイル、検索機能など使用可能だ。
　しかし、イントラネットの場合、参照先が存在しないので、自分で新しく作成する必要がある。

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

```text: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:」のように入力すると確認できる

#レイヤーについて
　下図を見たことはあるだろうか？
![_20190413_092027.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394814/4aaf7fde-40df-c647-46ff-9a7afb07a3b5.jpeg)

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

#レイヤーの追加
　まずは、レイヤーに追加したいものを作成する。ということでlayers_txtの中を見てみるが、
![_20190413_093330.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394814/462cf2c3-3a93-1f92-893f-b7dcaa38a786.jpeg)
　ご覧のとおりごちゃごちゃしていてわかりづらい。
　纏めると主に３つのファイルで構成されいる。他機関の情報の空港の周辺空域を参考に見ていく。
　まず、情報をクリックすると出てくる
![_20190413_094929.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394814/6685f873-a75f-e58c-6b22-a2f9a9f0c04e.jpeg)
　これを表示させるファイル。
　そして、他機関の情報をクリックすると出てくる
![_20190413_094901.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394814/fb627adc-4e9f-bda6-0fc2-98ca561ffe9b.jpeg)
　こいつを、表示させるファイル。
　最後に、空港の周辺空域をクリックすると表示される
![_20190413_094819.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394814/d50576cd-f8fb-30ca-be4a-158a932f4fb6.jpeg)
　このポリゴンだ。
　それぞれ順番に**レイヤーグループ**、**レイヤー**、**Geojsonファイル**という。
　なお、Geojsonファイルに関しては、場合によっては地図タイル等に変わるため、説明しない。
　Geojsonの書き方に関しては<a href = "https://ja.m.wikipedia.org/wiki/GeoJSON">wikipediaを参照</a>してほしい。

#レイヤーグループの作成
　今回は、以下の構成で説明する。
test
└layersgroup_test.txt
└ayers_test.txt
└data
　 └test1.geojson
　  └test2.geojson

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

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

```

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

　次にレイヤー

```text: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を編集する。

```text: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の記述を変更する必要がある

```text: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"
	}
]
```

 表示結果については以下のようになる。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/394814/7fc87d9e-a67d-72f8-1bc0-c8a5b27cae27.png)

次回は、ジオコーダについて<a href="https://qiita.com/notmushroom/items/2a68c6fc5b1e75d0d057">記事</a>を書く。