【问题标题】:Mapbox GL js available iconsMapbox GL js 可用图标
【发布时间】:2016-07-07 23:27:08
【问题描述】:

我正在将一个 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 来说,它们是 -small、-medium 和 -large,现在我看到 -11 和 -15。

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

【问题讨论】:

    标签: javascript mapbox mapbox-gl-js


    【解决方案1】:

    自 that issue was closed 以来,所有 maki 图标现在都可以在 mapbox-gl.js 中使用。您可以在https://www.mapbox.com/maki-icons/ 上查看所有可用信息。您也可以使用icon-size paint property 将它们的大小相乘,但这可能会导致像素化。仍然存在一些问题,例如 icon-color 属性尚未工作,因此您现在需要编辑、重新着色和重新发布图标。 (issue #3605)。

    【讨论】:

    • 你可以在我写的here这个hack中按名称和主题搜索图标。
    • 只有在使用 Mapbox 底图(如街道或户外)时才适用
    【解决方案2】:

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

    在此之前,您可以通过查看mapbox-gl-styles repo in the sprites folder 来准确了解给定样式可用的图标。

    【讨论】:

    • 谢谢,有没有办法查看精灵图像的外观,或者需要逐一直观地测试它们?
    • 这确实应该在文档中更加明显。用户不必深入研究堆栈溢出来找出可用的标记!
    • 这仍然是查看图标的唯一方法吗?
    • 官方文档准备好了吗,我只是想念它?
    猜你喜欢
    • 2020-07-17
    • 2019-10-29
    • 2016-12-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-07-21
    • 2017-01-26
    • 2016-06-05
    相关资源
    最近更新 更多