Question

我有两个问题似乎并存，经过大量研究，我正在尽力理解它们。

我不知道如何在我的地图上添加画布。我相信这一定很简单，但是我找不到基本的工作示例。我还对API https://www.mapbox.com/mapbox-gl-js/api/#canvassource进行了研究-但它似乎不像图像叠加层那样起作用。

上面的API链接显示了如何添加画布源，但是没有如何在地图上显示画布。我在他们展示示例的地方错过了吗？（我将添加一个示例，说明我使用的图像源如何工作）。这是我要做的第一件事。

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

在MapBox GL JS中可以这样做吗？根据我在网上阅读的内容，只能使用画布。似乎有一些方法可以从MapBox API中列出的图像中获取数据，但是我再也没有要看的示例。如果我什至只有10px×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"
    },
  })
});

最后，我最终希望如何工作的示例图片：

Answer 1

是的，文档在canvas源类型上有很多空白。虽然您可以在这里找到它：https://www.mapbox.com/mapbox-gl-js/api#canvassource

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

访问颜色值

要访问画布内容的颜色值，可以使用上下文的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之间。

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

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

1 个答案:

访问颜色值

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

1 个答案:

访问颜色值

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