4

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

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

4

4 回答 4

4

使用 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 代码很长，所以只包含了点击事件。

这是一个现场演示和一个repo。（角度和咖啡脚本）

这是使用纯 js 的第二个示例：webgl-picking-geo-polygons

这是react-webgl-leaflet

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

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

于 2014-12-26T07:10:25.403 回答
1

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

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


这是我的测试工具的链接。您也可以从那里下载所有示例的代码。

于 2013-06-03T10:42:12.640 回答
0

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

链接到我网站上的应用程序

点击这里下载压缩包

于 2013-06-02T01:51:37.867 回答
0

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,
});
于 2021-07-14T00:29:17.743 回答