WebGL Earth — новый открытый и бесплатный трёхмерный геоинтерфейс для настольных ПК и мобильных устройств

Автор: | 26.02.2011

Геоинтерфейс 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>

Посмотреть пример в действии.

Небольшое демо видео

И в конце заметки я даю Вам ссылки для загрузки браузеров, чтобы можно было посмотреть примеры.

Mozilla Firefox 4 Beta
Google Chrome

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *