使用 Three.js 和 webgl 的谷歌地图

我有数千个点需要在谷歌地图上绘制，并使用以下示例获得了响应非常灵敏的地图https://github.com/ubilabs/google-maps-api- Threejs-layer https://github.com/ubilabs/google-maps-api-threejs-layer。 有没有人对此感兴趣并想知道是否可以有不同颜色的标记和可能的标记单击事件？

感谢在线的任何指示或示例。

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

数据点由表示画布上位置的 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代码比较长，所以只包含了click事件。

这里有一个现场演示 http://codepen.io/mikefab/pen/raLgvx and a repo https://github.com/mikefab/webgl-readpixels-offscreen-buffer-google-map-example。 （角度和咖啡脚本）

这是使用纯 js 的第二个示例：webgl-拾取地理多边形 https://github.com/unicef/webgl-picking-geo-polygons

Here is 反应 webgl 传单 https://github.com/unicef/react-webgl-leaflet

该解决方案基于 Brendan Kenny 的Google 地图 + HTML5 + 空间数据可视化 https://www.youtube.com/watch?v=aZJnI6hxr-c它解释了上面摘录中 30 分钟标记处的一些代码，以及在 Google 地图上显示 WebGL 数据 http://build-failed.blogspot.com/2013/02/displaying-webgl-data-on-google-maps.html.

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