Знакомство с проектом OpenStreetMap

Автор: | 30.10.2010
9 комментариев

В этой заметке я хочу познакомить Вас с картографическом сервисом OpenStreetMap и примерами его использования на сайтах.

Еще до появления карт Google в 2004 году Стивом Костом (Steve Coast) из Великобритании был основан проект OpenStreetMap, целью которого было нарисовать карту всего мира.

Это свободный проект по совместному развитию общедоступных карт и схем городов, улиц, дорог с помощью ручного или автоматического ввода данных, а также получения данных с портативных GPS-приёмников.

Над созданием карты работает сообщество пользователей из различных населенных пунктов мира, каждый из которых добавляет небольшой кусочек информации.

Данные создаваемые в рамках OpenStreetMap распространяются по лицензии Creative Commons Attribution-ShareAlike 2.0, подразумевающей свободное распространение, результаты любых изменений должны публиковаться под той же лицензией.

Как происходит работа с данными:

1. С помощью GPS-приемника записывается треки (набор точек, полученных с помощью GPS) — данные о дорогах.
2. GPS-данные приеобразуютя в формат GPX, это можно сделать либо с помощью самого устройства или программой GPSBabel.
3. Загрузить данные в OpenStreetMap, предварительно создав учетную запись и перейти в личный раздел, нажать на ссылку My traces (мои треки) .
4. Введенные данные можно редактировать онлайн используя редактор Potlatch построенный на базе Flash или офлайн JOSM (Java) или Merkaator(С++).

Подробнее о работе с OpenStreetMap можно прочитать здесь:

Данные с OpenStreetMap можно свободно использовать на своих сайтах.

1. Используем API Google Maps v3

Код примера:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Отображение карты OpenStreetMap с помощью API Google Maps v3</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript">  
  function initialize() {
 
  // Задаем свойства карты и инициализируем ее
 
		var options = {
		  scrollwheel: false,
		  scaleControl: true,
		  mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
		}
 
		var map = new google.maps.Map(document.getElementById("map"), options);
		map.setCenter(new google.maps.LatLng(56.316537,43.998779));
		map.setZoom(12);
 
		// Задаем слой с OSM
 
		var openStreet = new google.maps.ImageMapType({
		  getTileUrl: function(ll, z) {
			var X = ll.x % (1 << z);  // wrap
			return "http://tile.openstreetmap.org/" + z + "/" + X + "/" + ll.y + ".png";
		  },
		  tileSize: new google.maps.Size(256, 256),
		  isPng: true,
		  maxZoom: 18,
		  name: "OSM",
		  alt: "Слой с Open Streetmap"
		}); 
 
		//Добавляем слои к карте
 
		map.mapTypes.set('osm', openStreet);
		map.setMapTypeId('osm');
 
		map.setOptions({
		  mapTypeControlOptions: {
			mapTypeIds: [
			  'osm',
			  google.maps.MapTypeId.ROADMAP,
			  google.maps.MapTypeId.TERRAIN,
			  google.maps.MapTypeId.SATELLITE,
			  google.maps.MapTypeId.HYBRID
			],
			style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
		  }
		});
 
  }
 
</script>
</head> 
 
<body onload="initialize()"> 
	<div id="map" style="width:800px;height:600px;"></div>	
</body> 
</html>

Поясню данный код.

В начале мы задаем свойства карты и инициализируем ее.

После этого создаем новый тип карты osm с набором свойств openStreet.

С сайта по адресу http://tile.openstreetmap.org/ мы берем тайлы размером 256 на 256 пикселей для каждого масштабного уровня, максимальный уровень масштаба maxZoom: 18, название слоя OSM.

Добавляем созданный тип к нашей карте

map.mapTypes.set(‘osm’, openStreet);
map.setMapTypeId(‘osm’);

Кроме этого добавляем имеющиеся типы карт Google Maps:

  • ROADMAP стандартная карта Google Maps в формате 2D, схемы дорог и названия населенных пунктов;
  • SATELLITE карта, составленная из снимков с космоса;
  • HYBRID отображает комбинацию первых двух типов карт – снимки из космоса и схемы дорог, названия городов;
  • TERRAIN отображает на карте рельеф местности(реки, горы).

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

2. Используем OpenLayers

OpenLayers — OpenSource библиотека, написанная на JavaScript, предназначенная для создания карт на основе программного интерфейса (API), подобного GoogleMap API или MSN Virtual Earth API. Библиотека включает в себя компоненты из JavaScript-библиотек Rico и Prototype JavaScript Framework.

Код примера:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Отображение карты OpenStreetMap с помощью OpenLayers</title>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript"> 
      function init() {
       var map = new OpenLayers.Map("basicMap");
        var mapnik = new OpenLayers.Layer.OSM();
        map.addLayer(mapnik);
        map.setCenter(new OpenLayers.LonLat(43.998779,56.316537) // Центр карты
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // преобразование из WGS 1984
            new OpenLayers.Projection("EPSG:900913") // в Spherical Mercator Projection
          ), 12 // Уровень масштаба
        );
      }
    </script>
  </head>
  <body onload="init();">
   <div id="basicMap" style="width:800px;height:600px;"></div>
  </body>
</html>

В начале мы подключаем сам скрипт OpenLayers.js с самого сайта http://openlayers.org

Определяем карту и контейнер для нее basicMap.

Подключаем слой с картой OpenStreetMap:

var mapnik = new OpenLayers.Layer.OSM();
map.addLayer(mapnik);

Задаем центр карты и уровень масштаба.

OpenLayers имеет возможность преобразования картографических проекций.

В данном примере используемая в OpenStreetMap проекция WGS 1984 преобразуется в проекцию, используемую в Google Maps – Меркатора.

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

Больше узнать о работе с OpenLayers можно здесь:

OpenLayers: начало работы

RU:OpenLayers

Знакомство с проектом OpenStreetMap: 9 комментариев

  2. Александр

    Интересно а можно както OSM подгружать в Yandex карты?

    Ответить ↓
    1. admin Автор записи

      У Яндекс.Карт и OSM используются разные картографические проекции, поэтому при добавлении карт OSM на Яндекс.Карты нужно проводить пересчет координат.

      Ответить ↓
  4. Евгений

    интересно, а как получить lat/lon-координаты и, если можно, адрес по клику мыши в любой точке map = new OpenLayers.Map(«basicMap»)?

    Ответить ↓
    1. admin Автор записи

      При использовании для вывода API Google Maps v3 координаты получить легко отслеживая событие клика по карте.
      С определением адреса все сложнее, нужно посылать вопрос к геокодеру с данными OpenStreetMap, например используя CloudMade

      Ответить ↓

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

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