具有任意多边形的 Mask mapbox-gl 地图

Question

我正在使用 mapbox-gl 并从 osm2vectortiles.org

下载矢量切片

我想让地图只在已知的多边形内可见，但找不到任何方法来实现。

我可以想出几种解决问题的方法，但每条路径都让我找不到答案。以下是我尝试研究的一些方法：

某种地图遮罩层。（概念似乎不存在）
绘制多边形并填充外部而不是内部。（好像只能在多边形内部填充）
在地图的外边界周围绘制一个填充框，并剪下多边形。（MultiPolygon Features 似乎堆叠而不是 cutout）
修改 mbtiles 以假装多边形之外的一切都是水。（https://github.com/mapbox/mbtiles-cutout 看起来很有希望，但我似乎无法让它发挥作用）

解决这个问题的正确方法是什么？

Answer 1

您提到的所有选项都可以使用。您可以剪切原始矢量数据以适合蒙版区域（如选项 4 中所示），或者您可以在数据之上绘制蒙版层（选项 3）。

以下是使用遮罩层的方法：

https://jsfiddle.net/kmandov/cr2rav7v/

将蒙版添加为填充层：

 map.addSource('mask', {
    "type": "geojson",
    "data": polyMask(mask, bounds)
  });

  map.addLayer({
    "id": "zmask",
    "source": "mask",
    "type": "fill",
    "paint": {
      "fill-color": "white",
      'fill-opacity': 0.999
    }
  });

您可以提前创建蒙版（例如使用 QGis 或 turf），或者您可以使用 turf:

直接在浏览器中剪切蒙版

function polyMask(mask, bounds) {
  var bboxPoly = turf.bboxPolygon(bounds);
  return turf.difference(bboxPoly, mask);
}

var bounds = [-122.5336, 37.7049, -122.3122, 37.8398]; // wsen 

var mask = turf.polygon([
  [
    [-122.43764877319336,
      37.78645343442073
    ],
    [-122.40056991577148,
      37.78930232286027
    ],
    [-122.39172935485838,
      37.76630458915842
    ],
    [-122.43550300598145,
      37.75646561597495
    ],
    [-122.45378494262697,
      37.7781096293495
    ],
    [-122.43764877319336,
      37.78645343442073
    ]
  ]
]);

您可能希望通过提供 maxBounds:

来防止用户超出掩码边界

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v9',
  center: [-122.42116928100586, 37.77532815168286],
  maxBounds: bounds,
  zoom: 12
});

请注意，似乎有 a bug，您需要将 fill-opacity 设置为 0.999

具有任意多边形的 Mask mapbox-gl 地图

Mask mapbox-gl map with arbitrary polygon

mapbox-gl