Javascript Mapbox GL JS：如何添加画布并从中获取数据？（天气图）

我有两个问题似乎是密切相关的，经过大量的研究，我正在尽我最大的努力去理解它们

我不知道如何将画布添加到地图中。我相信这一定很简单，但我找不到一个基本的工作示例。我也对API进行了研究：-但它似乎不像图像叠加那样工作

上面的API链接显示了如何添加画布源，而不是如何在地图上显示它。我是否错过了他们展示例子的地方，或者只是不在那里？（我将添加一个我使用的图像源如何工作的示例）。这是我想做的第一件事

在我的项目中，我显示天气雷达数据。一旦我有了一个工作和显示的画布源-我想让数据值显示为用户在数据上悬停鼠标作为光标后的工具提示（数据是雨-我将附上一个示例屏幕截图）。对于画布的每种颜色，我已经知道像素的确切值（例如：

\63C2FF=15.4

，

\469B00=23.4

，

\FDF900=31.5

，等等），所以这不是问题

在MapBox GL JS中可以这样做吗？从我在网上看到的情况来看，只有使用画布才有可能。似乎有一些方法可以从MapBox API中列出的图像中获取数据，但我同样没有示例可看。如果我有一张只有两种颜色的

10px

by

10px

图像的工作代码，我就可以算出其余的了。我还有很多其他的事情要做（比如刷新图像等等），但我现在知道怎么做了

下面是我正在使用的图像覆盖的工作和正确代码，如果我是对的，画布是否以类似的方式工作

map.on('load', function() {
  map.addSource("source_KEWX_L2_REFLECTIVITY", {
    "type": "image",
    "url": "images/KEWX_L2_REFLECTIVITY.gif",
    "coordinates": [
      [-103.009641, 33.911],
      [-94.009641, 33.911],
      [-94.009641, 24.911],
      [-103.009641, 24.911]
    ]
  })
  map.addLayer({
    "id": "overlay_KEWX_L2_REFLECTIVITY",
    "source": "source_KEWX_L2_REFLECTIVITY",
    "type": "raster",
    "raster-opacity": 0.5,
    "layout": {
      "visibility": "none"
    },
  })
});

最后，我希望最终实现这一目标的示例图像：

---

你说得对，文档在

画布上有相当多的空白

源代码类型。尽管您可以在这里找到它：

通常，您可以使用

画布

源，就像使用

图像

源一样，这意味着您还可以选择一个

光栅

层在地图上显示它

访问颜色值 要访问画布内容的颜色值，可以使用上下文的

getImageData

方法：

const context = canvas.getContext('2d');
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);

您现在可以从

imageData.data

属性访问颜色。这将为您提供以RGBA顺序排列的平面（一维）颜色阵列。因此，如果您对4x4px图像进行成像，您的阵列将如下所示：

[
  r0, g0, b0, a0, // pixel [0, 0]
  r1, g1, b1, a1, // pixel [1, 0]
  r2, g2, b2, a2, // pixel [0, 1]
  r3, g3, b3, a3  // pixel [1, 1]
]

这些值将介于0和255之间

现在，您只需在地图上捕获

鼠标移动

，检索光标的lng/lat位置，将该位置转换为x/y位置，以便访问图像数据中的正确像素