Maps 地图盒图标图像动态符号（图标）加载精灵

我正在尝试做一些我觉得非常简单的事情，但似乎我显然误解了mapbox

addlayer

功能的一个关键部分

目标

根据功能数据值（例如geojson功能数据值

标题：“沃尔玛”

）创建动态标识的图标。实际上，当通过tilequery查询这些位置时，只需从sprite图像添加动态存储图标

问题

在尝试使用样式中的精灵值时，我不断遇到错误。错误：

util.js:349图像“airport-11”无法加载。请确保已使用map.addImage（）或样式中的“sprite”属性添加图像。您可以通过侦听“styleimagemissing”映射事件来提供缺少的图像。

我看到了大量关于sprite的资源，但没有人讨论如何以这种方式准确地实现它们。我甚至尝试过查询精灵，然后使用点符号添加值来访问精灵值。这将导致“未定义”错误和无效值

示例代码：

      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 studio精灵图像集合中有这些图像，它们将自动可用。令人困惑的是，以前，我无法从链接使用它们。但是，它应该自动工作

---

希望有帮助

关于精灵的文档确实不是非常清晰。我将尝试总结（简化一点）

Mapbox GL样式有一个精灵。这是一个包含所有图标的PNG，加上一个JSON文件，指定每个图标的名称（图标ID）及其在PNG中的位置。通过将URL作为

sprite

属性指定精灵：

您还可以在贴图加载后，使用指定图标ID的

map.loadImage

和

map.addImage

将图像动态添加到精灵中

要显示图标，请在符号层中使用相同的ID:

“图标图像”：“myicon”

当您试图将自己的图标与Mapbox底图中的图标（即名称为“airport-11”的Maki图标）相结合时，可能会遇到麻烦

要将它们结合起来，可以执行以下三项操作之一：

• 将图标上载到Mapbox Studio中的样式
• 动态加载图标
• 脱机生成一个新的sprite工作表，方法如下

---

我不知道你说的“点符号”是什么意思，但不，这不是正确的方法。

谢谢你回答史蒂夫！我现在明白了一点，但是，我仍然对这里的主要问题有点困惑。我在哪里插入“精灵”链接，因为这将允许我在符号内按名称引用这些图像。它是否位于symbol

addLayer

或symbol属性内？还是使用样式自动查询？还是应该以其他方式引用它？再次感谢！如果您从头开始创建整个样式（即，您有一个“my style.json”文件），那么它将位于最顶端。阅读样式说明，包括我提供的链接。足够理解。我很抱歉把这件事拖得太久，但我真的无法理解。我希望在tilequery

map.addLayer

元素中使用精灵图像。你能从这里看到我的代码吗？这正是我正在努力解决的问题，所以我们都在同一页上讨论手头的确切问题。如果sprite链接没有在vanilla JS或其他东西中使用，那么我们如何从mapbox studio本地引用它？再次感谢！！！请仔细阅读这份文件。每个样式有一个精灵文件。不，您不能将精灵传递给

addLayer

。