使用任意多边形

Question

我正在使用mapbox-gl并从osm2vectortiles.org下载了矢量图块

我想让地图仅在已知多边形内可见，并且无法找到任何方法将其拉出。

我可以想象有几种方法可以解决这个问题，而且每条道路都让我无法回答。以下是我试图研究的一些方法：

1. 某种地图遮罩层。 （概念似乎不存在）
2. 绘制多边形并填充外部而不是内部。 （似乎只能填充多边形内部）
3. 围绕地图的外边界绘制一个填充框，并剪切多边形。 （MultiPolygon功能似乎堆叠而不是切口）
4. 修改mbtiles，假装多边形外的所有东西都是水。 （https://github.com/mapbox/mbtiles-cutout似乎很有希望，但我似乎无法让它发挥作用）

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

Answer 1

您提到的所有选项都可以使用。您可以剪切原始矢量数据以适合遮罩区域（如选项4中所示），也可以在数据顶部绘制遮罩层（选项3）。

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

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

将面具添加为填充图层：

findCreatedTask.then(function(res){
   //do your thing
}).catch(function(err){
   console.error(err.stack);
});

您可以提前创建面具（例如使用QGis或草皮），也可以使用turf直接在浏览器中剪切面具：

 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
    }
  });

或许，您希望通过提供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

请注意，似乎有a bug，您需要将var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/light-v9', center: [-122.42116928100586, 37.77532815168286], maxBounds: bounds, zoom: 12 }); 设置为fill-opacity