谷歌地图使用three.js和webgl [英] google maps using three.js and webgl

问题描述

我有数千个需要在Google地图上绘制的点，并使用 https://github.com/ubilabs/google-maps-api-threejs-layer 。
有没有人有这方面的玩法，并想知道是否有可能有不同的彩色标记和可能的标记点击事件？

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

解决方案

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

数据点由画布上的位置x，y对表示，大小为int，屏幕外颜色和屏幕颜色。这些值存储在单独的类型数组中。

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

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

$ b

canvas .addEventListener（'click'，function（ev）{
＃插入代码以获得鼠标x，y在画布上的位置
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]]）{
＃点击的像素是地图上的数据点
}
}）;


Webgl代码冗长，只包含click事件。

以下是现场演示和 repo 。 （angular和coffeescript）

以下是使用普通js的第二个示例： webgl-picking-geo-polygons

这里是 react-webgl-leaflet b
$ b 该解决方案基于Brendan Kenny的 Google地图+ HTML5 +空间数据可视化，它解释了上面摘录的部分代码30分钟，显示WebGL数据在Google地图上。

演示功能少于10个数据点，但您可以使用所有rgb组合轻松绘制超过1600万个可选数据点价值。

I have thousands of points that need to be plotted on google maps and got a very responsive maps using the example from https://github.com/ubilabs/google-maps-api-threejs-layer . Did anyone have a play at this and wondering if it is possible to have different colored markers and possible marker click events?

Appreciate any pointers or examples online.

解决方案

Millions of clickable data points can be painted on a google map using webgl.

A data point is represented by an x,y pair for a location on the canvas, an int for size, an off screen color, and an on screen color. These values are stored in separate typed arrays.

Each data point has a unique rgb color to act as a key in a lookup table of data point ids.

Create a texture to store the off screen colors and render it to an off screen buffer. On event, load the off screen buffer and use glReadPixels to retrieve the rgb color of the pixel clicked and then find the id in the lookup table. Points on the on screen buffer, what the user sees, can share a common color.

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 code is lengthy, so only the click event is included.

Here is a live demo and a repo. (angular and coffeescript)

Here is a second example using plain js: webgl-picking-geo-polygons

Here is react-webgl-leaflet

The solution is based on Brendan Kenny's Google Maps + HTML5 + Spatial Data Visualization which explains some of the code in the excerpt above at the 30 min mark, and Displaying WebGL data on Google Maps.

The demo features less than ten data points, but you can just as easily paint over 16 million pickable data points using all combinations of rgb values.

这篇关于谷歌地图使用three.js和webgl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！