时间戳

首页 > 解决方案 > 使用 EXIF.js 和 Mapbox 在地图上以 GPS 坐标显示图像

javascript - 使用 EXIF.js 和 Mapbox 在地图上以 GPS 坐标显示图像

问题描述

首先，你是一个完全没有编程经验的新手。如果我没有使用正确的术语，我深表歉意。

背景：我参加了一个教育工作者课程，该课程应该教我们如何教授高中计算机科学课程。该课程应该是为编程知识为零的教师设计的。我们没有收到任何编码说明。

我们的任务是一起使用 EXIF.js 和 Mapbox 创建一个 HTML 文档，该文档将在地图上的 GPS 坐标处显示一组图像（图标）（想象一张埃菲尔铁塔的小照片显示在地图上的精确坐标处它所在的位置）。我们将使用 EXIF.js 从 EXIF 数据中提取 GPS 坐标。然后应该将这些坐标自动插入代码中，以将图标放置在地图上的正确位置。

我只需要使用 Mapbox 网站上的示例和 EXIF.js 文档。

通过使用以下示例中的代码，我已经能够制作出接近教授正在寻找的最终结果的东西。它看起来是正确的。然而，这只是任务的一部分。我没有从照片中提取 GPS 坐标并将其插入代码中，而是手动输入了坐标。

我有应该提取坐标的代码。但我似乎缺少将坐标与图标/图像连接起来的代码。

示例：https ://docs.mapbox.com/mapbox-gl-js/example/add-image/

有没有人能给我一些关于在哪里寻找说明或如何解决这个问题的指导？我完全迷失了。TIA

标签： javascriptmapboxexif-js

解决方案

根据GeoJSON 格式 RFC 7946 第 3.1.1 节：

位置是一个数字数组。必须有两个或更多元素。前两个元素是经度和纬度，或东移和北移，完全按照该顺序并使用十进制数

所以看猫图标的例子，它被绘制的位置分别是[0.0, 0.0] 经度和纬度。

在您的示例中，执行此操作的代码位在这里：

{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [0, 0]
}

更详细地浏览示例，您可以看到对 map.loadImage(..) 的调用带有两个参数，第一个是您要加载的图像的 URL，第二个是在该图像后调用的函数已从其原始位置加载并可供您使用。

在该函数中，您可以看到对 map.addImage(..) 的调用，该调用获取现在加载的图像数据并将其与名称相关联；这里是“猫”。

然后它调用 map.addSource(..) ，它接受一个 GeoJSON 格式的对象和一个与该源相关联的名称。该名称已被命名为“点”。

最后它调用 map.addLayer(..) 向地图添加一个图层。您可以认为这有点像将旧投影仪上的“透明度”放置在地图顶部。在此处的示例中，除了猫的图像之外，该图层是透明的，从而使下面的地图的其余部分可以显示出来。

该层是根据我们刚刚在上面使用的项目指定的：

map.addLayer({
  'id': 'points',
  'type': 'symbol',
  'source': 'point',
  'layout': {
    'icon-image': 'cat',
    'icon-size': 0.25
  }
});

该图层被赋予一个唯一的 id（“点”），并被赋予一个“源”来告诉它相对于地图放置图层的位置。该示例将源命名为“点”，但您应该替换之前调用 map.addSource(..) 时使用的任何名称。最后，该层的布局被指定为一个图标 - 由在给定加载图像数据的 map.addImage(..) 调用中给出的名称标识。给它的名字是“猫”，这就是这里出现的东西。

因此，总而言之，将图像与您从照片 EXIF 数据中检索到的坐标相关联的代码应该在该示例中，尽管可能不是您所期望的顺序和形式。

祝你的任务好运。

推荐阅读