Mapbox GL JS：如何添加畫布並從中獲取數據？ （氣象圖）

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形象，只有2種顏色，我能想出的休息。 我還有很多要做的事情（例如刷新圖像等），但是我知道現在該怎么做。

下面是工作 ，對於我使用的圖像疊加正確的代碼，如果我是正確的，不以類似的方式在畫布上的工作？

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圖層以在地圖上顯示它。

訪問顏色值

要訪問畫布內容的顏色值，可以使用上下文的getImageData方法：

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

• https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/getImageData
• https://developer.mozilla.org/zh-CN/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之間。

現在，所有你需要做的就是捕捉mousemove的地圖上，檢索光標的LNG /緯度位置，改造成X / Y軸這個位置，所以你可以在圖像數據訪問正確的像素。