Mapbox gl js - 如何在单个图层上添加多个照片源

2023-12-21

每 2 秒我创建一个新的图像源并为该源创建一个新图层:

map.addSource("source_" + photo_id, {
    "type": "image",
    "url": photo_url,
    "coordinates": [... ]
})


map.addLayer({
    "id": "layer_" + photo_id,
    "source": "source_" + photo_id,
    "type": "raster",
    "paint": {"raster-opacity": 0.6}
})

这意味着每张照片都会创建一个新图层。 我想知道,是否可以在同一图层上添加多个照片源以避免这种多层创建?

map.getSource('photoSource').updateImage(...)不起作用,因为我希望以前的所有照片也保留在地图上

基本上我的目标是将地图上的照片分成组,以便稍后能够删除特定组的照片,并且这可以通过一个图层中的多个源来实现。


使用表达式语法这是 100% 可能的。

                {
                'type': 'Feature',
                'geometry': {
                    'type': 'Point',
                    'coordinates': [this.long, this.lat]
                },
                'properties': {
                    'icon': 'bus-generic'
                }}

如果您有属性,则可以查询它并在图层定义中使用它来显示不同的图标:


   map.addLayer({
       'id': 'bus-layer',
       'type': 'symbol',
       'source': 'bus-source', // reference the data source
       'layout': {
           'icon-image': ['get', 'icon'], // reference the icon in properties
           'icon-size': 0.2,
       }
   });

请参阅此处的示例!https://docs.mapbox.com/mapbox-gl-js/example/add-image-missing- generated/ https://docs.mapbox.com/mapbox-gl-js/example/add-image-missing-generated/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Mapbox gl js - 如何在单个图层上添加多个照片源 的相关文章

随机推荐

  • Visual Studio 2008 - 无法命中断点

    我知道很多人都遇到过这个问题 但我现在也遇到了这个问题并且无法解决问题 在完成一个项目数周后 VS 2008 随机给我一个错误 当我设置调试点时 我收到警告 当前不会命中断点 尚未为此文档加载任何符号 我已经重新构建了没有调试点的解决方案并
  • 测试重定向后加载的页面

    我有一个测试用例 应该验证在 POST 调用后 用户是否被重定向到正确的页面 Redirect Page in running FakeApplication val Some result route FakeRequest POST p
  • 多级子级上的 SwiftUI 更改已发布对象更改

    我有一个 ObservedObject AppStatus 类 它内部有多个 Published 类 如果我只在孩子方面有水平 一切都会很好 当我有一个 RecordingTimeManager 类 其中有另一个变量 2 级子级 时 问题就
  • .csv 的 ADODB 连接字符串

    我想在 Excel VBA 中使用 ADODB 处理 csv 文件 我尝试了在网上找到的一些字符串 但似乎都不起作用 我正在使用以下方式获取文件路径 strVFile Application GetOpenFilename CSV csv
  • WPF DataGrid,添加行时应用程序崩溃

    我有一个绑定到 TrackableCollection 的 wpf 数据网格 在某些罕见的情况下 并且仅对于少数选定的用户 当用户通过输入底部空白行添加新记录时 应用程序将崩溃 我无法重现该问题 我所拥有的只是抛出的异常的堆栈跟踪 有人见过
  • pandas 时间序列之间的日期时间函数?

    我一直在使用between timepandas 中 TimeSeries 的方法 它返回指定时间之间的所有值 无论其日期如何 但我需要选择both日期和时间 因为我的时间序列结构 包含多个日期 解决这个问题的一种方法虽然相当不灵活 但只是
  • Markdown 文件中到 Repo 根目录的相对链接

    我需要从 Markdown 文件获得到我的仓库根目录的相对链接 我需要它适用于任何叉子 所以这看起来是提供链接的唯一方法一些文件在根中 the Root README md or the Root README md 例如 如果它位于 do
  • 用JS获取某种类型的父HTML元素

    我的代码看起来像这样 特写 h2 span class stuff a stuff a span span class moreStuff Another test span h2 我找到了一种选择我的方法a元素 并为其附加一个 id 我现
  • 使用 OrderClose 类时无法编译代码

    我正在尝试构建一个对销售订单执行一些操作的插件 我还必须将订单设置为已履行 我在 SDK 文档中找到了必须用于以正确方式履行订单的摘录 var request new FulfillSalesOrderRequest OrderClose
  • Simpletarget 已弃用 glide 吗?

    自 Glide 早期更新以来 SimpleTarget 已被弃用 Glide with getActivity load uri asBitmap error R drawable no result diskCacheStrategy D
  • 在 ruby​​ 中对多维数组进行排序

    我有以下数组 2010 01 10 2 2010 01 09 5 2009 12 11 3 2009 12 12 12 2009 12 13 0 我只想按每组中的第二个值对其进行排序并返回最高的值 就像我希望输出为12与上面给定的输入 up
  • MiniProfilerEF6.Initialize() c# 上出错?

    我在 MVC 项目中调用的 App Start 方法中使用 miniprofiler MiniProfilerEF6 Initialize 我收到错误 the Entity Framework was already using a DbC
  • 哈希与签名二进制文件

    如果您想确保文件有效 未被篡改并且来自正确 预期的来源 您可以执行以下两件事 hashing and signing 出于我的问题的目的 hashing意味着提供要下载的文件 连同文件 的哈希值 客户端下载哈希值和文件 重新计算哈希值 并验
  • Delphi (-XE):通过隐式转换转换为记录类型

    我有一个带有方法的记录类型 代表特定的硬件测量类型 从仪器中作为字符串读取 该记录包含与字符串的隐式转换 如果我将字符串转换为记录类型 它似乎可以工作 但这安全吗 也就是说 通过隐式字符串转换将字符串转换为记录是否会根据分配临时值调用隐式转
  • 在日期范围和特定时间范围之间选择

    有没有办法在日期和特定时间范围之间选择记录 例如2013年11月1日到2013年11月30日05 00到15 00之间的所有记录 这是我到目前为止所做的 select count as total from tradingaccounts
  • 在Python中处理大二项式的求和

    我需要计算这个公式 它是这个积分的近似值 不过没关系 实际上我只是想计算Figure的值1 https i stack imgur com fi12W gif with PYTHON 这就是主题所关心的 K alpha 和 sigma 是单
  • 如何显示子模块获取的进度?

    我知道我可以告诉 Git 显示进度 例如 Resolving deltas 98 123 125 传递命令行参数时 progress到 例如获取命令 但我们有几个大型子模块 但没有显示任何进展 如何告诉 Git 也显示克隆子模块的进度 例如
  • Excel 剪贴板清除

    我是编写 Excel 宏的新手 但我正在努力完成工作 不管怎样 我试图将数据从 2 个工作表导出到另一个工作簿中的另外 2 个工作表 但是当我达到清除剪贴板的程度时 它根本不起作用 有人可以帮助我吗 这是我的代码 Sub manufactu
  • 使用 ReactJS 将插件添加到 CKEditor5 的自定义构建中

    我正在尝试向 CKEditor5 的经典版本添加一个插件 我已按照此页面上的说明进行操作 https ckeditor com docs ckeditor5 latest installation plugins installing pl
  • Mapbox gl js - 如何在单个图层上添加多个照片源

    每 2 秒我创建一个新的图像源并为该源创建一个新图层 map addSource source photo id type image url photo url coordinates map addLayer id layer phot