Mapbox Icon-Image Dynamic Symbol (icon) Loading with Sprite

Question

我正在尝试做一些我觉得很简单的事情，但似乎我显然误解了 mapbox addlayer 功能的关键部分。

目标

根据特征数据值（例如 geojson 特征数据值 title: "walmart"）创建动态识别的图标。本质上只是在通过 tilequery 查询这些位置时从精灵图像中添加动态商店图标。 picture representation here

问题

尝试使用样式中的精灵值时，我不断收到错误消息。错误：util.js:349 Image "airport-11" could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event.

我看到很多资源都在谈论精灵，但没有人讨论如何以这种方式准确地实现它们。我什至尝试查询精灵，然后使用点符号添加值来访问精灵值。这给出了“未定义”和无效值的错误。

示例代码：

      map.addLayer({
    id: "tilequery-points",
    type: "symbol",
    source: "tilequery", // Set the layer source
    layout: {
      "icon-image": [
        "match",
        ["get", "title"],
        ["HEB"],
        "H-E-B_logo",
        ["Pilot Flying j"],
        sprite.Pilot_Travel_Centers_logo,
        // "Pilot_Travel_Centers_logo",
        ["Dollar General"],
        "Dollar_General_logo",
        ["Cumberland Farms Corp"],
        "Cumberland_Farms_logo (1)",
        ["CEFCO"],
        "CEFCO-convenience-stores-Logo_510px",
        ["BJs Wholesale Inc"],

问题

如何访问精灵值而不出错？！！！ 谢谢您的帮助！我不会问我是否不需要它！

更新

我发现要在任何层内使用精灵图像，如果您在 Mapbox 工作室精灵图像集合中有图像，这些图像将自动可用。令人困惑的是，以前，我无法从链接中使用它们。但是，它应该会自动运行。

希望对你有帮助！

Answer 1

关于精灵的文档确实不是很清楚。我会尝试总结一下（简化一点）。

一个 Mapbox GL 样式有一个精灵。这是一个包含所有图标的 PNG，以及一个 JSON 文件，该文件指定每个图标的名称（其图标 ID）以及它在 PNG 中的位置。通过将 URL 指定为 sprite 属性来指定精灵：https://docs.mapbox.com/mapbox-gl-js/style-spec/sprite/

您还可以在地图加载后动态向精灵添加图像，使用map.loadImage 和map.addImage，指定图标ID。

要显示图标，请在符号层中使用相同的 ID："icon-image": "myicon"。

当您尝试将自己的图标与 Mapbox 底图中的图标（名称类似于 `airport-11' 的 Maki 图标）组合时，可能会遇到麻烦。

要将它们组合起来，您可以执行以下三件事之一：

• 将您的图标上传到 Mapbox Studio 中的样式
• 动态加载您的图标
• 离线生成一个新的精灵表，使用类似mbsprite

我不知道您所说的“点符号”是什么意思，但不，这不是正确的路径。