Интернет, компьютеры, софт и прочий Hi-Tech

OpenLayers и Yandex.Maps

OpenLayers — это самый продвинутый в категории свободного софта JavaScript-фреймворк для работы с вебкартами. Yandex.Maps (или Яндекс.Карты по русски) — это российский картографический веб-сервис, аналогичный Google.Maps и VirtualEarth.

Плагин к OpenLayers для работы с Яндекс.Картами, был разработан aka Den еще в 2009 году. По следующей ссылке можно найти его собственное описание плагина: http://itranga.blogspot.com/2009/03/alert111.html (на английском языке). Смотрите также пример работы Яндекс.Карт в OpenLayers с помощью этого плагина (на официальном ресурсе разработчиков OpenLayers).

Определенную сложность при работе с картами Яндекс и OpenLayers составляет искажение широты, возникающее из-за того, что элипсоидная модель Земли, которая используется в Яндекс.Картах не совпадает со сфероидной, принятой для карт Google и Bing, и которую очень хорошо понимает OpenLayers. Автор плагина решил эту проблему.

Исходный код плагина (файл OL_Yandex.js) доступен для просмотра здесь. Его использование для вывода карты на HTML-странице можно посмотреть здесь.

Кроме того автор в своем блоге предлагает «простую» версию JS-кода для работы с Яндекс.Картами и OpenLayers. К сожалению, согласно утверждению самого автора, проблема с искажением широты осталась в «простой» версии нерешённой, из-за того, что автор не знает, какую из EPSG-проекций используют Яндекс.Карты. Если вы это знаете, то можете сообщить ее в блоге автора. Список известных EPSG-проекций (4362 на момент написания этой заметки) можно найти на сайте spatialreference.org.

Потестируйте «простую» версию от aka Den:

Вот код этой карты с комментариями:

<!-- Подключаем фреймворк OpenLayers -->
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>

<!-- Создаем div, в котором будет отображаться карта -->
<div id="YaMap" style="border:1px solid #c6c6c6;width:500px;height: 300px;"></div>

<!-- Код, описывающий карту -->
<script type="text/javascript">
// Функция, возвращающая адреса тайлов Яндекс.Карты
function yandex_getTileURL(bounds) {
    var r = this.map.getResolution();
    var maxExt = (this.maxExtent) ? this.maxExtent : YaBounds;
    var w = (this.tileSize) ? this.tileSize.w : 256;
    var h = (this.tileSize) ? this.tileSize.h : 256;
    var x = Math.round((bounds.left - maxExt.left)/(r * w));
    var y = Math.round((maxExt.top - bounds.top)/(r * h));
    var z = this.map.getZoom();
    var lim = Math.pow(2, z);
    if (y <0>= lim) {
        return OpenLayers.Util.getImagesLocation() + "404.png";
    } else {
        x = ((x % lim) + lim) % lim;
        var url = (this.url) ? this.url : "http://vec02.maps.yandex.net/";
        return url + "tiles?l=map&v=2.2.3&x=" + x + "&y=" + y + "&z=" + z;
    }
};

// Границы Яндекс.Карты в пикселях
var YaBounds = new OpenLayers.Bounds(-20037508, -20002151, 20037508, 20072865);

// Объект карты
var map = new OpenLayers.Map('YaMap', {
    projection: new OpenLayers.Projection("EPSG:900913"),
    displayProjection: new OpenLayers.Projection("EPSG:4326"),
    units: "m",
    maxResolution: 156543.0339,
    maxExtent:new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508.34)
});

// Слой Яндекс.Карты
var yandexMaps =
    new OpenLayers.Layer.TMS("Yandex.Maps", "http://vec02.maps.yandex.net/",
    {
        maxExtent: YaBounds,
        type: "png",
        getURL: yandex_getTileURL,
        numZoomLevels: 18,
        attribution: '<a href="http://beta-maps.yandex.ru/">Яндекс.Карты</a>',
        transitionEffect: 'resize'
    });

// Добавляем на карту слои yandexMaps и OpenStreetMap
map.addLayers([yandexMaps, new OpenLayers.Layer.OSM()]);

// Добавляем контрол переключения слоев
map.addControl(new OpenLayers.Control.LayerSwitcher());

// Начальный зум, с которым загружается карта
map.zoomTo(4);

// Центр карты помещаем над Ташкентом
var proj = new OpenLayers.Projection("EPSG:4326");
var point = new OpenLayers.LonLat(69.28, 41.31);
map.setCenter(point.transform(proj, map.getProjectionObject()));
</script>

Автор: Дмитрий Скоробогатов, 21.04.2011

Предыдущие публикации:

Последнее редактирование: 2011-04-21 13:13:06

Метки материала: openlayers, yandex, yandex.maps, openlayers и yandex, яндекс, javascript, скрипты

Оставьте, пожалуйста, свой комментарий к публикации

Представиться как

Антибот:

Просьба не постить мусор. Если вы хотите потестить xBB, воспользуйтесь кнопкой предварительного просмотра на панели инструментов xBBEditor-а.