Mapbox GL AddLayer：图标图像来自何处

许多示例总是像这样加载图标图像（例如，在这里：https : //www.mapbox.com/mapbox-gl-js/example/geojson-markers/）：

map.addLayer({
    "id": "markers",
    "type": "symbol",
    "source": "markers",
    "layout": {
        "icon-image": "{marker-symbol}-15",
        "text-field": "{title}",
        "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
        "text-offset": [0, 0.6],
        "text-anchor": "top"
    }
});

该图标存储在哪里，如何链接到本地​​png或svg？或者我该如何将自己的资源markers投入资源？该示例没有很好的文档说明。

如果您遵循这些示例，则只会得到加载到特定样式的Sprite工作表中的Sprite，这与其他任何样式不一定是1对1匹配。

例如：emerald-v8没有“ icon-image”：“ harbor-15”，例如使用street-v8的示例。

要查看来自相应样式的可用精灵列表：https : //github.com/mapbox/mapbox-gl-styles/tree/master/sprites

我可以从其emerald-v8存储库中选择“港口”图标，如下所示：

map.addLayer({
    "id": "pointclick",
    type: 'symbol',
    source: 'pointclick',
    "layout": {
        "icon-image": "harbor_icon",
        "icon-size":1.5
    },
    "paint": {}
});

这是帮助我将其组合在一起的资源，它说明了如何创建自己的图标：https : //www.mapbox.com/help/custom-markers/#locate-mapbox-styles-images

编辑：

基本上，要添加您自己的图标之一，请进入Mapbox Studio，创建您自己的样式，或编辑其中之一。只需添加您自己的SVG之一，该图标即可在您自定义的Sprite工作表中使用。

您也可以像先icon-image使用map.loadImage()和一样使用外部/生成的图标map.addImage()。

例子：

在地图上添加图标

将生成的图标添加到地图

就像在sprite docs中所说的那样：传递"sprite": "https://link"到您的样式，其中link是指向以spritezero-cli生成的json的链接。spritezero-cli从svg格式的图标列表中生成png sprite。您可以将符号层中的图标用作'icon-image'。