使用任意多边形掩盖mapbox-gl地图

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/

将面具添加为填充图层:

 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或草皮),也可以使用草皮直接在浏览器中剪切面具:

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