如何确保标签与GeoJSON对齐

Question

我有一个非常大的地图项目，它使用标签(只有来自mapbox的标签。也就是说，我没有从mapbox获得任何边界或地形。)

我使用mapbox-gl-leaflet将这些矢量瓦片带入Leaflet。

一般来说，每件事都运行得很好。但是，一旦地图的高度大于宽度，标签就不再与国家对齐(已使用GeoJSON绘制为多边形)。这是一张图片，展示了发生了什么，相关代码是带有未对齐标签的map with labels not alignted的below.map

任何想法或见解都会有所帮助。下面是引入磁贴的代码：

settings.globalVariables.labelTiles = L.mapboxGL({
    accessToken: myAccessToken,
    style: 'mapbox://styles/markslawton/ckgsqyzhi0diy19rwi98mlt4g',
   pane: 'labels',
}).addTo(settings.globalVariables.map);

下面是创建地图的代码：

 Window.map = settings.globalVariables.map = new L.map('map', {
        zoomControl: false,
        zoomDelta: settings.map.zoomDelta,
        zoomSnap: settings.map.zoomSnap,
        minZoom: settings.map.minZoom,
        maxZoom: settings.map.maxZoom,
        dragging: true,
        trackResize: true,
        attributionControl: false,
        // maxBounds:[[-90,-180],[90,180]] 
    });

Answer 1

我不能百分之百确定，但我怀疑问题出在地图的北/南边界上。Mapbox受限于Web墨卡托投影，最高纬度约为85º/-85º。从您这里的图像判断，您正在尝试显示那里以北的纬度。

您可能需要使用更严格的边界来约束地图的边界，或者增加最小缩放，这样就不会出现这种情况。