时间戳

首页 > 解决方案 > 如何使用 TileServer-GL 或 OpenMapTiles 服务器将多个 .pbf 文件而不是 .mbtiles 作为矢量切片提供到使用 Deck.GL MVTLayer 的 Google 地图中？

google-maps - 如何使用 TileServer-GL 或 OpenMapTiles 服务器将多个 .pbf 文件而不是 .mbtiles 作为矢量切片提供到使用 Deck.GL MVTLayer 的 Google 地图中？

问题描述

概括

我有 .geojson 文件并希望将它们（使用tippecanoe / geobuf / other）转换为 .mbtiles 或 .pbf 文件，以将它们作为来自服务器（TileServer-GL / OpenMapTiles / 其他矢量瓷砖服务器）的矢量瓷砖提供给谷歌地图Deck.GL的MVTLayer。

预期成绩：

  1. 能够从 TileServer-GL .pbf 文件而不是 .mbtiles 文件提供服务。
  2. 能够从 TileServer-GL 提供来自文件夹的多个 .mbtiles（或 .pbf）文件，而无需使用特定的 .mbtiles 文件显式启动它。

实际结果：

  1. 如下所示，我正在使用带有 Deck.GL MVTLayer与矢量平铺集成的谷歌地图，以提供来自 TileServer-GL 的特定 .mbtiles 文件，作为形状或点的集合。
  2. 什么都没管。

我的尝试

const map = new google.maps.Map(document.getElementById('container'), {
        center: { lat: 51.47, lng: 0.45 },
        zoom: 10
    });
const deckOverlay = new deck.GoogleMapsOverlay({
        layers: [
            new deck.MVTLayer({
                //working               
                data: `http://localhost:8080/data/SA1_2016-AU-tippecanoe/{z}/{x}/{y}.pbf`,
                //expected, but server NOT starting
                //data: `http://localhost:8080/data/SA1_2016-AU-geobuf/{z}/{x}/{y}.pbf`,

                minZoom: 0,
                maxZoom: 23,
                getLineColor: [1, 1, 1],
                getFillColor: [0, 153, 76],
                pickable: true,
                autoHighlight: true,
                onClick: info => info.object && console.log('onClick', info.object)
            })
        ]
    });
deckOverlay.setMap(map);

我从 Docker 运行 TileServer-GL，从包含数据文件的文件夹：

docker run --rm -it -v ${pwd}:/data -p 8080:80 maptiler/tileserver-gl --verbose --mbtiles SA1_2016-AU-tippecanoe.mbtiles

在 Docker 中，我通过 tippecanoe 将 .geojson 文件转换为 .mbtiles 文件。但是，对于更大的文件，转换似乎需要一些时间。我在 aprox 中获得了一个 890 MB 的 .mbtiles 文件。45 MB .geojson 文件 60 分钟，包含 57k 个功能。

docker run -it --rm -v ${pwd}:/data tippecanoe:latest tippecanoe --output=/data/SA1_2016-AU-tippecanoe.mbtiles /data/SA1_2016-AU.geojson

我设法通过 geobuf (json2geobuf) 更快地将 .geojson 文件直接转换为 .pbf 文件。我在 aprox 中获得了一个 32 MB 的 .pbf 文件。45 MB .geojson 文件 37 秒，包含 57k 个特征。

json2geobuf SA1_2016-AU.geojson > SA1_2016-AU-geobuf.pbf

但是，我似乎无法直接从 TileServer-GL 或 OpenMapTiles-Server 提供 .pbf 文件。

我试过了

docker run --rm -it -v ${pwd}:/data -p 8080:80 maptiler/tileserver-gl --verbose --mbtiles SA1_2016-AU-geobuf.pbf

但是 TileServer-GL 没有启动，我得到了

ERROR: Metadata missing in the MBTiles.
       Make sure SA1_2016-AU-geobuf.pbf is valid MBTiles

我还尝试在本地创建 config.json 文件后重新运行

docker run --rm -it -v ${pwd}:/data -p 8080:80 maptiler/tileserver-gl --verbose --mbtiles SA1_2016-AU-geobuf.pbf
docker run --rm -it -v ${pwd}:/data -p 8080:80 maptiler/tileserver-gl --verbose SA1_2016-AU-geobuf.pbf

配置文件

{
  "options": {
    "paths": {
      "root": "/usr/src/app/node_modules/tileserver-gl-styles",
      "fonts": "fonts",
      "styles": "styles",
      "mbtiles": "/data"
    }
  },
  "styles": {},
  "data": {
    "SA1_2016-AU-geobuf": {
      "mbtiles": "SA1_2016-AU-geobuf.pbf"
    }
  }
}

但是 TileServer-GL 没有启动，我得到了

SQLITE_NOTADB: file is not a database

在 OpenMapTiles 服务器上，我什至找不到如何指定输入文件（参考）：

docker run --rm -it -v ${pwd}:/data -p 8080:80 klokantech/openmaptiles-server

我的问题

  1. 如何使用 TileServer-GL 或 OpenMapTiles 服务器直接提供 .pbf 文件而不是 .mbtiles 文件？
  2. 如何使用 TileServer-GL 从文件夹中提供所有文件 (.mbtiles)，而无需使用特定的 .mbtiles 文件显式启动它docker ... maptiler/tileserver-gl --mbtiles some-file.mbtiles？

标签： google-mapsmbtilesdeck.glvector-tilestileserver-gl

解决方案

Geobuf pbf 不是平铺数据集，而是与 geojson 相比更小更紧凑的二进制形式（https://github.com/mapbox/geobuf/blob/master/README.md#geobuf）。您仍然需要通过tippecanoe 运行该geobuf 以在z/x/y 平铺方案（https://github.com/mapbox/tippecanoe#input-files-and-layer-names）中创建一个mbtiles 或pbf 目录。

如果您使用 将该geojson 转换为ndjson，您会看到tippecanoe 的运行速度更快tippecanoe-json-tool input.geojson > output_nd.geojson，使用该-P标志将output_nd.geojson 并行处理为mbtiles。如果tippecanoe 的输入是geobuf 文件（https://github.com/mapbox/tippecanoe#parallel-processing-of-input），则默认情况下也会启用tippecanoe 并行处理。使用 ndjson 文件的简单tippecanoe cmd 将是tippecanoe -t /dev/shm -o output.mbtiles -P -Z 1 -z 12 --drop-smallest-as-needed output_nd.geojson.

至于 tileserver-gl，您可以根据需要提供任意数量的 mbtiles 文件，但您需要提供自己的 config.json，将其挂载到容器中，并使用cmd中的标志-v ${pwd}/config:/config显式调用它。--configdocker run

像下面这样的简单 shell 脚本将允许对样式进行更精细的粒度控制，如果使用自定义样式，如果使用自定义字体，则可以控制字体，如果使用自定义精灵，则可以控制精灵，以及您的数据和配置文件。

#!/usr/bin/env bash

TILESERVER_HOME=/tileserver-gl

DATA_DIR=${TILESERVER_HOME}/mbtiles/
CONFIG_DIR=${TILESERVER_HOME}/config/
STYLE_DIR=${TILESERVER_HOME}/styles/
SPRITES_DIR=${TILESERVER_HOME}/sprites/
FONT_DIR=${TILESERVER_HOME}/fonts/

docker stop tileserver-gl && docker rm tileserver-gl

docker run --log-driver json-file --log-opt compress=true --log-opt max-size=100m --log-opt max-file=3 -d --name tileserver-gl --restart=always -v ${SPRITES_DIR}:/sprites -v ${DATA_DIR}:/data -v ${STYLE_DIR}:/styles -v ${FONT_DIR}:/fonts -v ${CONFIG_DIR}:/config -p 0.0.0.0:8080:80 maptiler/tileserver-gl:latest --verbose --config /config/config.json

与上述 docker cmd 一起列出多个 mbtiles 文件的示例 config.json。

{
    "options": {
        "paths": {
            "root": "",
            "fonts": "../fonts",
            "mbtiles": "../data",
            "styles": "../styles",
            "sprites": "../sprites"
        }
    },
    "data": {
        "STREETS": {
            "mbtiles": "STREETS.mbtiles"
        },
        "LANDMASS": {
            "mbtiles": "LANDMASS.mbtiles"
        },
        "CONTOUR": {
            "mbtiles": "CONTOUR.mbtiles"
        },
        "HILLSHADE": {
            "mbtiles": "HILLSHADE.mbtiles"
        },
        "OSM": {
            "mbtiles": "OSM.mbtiles"
        }
    },
    "styles": {
        "STREETS": {
            "style": "STREETS/style.json",
            "serve_data": true,
            "serve_rendered": true,
            "tilejson": {
                "format": "png",
                "bounds": [
                    -120,
                    -50,
                    160,
                    80
                ]
            }
        },
        "OSM-POSITRON": {
            "style": "OSM-POSITRON/style.json",
            "serve_data": true,
            "serve_rendered": true,
            "tilejson": {
                "format": "png",
                "bounds": [
                    4.3026,
                    48.6085,
                    4.42742,
                    48.707
                ]
            }
        }
    }
}

推荐阅读