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

Question

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

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

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

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

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

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

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

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

Answer 1

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

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

祝你任务顺利。