mapbox：避免在低缩放比例下重复图层

Question

我遇到了图层在低缩放比例下复制的问题。

使用mapbox-gl-leaflet，它结合了mapbox地图和leaflet。但首先我使用的是 mapbox 图层，所以问题似乎出在 mapbox 中。

这是代码示例：

var map = L.map('map',  {minZoom: 1 }).setView([38.912753, -77.032194], 1);

var gl = L.mapboxGL({
    accessToken: "access_token",
    style: 'mapbox://styles/mapbox/bright-v8'
}).addTo(map);

gl._glMap.on('load', () => {

  gl._glMap.addLayer({
   "id": "line-example",
    "type": "line",
    "source": {
      "type": "geojson",
        "data": {
          "type": "Feature",
          "properties": {},
          "geometry": {
            "type": "LineString",
            "coordinates": [[28.2, 60.0], [-10, -13]]
          }
        }
    },
    "layout": {
      "line-join": "round",
      "line-cap": "round"
    },
    "paint": {
      "line-color": "rgba(13, 12, 39, .7)",
      "line-width": 6
    }
  });
});

结果如下：

如何通过复制解决这个问题？我需要我的图层只出现在一个 'world'.

中

Answer 1

尝试加入 maxBounds [ [-180, -85], [180, 85] ]

Answer 2

您可以通过将 renderWorldCopies 设置为 false 来防止地图渲染世界（和图层）的多个副本。

像这样的东西会起作用：

var gl = L.mapboxGL({
    accessToken: "access_token",
    style: 'mapbox://styles/mapbox/bright-v8',
    renderWorldCopies: false,
}).addTo(map);

有关更多选项，请在此处查看 API 规范：https://docs.mapbox.com/mapbox-gl-js/api/

mapbox：避免在低缩放比例下重复图层

mapbox: avoiding of a duplication layers at low zoom scale

javascript

mapbox

mapbox-gl-js