Mapbox GL js 可用图标

Mapbox GL js available icons

本文关键字:图标 js GL Mapbox      更新时间:2023-09-26

我正在将一个Web应用程序从Mapbox.js重写为Mapbox GL js。使用标准的"mapbox://styles/mapbox/streets-v8"样式,在哪里可以找到所有工作标记图标的列表?

这是我的代码:

m.map.addSource("markers", {
        "type": "geojson",
        "data": {
            "type": "FeatureCollection",
            "features": {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": ["-75.532965", "35.248018"]
                },
                "properties": {
                    "title": "Start",
                    "marker-symbol": "entrance",
                    "marker-size": "small",
                    "marker-color": "#D90008"
                }
            }
        }
    });
    m.map.addLayer({
        "id": "markers",
        "type": "symbol",
        "source": "markers",
        "layout": {
            "icon-image": "{marker-symbol}-15", //but monument-15 works
            "text-field": "{title}",
            "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
            "text-offset": [0, -1.6],
            "text-anchor": "top"
        }
    });

我读到所有 Maki 图标都应该可用于没有图标作为默认值的样式:https://github.com/mapbox/mapbox-gl-styles/issues/241但它们中的大多数都不起作用。大小也有问题 - 对于 Maki,它们是 -小、-中和-大,现在我看到 -11 和 -15。

我只需要使用一些基本的标记图标。

我们仍在整理默认图标集的最终实现细节,并将在确定后彻底记录该图标集。

在此之前,您可以通过查看 sprites 文件夹中的mapbox-gl-styles存储库来准确查看给定样式可用的图标。

自从该问题关闭以来,所有 maki 图标现在都可以在 mapbox-gl.js 中原生使用。 您可以在 https://www.mapbox.com/maki-icons/上看到所有可用的内容。您还可以使用 icon-size paint 属性乘以它们的大小,尽管这可能会导致像素化。 仍然存在一些障碍,例如 icon-color 属性尚未正常工作,因此您现在需要编辑、重新着色和重新发布图标。(问题 #3605)。