在没有轮廓的Mapbox GL JS中渲染GeoJSON填充图层

Question

以下是我在纽约市美国人口普查区块集团地区的Mapbox GL JS所做的一个等式：

我想摆脱所有多边形周围的1px轮廓。根据{{​​3}}中的建议，我向'fill-outline-color': 'rgba(0,0,0,0)'选项添加了paint。这接近删除边框但留下了许多不良的视觉效果（白点）：

this issue

是否可以在不引入视觉伪像的情况下从多边形中删除轮廓？这是我的地图配置：

map.addSource('blocks', {
  type: 'geojson',
  data: geojson,
});

map.addLayer({
  'id': 'blocks',
  'type': 'fill',
  'source': 'blocks',
  'layout': {
  },
  'paint': {
    'fill-color': [
      'interpolate',
      ['linear'],
      ['get', 'value'],
      40.5, 'rgba(255,  0, 0, 0.6)', // blue-green
      41, 'rgba(0, 255, 0, 0.6)', // yellow
    ],
    'fill-outline-color': 'rgba(0,0,0,0)'
  }
});

以及指向的链接。

Answer 1

简化多边形几何体中的小间隙可能会导致使用填充图层类型的视觉瑕疵。可以通过设置从源数据创建矢量切片的特定简化设置来解决此问题。

使用以下流程：

1. 安装Tippecanoe，一个开源命令行工具，用于从geojson数据创建矢量切片。 https://github.com/mapbox/tippecanoe
2. 使用var menu和--detect-shared-borders标记平铺多边形geojson数据。这将强制共享边缘的多边形相同地简化，并且多边形以低缩放级别合并在一起以保持矢量切片快速渲染（尺寸小于500kb）。
3. 将输出--coalesce-smallest-as-needed文件上传到您的Mapbox帐户。