Mapbox GL JS：如何添加 canvas，并从中获取数据？ (气象图)

Question

我有 2 个问题似乎是相辅相成的，经过大量研究，我正在尽力理解它们。

我不明白如何将 canvas 添加到我的地图。我相信这一定很简单，但我找不到一个基本的工作示例。我还对 API 进行了研究：https://www.mapbox.com/mapbox-gl-js/api/#canvassource - 但它似乎不像图像叠加那样工作。

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

在我的项目中，我正在显示天气雷达数据。一旦我有一个 canvas 源工作和显示 - 我希望在用户将鼠标悬停在数据上时显示数据值作为光标后的工具提示（数据是雨 - 我将附上示例屏幕截图).对于 canvas 的每种颜色，我已经知道像素的确切值（例如：#63C2FF = 15.4、#469B00 = 23.4、#FDF900 = 31.5 等）——所以这不是问题。

这可以在 MapBox GL JS 中实现吗？根据我在网上阅读的内容，仅使用 canvas 是可能的。似乎有一些方法可以从 MapBox API 中列出的图像中获取数据，但同样我没有可供查看的示例。如果我什至只有 2 种颜色的 10px by 10px 图像的工作代码，我就能弄清楚其余部分。我还有许多其他事情需要做（比如刷新图像等），但我现在知道如何去做了。

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

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"
    },
  })
});

最后，我希望如何最终实现它的示例图像：

Answer 1

你是对的，文档在 canvas 源类型上有很多空白。尽管您可以在此处找到它：https://www.mapbox.com/mapbox-gl-js/api#canvassource

通常，您可以像使用 image 源一样使用 canvas 源，这意味着您还可以选择 raster 图层以在地图上显示它。

访问颜色值

要访问 canvas' 内容的颜色值，您可以使用上下文的 getImageData 方法：

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

您现在可以从 imageData.data 属性访问颜色。这将为您提供一个按 RGBA 顺序排列的平面（一维）颜色数组。因此，如果您对 4x4 像素的图像进行成像，您的数组将如下所示：

[
  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 之间。

现在你所要做的就是在地图上捕获mousemove，检索光标的lng/lat位置，将此位置转换为x/y位置，这样你就可以访问图像数据中的正确像素。

Mapbox GL JS：如何添加 canvas，并从中获取数据？ (气象图)

Mapbox GL JS : How to add a canvas, and get data from it? (Weather Map)

javascript

geospatial

mapbox

mapbox-gl-js

访问颜色值