Геоинтерфейс WebGL Earth разработан компанией Klokan Technologies и распространяется бесплатно как продукт с открытым исходным кодом (Open Source). Позволяет в обычном интернет-браузере, без загрузки дополнительных плагинов, поддерживать 3D представление ситуации в единой геоцентрической системе координат.
Сайт проекта расположен по адресу http://www.webglearth.org
Основные особенности сервиса WebGL Earth:
— Работа без плагина в браузерах последнего поколения (Firefox4, Chrome 9 +, поддержка мобильных устройств iPhone / IPad / Android обещана чуть позже);
— Отображает существующие карты (OpenStreetMap, Bing, …);
— Позволяет вращать и масштабировать земной шар;
— Поддерживает создание пользовательских карт.
Если у Вас есть поддерживаемый браузер, Вы можете посмотреть работу на странице здесь
Геоинтерфейс WebGL Earth работает на основе стандарта WebGL — спецификация которого разрабатывается в настоящее время, предназначенная для отображения 3D графики в web браузерах.
Данная технология позволяет внедрять аппаратно-ускоренную 3D графику в веб-страницы без необходимости использовать специальные плагины веб-браузера на любой платформе, поддерживающей OpenGL или OpenGL ES.
Для WebGL Earth существует специальный API, который позволяет встроить и управлять экземпляром WebGL Earth на Вашем веб-сайте.
Несколько примеров использования API WebGL Earth:
1. Базовый пример использования
Код примера:
<!DOCTYPE HTML> <html> <head> <script src="http://www.webglearth.com/api.js"></script> <script> function initialize() { var options = { zoom: 1, center: [56.324461,44.00189] }; var earth = new WebGLEarth('earth_div', options); } </script> </head> <body onload="initialize()"> <div id="earth_div" style="width:800px;height:600px;border:1px solid gray; padding:2px;"></div> </body> </html> |
В начале мы подключаем скрипт с API строкой <script src="http://www.webglearth.com/api.js"></script>.
После задаем параметры для отображения: уровень масштаба zoom: 1, координаты центра center: [56.324461,44.00189] .
Задаем контейнер для отображения: область div с именем earth_div.
2. Анимация
Код примера:
<!DOCTYPE HTML> <html> <head> <script src="http://www.webglearth.com/api.js"></script> <script> var earth; function initialize() { var options = { zoom: 3, center: [40.0, -10.0] }; earth = new WebGLEarth('earth_div', options); // Start a simple rotation animation setInterval('var c = earth.getCenter(); earth.setCenter([c[0],c[1]+0.1]);', 30); } </script> </head> <body onload="initialize()"> <div id="earth_div" style="width:600px;height:400px;border:1px solid gray; padding:2px;"></div> </body> </html> |
Здесь также в начале задаются параметры для отображения, а затем задается интервал для смещения центральной точки.
3. Отображение OpenStreetMap
Код примера:
<!DOCTYPE HTML> <html> <head> <script src="http://www.webglearth.com/api.js"></script> <script> var earth; function initialize() { var options = { zoom: 3, map:WebGLEarth.Maps.OSM }; earth = new WebGLEarth('earth_div', options); } </script> </head> <body onload="initialize()"> <div id="earth_div" style="width:800px;height:600px;border:1px solid gray; padding:2px;"></div> </body> </html> |
4. Отображение пользовательского слоя тайлов
Код примера:
<!DOCTYPE HTML> <html> <head> <script src="http://www.webglearth.com/api.js"></script> <style type="text/css" media="screen"> #earth_div { width:600px; height:400px; border:1px solid gray; padding:2px; background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(253,253,253)), color-stop(0.15, rgb(253,253,253)), color-stop(0.53, rgb(223,223,223)), color-stop(0.56, rgb(255,255,255)), color-stop(1, rgb(253,253,253)) ); background-image: -moz-linear-gradient( center bottom, rgb(253,253,253) 0%, rgb(253,253,253) 15%, rgb(223,223,223) 53%, rgb(255,255,255) 56%, rgb(253,253,253) 100% ); } </style> <script> function initialize() { var earth = new WebGLEarth('earth_div', { zoom:2 }); earth.initMap(WebGLEarth.Maps.CUSTOM, ['TMS','http://webglearth.googlecode.com/svn/resources/tms/{z}/{x}/{y}.jpg',1,5,256,true]); // name, url, minZoom, maxZoom, tileSize, flip-y-axis earth.setMap(WebGLEarth.Maps.CUSTOM, 'TMS'); } </script> </head> <body onload="initialize()"> <div id="earth_div"></div> </body> </html> |
Небольшое демо видео
И в конце заметки я даю Вам ссылки для загрузки браузеров, чтобы можно было посмотреть примеры.