自托管Protomaps(pmtiles)文件渲染河流及水体异常求助

问题现象 #

• 基于Apache搭建自托管Protomaps文件服务的OpenStreetMap，在Leaflet和MaplibreGL中均出现水体渲染异常，当前使用MaplibreGL开发
• 已移除页面所有样式表（仅保留地图容器尺寸样式）排除样式干扰，问题依旧存在
• 地图可正常显示和导航，但河流及水体渲染异常，表现为SVG路径部分区域被直线闭合；该问题在Firefox和Chrome中均存在，随缩放层级变化表现不同，但始终无法正常渲染

依赖版本 #

package.json中的版本信息：

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

PMTiles文件相关 #

• /osm/my_area.pmtiles文件通过pmtiles工具下载，执行pmtiles verify未检测到错误，文件大小1.4GB
• 下载命令：

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], // 初始位置 [lng, lat]
            zoom: this.data.zoom, // 初始缩放级别
        };

        console.log(mapOpts);

        let map = new maplibregl.Map(mapOpts);
        map.showTileBoundaries = true;
}

内容的提问来源于stack exchange，提问作者MightyPork