Геоинтерфейс 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> |
Небольшое демо видео
И в конце заметки я даю Вам ссылки для загрузки браузеров, чтобы можно было посмотреть примеры.