Mapbox

Question

下面的代码在没有 fill-color 的情况下工作，并呈现导入的矢量。但是，添加 fill-color 不会导致任何渲染。我已经尝试将 type 更改为 fill，但我仍然无法使用 fill-color 渲染任何内容。 tileset 由导入 Mapbox studio tilesets 的 geojsons Polygons 组成。

map.addLayer({ id: 'zip-codes', type: 'line', source: { type: 'vector', url: 'mapbox://<tilesetid>', }, 'source-layer': 'original', layout: { 'line-join': 'round', 'line-cap': 'round', }, paint: { 'line-color': 'green', 'line-width': 10, 'fill-color': 'red', }, });

Answer 1

Mapbox-GL-JS 中的多边形图层是 fill 或 line，而不是两者。如果它是 fill，它只包含 fill-* 属性。如果是 line，它只包含 line- 个属性。

所以如果你想要填充的多边形，你可能想要这样的东西：

map.addLayer({
    id: 'zip-codes',
    type: 'fill',
    source: {
      type: 'vector',
      url: 'mapbox://<tilesetid>',
    },
    'source-layer': 'original',
    paint: {
      'fill-color': 'red',
    },
  });

如果您想同时控制填充和边框，您需要两个单独的层：一个类型为 fill 和一个类型为 line.

Mapbox - 源矢量文件无法添加填充颜色

Mapbox - sourced vector file unable to add fill color

mapbox-gl-js

mapbox-gl