面膜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或草皮），或者您可以使用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