mapbox-gl - 具有任意多边形的掩模mapbox-gl map

Question

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

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

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

1. 某种 map 遮蔽层。 (这个概念似乎不存在)
2. 绘制多边形并在其外部填充，而不是在其内部填充。 (似乎只能填充多边形内部)
3. 围绕 map 的外边界绘制一个填充框，并剪出多边形。 (多多边形特征似乎是堆叠而不是切口)
4. 修改 mbtiles 以假装多边形之外的所有内容都是水。 ( https://github.com/mapbox/mbtiles-cutout 看起来很有希望，但我似乎无法让它发挥作用)

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

Answer 1

您提到的所有选项都可以使用。您可以剪切原始矢量数据以适合 mask 区域(如选项 4)，也可以在数据之上绘制 mask 层(选项 3)。

以下是使用 mask 层的方法:

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