2021 年更新！！

Question

我有数千个点需要在谷歌地图上绘制，并使用https://github.com/ubilabs/google-maps-api-threejs-layer中的示例获得响应迅速的地图。有没有人在这玩，并想知道是否有可能有不同的彩色标记和可能的标记点击事件？

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

Answer 1

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

数据点由画布上的位置的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事件。

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

Answer 2

上周我发现了OpenLayers。非常非常令人印象深刻我强烈建议你去看看。 OpenLayers.org是一个开源JavaScript网页映射库，与其他替代方案（如Leaflet或Google Maps API）区别开来，因为它有大量的组件。

我花了整个周末通过将OpenLayers与API（如MapBox，WebGL等）集成来创建示例应用程序......毕竟说完了，我对OpenLayers印象非常深刻 - 我打算在即将到来的POC /项目中使用OpenLayers。

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

Answer 3

这是jQuery / google地图应用的链接。不完全是你想要的;但是你可能会发现这个例子很有用。随意使用 - 可以从我的网站下载。

Link to app on my website

Click here to download the zip

Answer 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,
});

谷歌地图使用three.js和webgl

4 个答案:

2021 年更新！！