在tileserver-gl部署多mbtiles，maplibre-gl-js叠加图层报错求助

你这里的核心错误是把样式文件（style.json）当成了矢量瓦片的源地址，MapLibre的vector类型source需要指向TileJSON格式的瓦片服务地址，而不是样式文件。以下是具体解决步骤：

1. 获取正确的TileJSON地址 #

tileserver-gl会为每个mbtiles文件自动生成TileJSON接口，地址格式为：

http://localhost:8080/data/{你的mbtiles文件名（不带.mbtiles后缀）}.json

你的data-point.mbtiles对应的TileJSON地址是：

http://localhost:8080/data/data-point.json

2. 修正MapLibre代码 #

替换错误的source地址，并根据需求调整图层为fill-extrusion类型（如果需要展示3D效果）：

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

map.on("load", (e) => {
    // 替换为TileJSON地址
    map.addSource("data-point", {
        type: "vector",
        url: "http://localhost:8080/data/data-point.json",
    });

    // 添加fill-extrusion图层（如果需要3D效果）
    map.addLayer({
        id: "data-point-extrusion",
        source: "data-point",
        "source-layer": "data-point", // 与tippecanoe的-l参数一致，正确
        type: "fill-extrusion",
        layout: {
            visibility: "visible",
        },
        paint: {
            "fill-extrusion-color": "#7a4a39",
            // 如果你的GeoJSON有高度属性，用["get", "height"]；否则写固定值比如20
            "fill-extrusion-height": 20,
            "fill-extrusion-base": 0,
            "fill-extrusion-opacity": 0.7
        }
    });
});

3. 额外排查点 #

• 验证TileJSON可用性：直接在浏览器打开http://localhost:8080/data/data-point.json，能返回JSON数据则服务正常。
• CORS跨域问题：如果浏览器控制台报跨域错误，启动Docker时添加CORS参数：

  docker run -p 8080:8080 -v $(pwd)/data:/data --env CORS=* maptiler/tileserver-gl
  

• 缩放范围匹配：你的tippecanoe命令设置了-Z4 -z11，只有在地图缩放级别4-11之间才能看到瓦片，确保当前缩放范围符合要求。

内容的提问来源于stack exchange，提问作者Abdullah Gürsoy