Mapbox GL 在縮放時切斷圖層

Question

編輯：在優化我的 GeoJson 文件並上傳由 Tippecanoe 創建的 .mbtile 之后，我仍然遇到同樣的問題，更具體地說，這取決於我對多邊形進行了多少縮放，將多邊形切割成一種或另一種尺寸。

好的

錯誤的

我已經重現了錯誤，因此您可以在stackblitz中看到完整的代碼。

原始問題：我正在從 Mapbox Studio 中上傳的 tileset 動態創建源。 我的目標是顯示西班牙各省的 map 邊界，這樣，當我單擊其中一個省時，會創建一個僅顯示該省邊界的新圖層。

從 tileset 加載數據工作正常，但是當我點擊一個省份創建一個新層時，它被切割，就好像它被分成兩部分一樣。 事實上，有時它會在左側顯示剪切層，有時在右側顯示剪切層。

1. Tileset 正確加載

2. 點擊省份后，圖像被截斷。

3.在某些情況下，顯示的切割部分是相反的

相關代碼。 首先，我在加載 map 時添加源代碼：

 this.map.on('load', () => {
       this.map.addSource('provinceClicked', {
          'type': 'geojson',
          'data': {
            'type': 'FeatureCollection',
            'features': [] 
            
          }  
        });

然后，我在用戶點擊省份時創建一個圖層。

 // "provincias_fill" is a layer previously created from another source (Works correctly)
 this.map.on('click', 'provincias_fill', (e)=>{ 

  this.map.getSource('provinceClicked').setData({ 
    "type": "FeatureCollection",
    "features": [
      {
        "type": "Feature",
        "geometry": {
          "type": "Polygon",
          "coordinates": e.features[0].geometry.coordinates
        } 
      }
  ] 
  })     
  //Fill layer with blue background
  this.map.addLayer({
    'id': 'mainLine',
    'type': 'fill',
    'source': 'provinceClicked', // reference the data source
    'layout': {},
    'paint': {
      'fill-color': '#0080ff', // blue color fill
      'fill-opacity': 0.1
    }
  });

  // Add a black outline around the polygon.
  this.map.addLayer({
    'id': 'outline',
    'type': 'line',
    'source': 'provinceClicked',
    'layout': {},
    'paint': {
      'line-color': '#000',
      'line-width': 3
    } 
  });  
});

我得到這個 例子來創建一個帶有以前坐標的圖層，這個用來動態創建一個源。

我究竟做錯了什么？ 我歡迎對此發表任何評論。 祝大家節日快樂。

Answer 1

嘗試為數據集中的每個省分配唯一標識符（作為鍵：值）。 然后通過在加載時通過addSource()中的 promoteId 提供密鑰來通知 Mapbox 在加載要素時使用此標識符。

例如：

 this.map.on('load', () => {
     this.map.addSource('provinceClicked', {
       'type': 'geojson',
       'data': {
         'type': 'FeatureCollection',
         'features': [] 
       },
       promoteId: {"sourceLayerId": key}
  });

另見Mapbox Layer features duplicate IDs