在Mapbox-gl中包含图标的泪滴。

Question

在我的JS代码中，我想创建一个泪滴标记，并在添加瓦片集时使用addLayer为其添加一个图标，根据一些属性值来改变图标。

在添加图层时，在布局选项下有一个图标图片设置，可以选择图标。有了它，我可以选择maki teardrop marker-15，也可以选择目前支持的其他maki图标。

我想做的是将其他图标放在水滴之上，并给水滴涂上颜色，以实现经典的图标顶水滴标记。

我还发现这个maki teardrop的油漆选项中的icon-color没有任何作用--每次都是黑色。

const layerDefinition = {
    'id': layer.id,
    'type': 'symbol',
    'source': layer.name,
    'source-layer': layer.name,
    'layout': {
      'icon-image':  'marker-15' ,
      'icon-size': 1
    },
    'paint': {
      'icon-color': "red"
    }
  }

map.addLayer(layerDefinition, insertLayerId)

Answer 1

你需要为每个coloricon组合建立SVG图标。

在添加图层时有一个... Maki图标编辑器 可以为你做到这一点，但只支持方形或圆形背景，不支持水滴背景。

Makiwich 是另一种选择，但需要一些编码来帮助生成这些任意图标和颜色的水滴图标。

然后，你可以使用这些生成的图标作为一个 标记 或作为 图标.

icon-color 只能与SDF图标一起使用（参见 https:/docs.mapbox.commapbox-gl-jsapi#map#addimage。，你必须通过 { sdf: true } 作为选择 addImage而不是SVG图标。关于支持的一些讨论 icon-color 基于SVG的图标是在 https:/github.commapboxmapbox-gl-jsissues3605。. 多个图标作为符号图标的一部分（所以你可以有一个水滴背景和另一个图标在它里面）在 https:/github.commapboxmapbox-gl-jsissues4366。.