google-maps - 使用three.js和webgl的谷歌 map

我有数以千计的点需要在谷歌 map 上绘制，并使用 https://github.com/ubilabs/google-maps-api-threejs-layer 的示例得到了一个非常敏感的 map 。
有没有人玩过这个并想知道是否有可能有不同颜色的标记和可能的标记点击事件？

在线欣赏任何指针或示例。

最佳答案

使用 webgl 可以在谷歌 map 上绘制数百万个可点击的数据点。

数据点由表示 Canvas 上某个位置的 x,y 对、表示大小的 int、屏幕外颜色和屏幕上颜色表示。这些值存储在单独的类型化数组中。

每个数据点都有唯一的 rgb 颜色，用作数据点 ID 查找表中的键。

创建一个纹理来存储离屏颜色并将其渲染到离屏缓冲区。在事件中，加载屏幕外缓冲区并使用 glReadPixels 检索单击像素的 rgb 颜色，然后在查找表中找到 id。屏幕缓冲区上的点，用户看到的，可以共享一个共同的颜色。

canvas.addEventListener('click', function(ev) {
  # insert code to get mouse x,y position on canvas
  pixels = new Uint8Array(4);
  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
  gl.readPixels(x, y, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  if (colorToId[pixels[0] + " " + pixels[1] + " " + pixels[2]]) {
    # Pixel clicked is a data point on the map
  }
});

Webgl 代码很长，所以只包含点击事件。

这是一个 live demo 和一个 repo 。 (角度和咖啡脚本)

这是使用普通 js 的第二个示例:webgl-picking-geo-polygons

这是 react-webgl-leaflet

该解决方案基于 Brendan Kenny 的 Google Maps + HTML5 + Spatial Data Visualization ，它在 30 分钟标记处解释了上面摘录中的一些代码，以及 Displaying WebGL data on Google Maps 。

该演示包含不到 10 个数据点，但您可以使用 rgb 值的所有组合轻松绘制超过 1600 万个可选数据点。

关于google-maps - 使用three.js和webgl的谷歌 map ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16830824/