使用任意多边形遮罩mapbox-gl地图

Question

我正在使用 mapbox-gl 并从 osm2vectortiles.org 下载矢量切片

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

我可以想象几种解决这个问题的方法，但每条路都没有给我答案。以下是我尝试研究的一些方法：

1. 某种地图遮蔽层。 （这个概念好像不存在）
2. 绘制多边形并在其外部填充而不是在其内部。 （好像只能填充多边形内部）
3. 围绕地图的外边界绘制一个填充框，并剪出多边形。 （多重多边形特征似乎是堆叠而不是切口）
4. 修改 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
});

请注意，似乎存在 一个错误，您需要将

fill-opacity

设置为类似

0.999

的内容