Mapbox GL 在缩放时切断图层答案

【问题标题】：Mapbox GL cut off the layer when zoomingMapbox GL 在缩放时切断图层
【发布时间】：2023-01-20 18:25:01
【问题描述】：

编辑：在优化我的 GeoJson 文件并上传由 Tippecanoe 创建的 .mbtile 之后，我仍然遇到同样的问题，更具体地说，这取决于我进行了多少缩放，多边形被切割成一种尺寸或另一种尺寸。

WRONG

我已经重现了错误，因此您可以在中看到完整的代码stackblitz。

原始问题：我正在从 Mapbox Studio 中上传的 tileset 动态创建源。我的目标是显示西班牙各省的地图边界，这样，当我单击其中一个省时，会创建一个仅显示该省边界的新图层。

从 tileset 加载数据工作正常，但是当我点击一个省创建一个新层时它被切割，就好像它被分成两部分.事实上，有时它会在左侧显示剪切层，有时在右侧显示剪切层。

1. Tileset loaded correctly

2. After clicking on a province, the image is cut off.

3. In some cases, the part of the cut shown is the reverse

相关代码。首先我在加载地图时添加源：

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

我得到这个 example 来创建一个具有以前坐标的图层，并得到 this one 来动态创建源。

我究竟做错了什么？我欢迎任何关于此的 cmets。祝大家节日快乐。

【问题讨论】：

您的 GEOJson 来源有多大？这是否仍然发生在较小的层上？
非常感谢您的评论。问题很可能出自那里。之前我用 MapboxDraw 创建了一个多边形图层，效果很好。我刚刚意识到城市的检测不是很准确，根据我的阅读，这可能是由于 geojson 大小过大。因此，我应该阅读此文档working with large geojson 并重试。我会用任何消息更新帖子。

标签： angular dictionary layer mapbox-studio

【解决方案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

【讨论】：