谷歌地圖使用three.js和webgl

我有成千上萬的點需要繪製在谷歌地圖上，並得到了一個非常敏感的地圖，使用https://github.com/ubilabs/google-maps-api-threejs-layer的例子。有沒有人有這方面的發揮，並想知道是否有可能有不同的彩色標記和可能的標記點擊事件？谷歌地圖使用three.js和webgl

在線欣賞任何指針或示例。

來源

2013-05-30 Linus

使用webgl可以在Google地圖上繪製數百萬可點擊的數據點。

數據點由畫布上的位置x，y對錶示，大小爲int，屏幕外顏色和屏幕顏色。這些值存儲在單獨的類型數組中。

每個數據點都具有唯一的rgb顏色，以充當數據點標識查找表中的鍵。

創建紋理來存儲屏幕外的顏色並將其渲染到屏幕外緩衝區。在事件中，加載屏幕外的緩衝區並使用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。（角和CoffeeScript的）

這裏是使用普通的js的第二示例：webgl-picking-geo-polygons

該解決方案是基於布倫丹Kenny的Google Maps + HTML5 + Spatial Data Visualization這解釋了一些在摘錄上面的代碼在30分鐘標記，和Displaying WebGL data on Google Maps的。

該演示功能少於10個數據點，但您可以使用rgb值的所有組合輕鬆繪製超過1600萬個可選數據點。

來源

2014-12-26 07:10:25

這裏是一個jQuery /谷歌地圖應用程序的鏈接。不完全是你在找什麼;不過你可能會發現這個例子很有用。隨意使用 - 可以從我的網站下載。

Link to app on my website

Click here to download the zip

來源

2013-06-02 01:51:37 ddeloy

謝謝。酷應用程序。我有幾千個需要顯示的標記，並且標記羣集已經非常有用。但是當我看到來自Brendan http://www.youtube.com/watch?v=aZJnI6hxr-c的視頻時，我確實印象深刻，並且我在webgl方面沒有多少經驗，因此開始查看three.js，因此我的帖子。 – Linus

我已經做了很多PLAY框架，threejs和WebGL的工作。我確信我在過去的項目檔案中有一些符合你的規格的東西。在此期間，您可能會檢查RaphaëlJS（http://raphaeljs.com/）...一個簡化矢量圖形工作的小型JS庫。我剛剛在我的網站上發佈了這個小樣本：http://ddeloy.com/new/raphael/raphael_click_event.html – ddeloy

http://ddeloy.com/new/WebGL/geolocation-map.html – ddeloy

我發現的OpenLayers在過去的一週。非常非常令人印象深刻的框我強烈建議看看它。 OpenLayers.org是一個開放源代碼的JavaScript網絡映射庫，與其他替代品不同，如Leaflet或Google Maps API，因爲它有大量的組件。

我花了整個週末通過將OpenLayers與API（如MapBox，WebGL等）集成來創建示例應用程序...畢竟我們對OpenLayers印象深刻 - 我計劃在OpenLayers中使用即將到來的POC /項目。

這是我的test harness的鏈接。從那裏你也可以下載所有例子的代碼。

來源

2013-06-03 10:42:12 ddeloy

谷歌地圖使用three.js和webgl

回答

相關問題