在tileserver-gl上提供多个mbtile并在maplibre-gl-js上显示

Question

我试图在openstreet地图上显示一些历史建筑作为“填充挤压”。

我从 openstreetmap 数据创建了

.mbtiles

文件，并成功使用 docker 中的tileserver-gl 提供服务。

例如，我从 QGIS 软件中选定的图层生成了 GEOJSON 文件。这是示例：

{
"type": "FeatureCollection",
"name": "data-point",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "id": 0 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 29.015668875189068, 41.026780641384377 ], [ 29.015790594155771, 41.026870280145893 ], [ 29.01577030766132, 41.026896515857878 ], [ 29.015796390297041, 41.026916192635007 ], [ 29.01576740959068, 41.026957732478543 ], [ 29.015836963285938, 41.02699271337908 ], [ 29.015897822769293, 41.026944614636051 ], [ 29.016060114724898, 41.027049557302824 ], [ 29.016207916327321, 41.026922751559404 ], [ 29.016164445267787, 41.026887770621705 ], [ 29.01627747002258, 41.026756591939808 ], [ 29.015921007334384, 41.026524842296475 ], [ 29.015668875189068, 41.026780641384377 ] ] ] ] } },
{ "type": "Feature", "properties": { "id": 1 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 29.015263145300057, 41.026811249755688 ], [ 29.015338495136586, 41.026885584312488 ], [ 29.015454417962019, 41.026819995002029 ], [ 29.01537617005485, 41.026741287743228 ], [ 29.015263145300057, 41.026811249755688 ] ] ] ] } },
{ "type": "Feature", "properties": { "id": 2 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 29.016080401219345, 41.027202598392073 ], [ 29.01626587774004, 41.027458394847159 ], [ 29.016564379015527, 41.027327217302023 ], [ 29.016387596706743, 41.027069234034229 ], [ 29.016080401219345, 41.027202598392073 ] ] ] ] } },
{ "type": "Feature", "properties": { "id": 3 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 29.014687566669025, 41.024866606412886 ], [ 29.01493116733193, 41.025043701700469 ], [ 29.015400652245884, 41.024689510649033 ], [ 29.015165909788898, 41.024505731522638 ], [ 29.014687566669025, 41.024866606412886 ] ] ] ] } }
]
}

然后我使用下面的命令将这个 geojson 转换为 mbtiles ：

tippecanoe -Z4 -z11 -f -F -ps -pf -pk -pc -pt -Bg -d14 -o data-point.mbtiles -l "data-point" data-point.geojson 它会生成

data-point.mbtiles

我将此文件添加到

/data

 文件夹并创建自定义 

style.json

 文件：

{
  "version": 8,
  "name": "Data Point",
  "metadata": {},
  "center": [
    0,
    0
  ],
  "zoom": 1,
  "bearing": 0,
  "pitch": 0,
  "sources": {
    "data-point": {
      "type": "vector",
      "url": "mbtiles://{data-point}"
    }
  },
  "layers": [
    {
      "id": "data-point",
      "source": "data-point",
      "source-layer": "data-point",
      "type": "fill-extrusion",
      "paint": {
        "fill-extrusion-color": "#aaa",
        "fill-extrusion-height": 15,
        "fill-extrusion-base": 0
      },
      "layout": {
        "visibility": "visible"
      }
    }
  ]
}

并创建配置文件：

{
  "options": {
    "paths": {
      "root": "/data",
      "fonts": "fonts",
      "styles": "styles",
      "mbtiles": "/data"
    }
  },
  "styles": {
    "osm-bright-gl-style": {
      "style": "openmaptiles/osm-bright-gl-style/style-local.json",
      "tilejson": {
        "bounds": [11.22404, 51.35252, 14.77917, 53.5784]
      }
    },
    "data-point": {
      "style": "data-point/style.json",
      "tilejson": {
        "bounds": [11.22404, 51.35252, 14.77917, 53.5784]
      }
    }
  },
  "data": {
    "v3": {
      "mbtiles": "output.mbtiles"
    },
    "data-point": {
      "mbtiles": "data-point.mbtiles"
    }
  }
}

如果我可以在我的

maplibre

中添加tileserver-gl生成的样式文件，

new Map({
    style: `http://localhost:8080/styles/data-point/style.json`,
    center: [initialState.lng, initialState.lat],
    zoom: initialState.zoom,
})

我可以在浏览器中成功看到我的数据。

但是如果我添加生成的tileserver-gl

style file

作为图层，

new Map({
    style: `http://localhost:8080/styles/osm-bright-gl-style/style.json`,  **// this is osm from tileserver-gl**
    center: [initialState.lng, initialState.lat],
    zoom: initialState.zoom,
})


map.on("load", (e) => {
    map.addSource("data-point", {
        type: "vector",
        url: "http://localhost:8080/styles/data-point/style.json",  /**/this is custom mbtiles from tileserver-gl**
    });

    // add an additional layer style for our vector data
    map.addLayer({
        id: "data-point-fill",
        source: "data-point",
        "source-layer": "data-point",
        type: "fill",
        layout: {
            visibility: "visible",
        },
    });
});

我收到此错误。我不确定这个错误是由maplibre引起的，因为服务器数据可能是错误的。

感谢您的评论和帮助。

Answer 1

我使用了这个网址http://localhost:8080/data/data-point.json，它是从样式文件中检查的并且它有效。