破碎的原型图（pmtiles）河流渲染，传单和maplibregl

Question

我正在尝试使用 Apache 提供的自托管 Protomaps 文件来设置 OpenStreetMap。

Leaflet 和 MaplibreGL 也会出现同样的错误。 maplibreGL 是我想在应用程序中使用的。

我尝试从页面中删除所有样式表（地图容器的一些大小调整除外）以确保我们的样式不会导致问题，但结果是相同的。

package.json 中的版本：

"maplibre-gl": "^4.7.1",
    "pmtiles": "^3.2.0",

地图显示可导航，但河流和水体渲染不正确，就好像 SVG 路径的某些部分被直线封闭一样。

我的 Firefox 和 Chrome 也有同样的错误。河流的破碎方式会随着缩放级别的变化而变化，但永远不会正确。

文件

/osm/my_area.pmtiles

是使用pmtiles工具下载的。示例代码由各种示例组成。它是 1.4GB，所以我无法在这里上传。

pmtiles verify

显示没有错误。

DATE='20240922'
AREA=11.958618,48.520243,18.918457,51.120765
pmtiles extract https://build.protomaps.com/$DATE.pmtiles my_area.pmtiles --bbox=$AREA

我如何渲染地图：

import { Protocol } from "pmtiles";
import maplibregl from "maplibre-gl";

function initMaps() {

        let protocol = new Protocol();
        maplibregl.addProtocol("pmtiles", protocol.tile);

        const mapOpts = {
            style: {
                version: 8,
                sources: {
                    selfhosted: {
                        type: "vector",
                        // url: "pmtiles://https://example.com/example.pmtiles",
                        url: "pmtiles:///osm/my_area.pmtiles", // http://fb.local
                    }
                },

                layers: [
                    {
                        id: "water",
                        source: "selfhosted",
                        "source-layer": "water",
                        type: "fill",
                        paint: {
                            "fill-color": "#80b1d3",
                        },
                    },
                    {
                        id: "buildings",
                        source: "selfhosted",
                        "source-layer": "buildings",
                        type: "fill",
                        paint: {
                            "fill-color": "#d9d9d9",
                        },
                    },
                    {
                        id: "roads",
                        source: "selfhosted",
                        "source-layer": "roads",
                        type: "line",
                        paint: {
                            "line-color": "#fc8d62",
                        },
                    },
                    {
                        id: "pois",
                        source: "selfhosted",
                        "source-layer": "pois",
                        type: "circle",
                        paint: {
                            "circle-color": "#ffffb3",
                        },
                    },
                ],
            },
            container: document.getElementsByClassName('Map')[0],
            center: [this.data.lng, this.data.lat], // starting position [lng, lat]
            zoom: this.data.zoom, // starting zoom
        };

        console.log(mapOpts);

        let map = new maplibregl.Map(mapOpts);

        map.showTileBoundaries = true;
}

Answer 1

使用旧版本的地图，如下面的命令。当前的地图有问题

pmtiles 提取https://build.protomaps.com/20240919.pmtiles my_area.pmtiles --bbox=$AREA