google maps using three.js и webgl

У меня есть тысячи точек, которые нужно нарисовать на картах Google и получили очень отзывчивые карты, используя пример от https://github.com/ubilabs/google-maps-api-threejs-layer. У кого-нибудь есть игра на этом и интересно, можно ли иметь разные цветные маркеры и возможные события маркерного щелчка?google maps using three.js и webgl

Оцените любые указатели или примеры в Интернете.

источник

2013-05-30 Linus

Миллионы точек данных, пригодных для клики, могут быть нарисованы на карте google с помощью webgl.

Точка данных представлена парой x, y для местоположения на холсте, int для размера, цвета вне экрана и цвета на экране. Эти значения хранятся в отдельных типизированных массивах.

Каждая точка данных имеет уникальный цвет rgb, чтобы действовать как ключ в таблице поиска идентификаторов точек данных.

Создайте текстуру, чтобы сохранить цвета вне экрана и отобразить их в буфер вне экрана. В событии загрузите буфер без экрана и используйте glReadPixels для получения цвета rgb щелчка пикселя, а затем найдите идентификатор в таблице поиска. Точки в буфере на экране, что видит пользователь, могут совместно использовать общий цвет.

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

Решение основано на Брендан Кенни Google Maps + HTML5 + Spatial Data Visualization что объясняет некоторые из кода в отрывке выше на 30 мин отметки, и Displaying WebGL data on Google Maps.

Демонстрационная версия содержит менее десяти точек данных, но вы можете так же легко нарисовать более 16 миллионов выбираемых точек данных, используя все комбинации значений rgb.

источник

2014-12-26 07:10:25

Вот ссылка на приложение jQuery/google map. Не совсем то, что вы ищете; однако вы можете найти пример полезным. Не стесняйтесь использовать его - его можно загрузить с моего сайта.

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, трижды и 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 с открытым исходным кодом, отличная от других альтернатив, таких как API-интерфейсы «Листовка» или Google Maps, из-за огромного набора компонентов.

Я провел весь уик-энд, создав примеры приложений, объединив OpenLayers с такими API, как MapBox, WebGL и т. Д. После того, как все было сказано и сделано, я был очень впечатлен OpenLayers - и я планирую использовать OpenLayers в предстоящий POC/Project.

Вот ссылка на мойtest harness. Оттуда вы также можете загрузить код для всех примеров.

источник

2013-06-03 10:42:12 ddeloy

google maps using three.js и webgl

ответ

Смежные вопросы