LoginSignup
2
2

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-04-13

前の記事

地理院地図の導入

 通常、インターネットであれば、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:」のように入力すると確認できる

レイヤーについて

 下図を見たことはあるだろうか?
_20190413_092027.JPG

 それぞれ、選択すると自分が必要とする情報が地図上に表示される。
 この機能のことをレイヤー機能という。
 今回は、これを追加しようという話だ。
 ここに関する記述は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
 ご覧のとおりごちゃごちゃしていてわかりづらい。
 纏めると主に3つのファイルで構成されいる。他機関の情報の空港の周辺空域を参考に見ていく。
 まず、情報をクリックすると出てくる
_20190413_094929.JPG
 これを表示させるファイル。
 そして、他機関の情報をクリックすると出てくる
_20190413_094901.JPG
 こいつを、表示させるファイル。
 最後に、空港の周辺空域をクリックすると表示される
_20190413_094819.JPG
 このポリゴンだ。
 それぞれ順番にレイヤーグループレイヤー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"
    }
]

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

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

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2