Mapbox 图标-图像动态符号图标与 Sprite 一起加载

问题描述

我正在尝试做一些我认为非常简单的事情，但似乎我显然误解了 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 Studio 精灵图像集合中有这些图像，它们将自动可用。令人困惑的是，以前，我无法从链接中使用它们。但是，它应该会自动运行。

希望有帮助！

解决方法

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

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 底图中的图标（Maki 图标，名称类似于“airport-11”）组合时，可能会遇到麻烦。

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

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

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