【问题标题】：google maps using three.js and webgl谷歌地图使用three.js和webgl
【发布时间】：2013-05-25 17:06:50
【问题描述】：

我有数千个点需要在谷歌地图上绘制，并使用来自 https://github.com/ubilabs/google-maps-api-threejs-layer 的示例获得了一个响应速度非常快的地图。有没有人对此有所了解并想知道是否有可能有不同颜色的标记和可能的标记点击事件？

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

【问题讨论】：

查看stackoverflow.com/a/68370652/3145360 了解最新更新。

标签： google-maps three.js webgl

【解决方案1】：

数以百万计的可点击数据点可以使用 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 代码比较长，所以只包含了点击事件。

这是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 万个可选择的数据点。

【讨论】：

【解决方案2】：

上周我发现了 OpenLayers。非常非常令人印象深刻的框架。我强烈建议看看它。 OpenLayers.org 是一个开源的 JavaScript 网络地图库，有别于其他替代品，如 Leaflet 或 Google Maps API，因为它有大量的组件。

我整个周末都在通过将 OpenLayers 与 API（如 MapBox、WebGL 等）集成来创建示例应用程序...毕竟，我对 OpenLayers 印象深刻 - 我计划在即将到来的POC/项目。

这是我的test harness 的链接。您也可以从那里下载所有示例的代码。

【讨论】：

【解决方案3】：

这是一个 jQuery/google 地图应用程序的链接。不完全是您正在寻找的东西；但是您可能会发现该示例很有用。随意使用 - 可以从我的网站下载。

Link to app on my website

Click here to download the zip

【讨论】：

谢谢。很酷的应用程序。我有几千个标记需要显示，标记聚类器非常有用。但是当我看到来自 Brendan youtube.com/watch?v=aZJnI6hxr-c 的视频时，我真的印象深刻，我在 webgl 方面没有太多经验，开始查看three.js，因此我的帖子。
我在 PLAY 框架、threejs 和 WebGL 方面做了很多工作。我确信我过去的项目档案中有一些符合您要求的东西。在此期间，您可以查看 RaphaëlJS (raphaeljs.com)...一个小型 JS 库，它简化了矢量图形的工作。我刚刚在我的网站上发布了这个小样本：ddeloy.com/new/raphael/raphael_click_event.html

【解决方案4】：

2021 年更新！！

Google Maps JS 现在有一个 WebglOverlayView 类并公开 WebGL 上下文。

const webglOverlayView = new google.maps.WebglOverlayView();

webglOverlayView.onAdd = () => {
  // Do setup that does not require access to rendering context.
}

webglOverlayView.onContextRestored = gl => {
  // Do setup that requires access to rendering context before onDraw call.
}

webglOverlayView.onDraw = (gl, coordinateTransformer) => {
  // Render objects.
}

webglOverlayView.onContextLost = () => {
  // Clean up pre-existing GL state.
}

webglOverlayView.onRemove = () => {
  // Remove all intermediate objects.
}

webglOverlayView.setMap(map);

此外，@googlemaps/three 扩展了这个类，以便于与 ThreeJS 一起使用。

// instantiate a ThreeJS Scene
const scene = new Scene();

// Create a box mesh
const box = new Mesh(
  new BoxBufferGeometry(10, 50, 10),
  new MeshNormalMaterial(),
);

// set position at center of map
box.position.copy(latLngToVector3(mapOptions.center));
// set position vertically
box.position.setY(25);

// add box mesh to the scene
scene.add(box);

// instantiate the ThreeJS Overlay with the scene and map
new ThreeJSOverlayView({
  scene,
  map,
});

【讨论】：