TileServerの構築と別コンテナからのMaplibreでのアクセス

Posted at 2025-01-28

WEBサーバーの設定

index.html

<html>
<head>
    <script src="https://unpkg.com/maplibre-gl@^5.0.1/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/maplibre-gl@^5.0.1/dist/maplibre-gl.css" rel="stylesheet" />
    <style>
        body {
            margin: 0;
            padding: 0;
        }
    
        html,
        body,
        #map {
            height: 80%;
            width: 80%;
        }
    </style>
</head>

<p>test</p>

<div id="map"></div>
<script>
    var map = new maplibregl.Map({
        container: 'map', // container id
        style: "style.json", // style URL
        center: [140.084556, 36.104611],
        zoom: 10, // starting zoom
    });
    //map.addControl(new maplibregl.NavigationControl());
</script>
</html>

style.json

tileserver-glにlocalhost:8080でアクセスし、inspectの動作を確認。あたりをつけて、/usr/src/app/public/templates/data.tmplにデバッグプリントを追加。そこでmapオブジェクトを表示してstyleを確認。確認したstyleをWEBサーバのstyle.jsonに反映。source-layerに何を指定するのか悩んでいたが、inspectモードでのデバッグ出力を元に設定したら表示できた。

{
    "version": 8,
    "name": "MapLibre Demo Tiles",
    "metadata": {
        "openmaptiles:version": "3.x"
    },
    "glyphs":"{fontstack}/{range}.pbf",
    "sources": {
        "openmaptiles": {
            "type": "vector",
            "tiles": [
                "http://localhost:8080/data/output/{z}/{x}/{y}.pbf"
            ],
            "maxzoom": 10,
            "attribution": "<a href=\"https://maps.gsi.go.jp/vector/\" target=\"_blank\">地理院地図Vector（仮称）</a>"
        }
    },
    "layers": [
        {
            "id": "water-layer",
            "type": "fill",
            "source": "openmaptiles",
            "source-layer": "waterarea",
            "paint": {
                "fill-color": "#0000FF",
                "fill-opacity": 0.4
            }            
        },
        {
            "filter":[
              "all",
              [
                "==",
                "$type",
                "Polygon"
              ]
            ],
            "id":"vector_layer__data-output_polygon",
            "paint":{
              "fill-color":"rgba(214, 2, 229, 0.3)",
              "fill-antialias": true,
              "fill-outline-color": "rgba(214, 2, 229, 0.3)"
            },
            "source":"openmaptiles",
            "source-layer":"data-output",
            "type":"fill"
          },
          {
            "filter":[
              "all",
              [
                "==",
                "$type",
                "LineString"
              ]
            ],
            "id":"vector_layer__data-output_line",
            "layout": {
              "line-join": "round",
              "line-cap": "round"
            },
            "paint":{
              "line-color":"rgba(214, 2, 229, 0.6)"
            },
            "source":"openmaptiles",
            "source-layer":"data-output",
            "type":"line"
          },
          {
            "filter":[
              "all",
              [
                "==",
                "$type",
                "Point"
              ]
            ],
            "id":"vector_layer__data-output_circle",
            "paint":{
              "circle-color":"rgba(214, 2, 229, 0.8)",
              "circle-radius": 2
            },
            "source":"openmaptiles",
            "source-layer":"data-output",
            "type":"circle"
          }
    ]
}

tileserver

mbtilesの作成

国土地理院のベクタータイルを取得し、tippecanoe-decodeでgeojsonにする。geojsonファイルのあるディレクトリでtippercanoeを実行(ここで前述のレイヤーを単一に指定しているが、試行錯誤していた際はレイヤーの指定をしていなかった)。結果として、一つ上のディレクトリにoutput.mbtilesができる。

ls -1 | grep geojson | xargs tippecanoe -o ../output.mbtiles -zg --drop-densest-as-needed --extend-zooms-if-still-dropping --no-tile-compression -l data-output

起動コマンド

configの指定はなくても動作する。
/usr/src/app/src# node main.js -V --file /data/output.mbtiles

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up