javascript - Mapbox GL JS : How to add a canvas, 并从中获取数据？ (天气图)

Question

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

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

上面的 API 链接显示了如何添加 Canvas 源，但没有显示如何在 map 上显示它。我是否错过了他们展示示例的地方，或者只是不在那里？ (我将添加一个示例来说明我使用的图像源如何工作)。这是我想做的第一件事。

在我的项目中，我正在显示天气雷达数据。一旦我有一个 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图层它在 map 上。

访问颜色值

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

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

• https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData
• https://developer.mozilla.org/en-US/docs/Web/API/ImageData

您现在可以从 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 之间。

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