Инструмент для определения координат тайла на Яндекс.Картах

Автор: | 25.04.2010

Если Вы собираетесь накладывать свою карту поверх Яндекс.Карт может возникнуть необходимость определения номеров тайлов для конкретного масштаба.

Помочь Вам может инструмент для определения координат и номера тайла.

В этой заметке я покажу, как его легко можно создать.


В начале нам понадобиться код из двух примеров расположенных на сайте документации по API Яндекс.Карт.

Это примеры «Открытие балуна с координатами и значением масштаба при щелчке кнопкой мыши на карте» и «Вывод на экран сообщения с тайловыми координатами».

С начала мы возьмем исходный код первого примера и немного изменим его, используя часть кода второго примера.

Код первого примера:

<!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>
    <title>Примеры. События. Передача аргументов в слушатели событий.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://api-maps.yandex.ru/1.1/index.xml?key=ANpUFEkBAAAAf7jmJwMAHGZHrcKNDsbEqEVjEUtCmufxQMwAAAAAAAAAAAAvVrubVT4btztbduoIgTLAeFILaQ==" type="text/javascript"></script>
    <script type="text/javascript">
        // Создание обработчика для события window.onLoad
        YMaps.jQuery(function () {
            // Создание экземпляра карты и его привязка к созданному контейнеру
            var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
 
            // Установка для карты ее центра и масштаба
            map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10);
 
            // Добавление элементов управления
            map.addControl(new YMaps.TypeControl());
            map.addControl(new YMaps.Zoom());
 
            // При щелчке на карте показывается балун со значениями координат указателя мыши и масштаба
            YMaps.Events.observe(map, map.Events.Click, function (map, mEvent) {
                var myHtml = "Значение: " + mEvent.getGeoPoint() + " на масштабе " + map.getZoom();
                map.openBalloon(mEvent.getGeoPoint(), myHtml);
            });
        });
    </script>
</head>
 
<body>
    <div id="YMapsID" style="width:600px;height:400px"></div>
</body>
 
</html>

В этом коде Вы можете изменить координаты центра карты и начальный уровень масштаба на необходимый вам.

Я изменю в строчке map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10); координаты центра на 43.99150,56.31534 — координаты точки в Нижнем Новгороде, а уровень масштаба оставлю тем же.

После этого мы изменим код в функции Ymaps.Events.observe, которая обрабатывает событие  щелчок кнопки мыши по карте.

Перед строкой присвоения значения для переменной myHtml мы помещаем две строчки из примера два:

// Перевод географических координат в пиксельные
var pixelsCoords = map.coordSystem.fromCoordPoint(map.getCenter()),
// Получение из пиксельных коорданит номер тайла и смещение внутри него
tile = map.tileCoordinates.fromPixels(pixelsCoords, map.getZoom());

Значение map.getCenter() мы заменяем на mEvent.getGeoPoint().

И строку определения переменной  myHtml записываем в следующем виде:

var myHtml = "Значение координат: " + mEvent.getGeoPoint()+"<br>находится в тайле № " + tile.number + " со смещением в " + tile.offset.toString() + "<br>на масштабе " + map.getZoom();

Приведу окончательный код примера:

<!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>
    <title>Инструмент для определения координат тайла на Яндекс.Карте</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://api-maps.yandex.ru/1.1/index.xml?key=ANpUFEkBAAAAf7jmJwMAHGZHrcKNDsbEqEVjEUtCmufxQMwAAAAAAAAAAAAvVrubVT4btztbduoIgTLAeFILaQ==" type="text/javascript"></script>
    <script type="text/javascript">
        // Создание обработчика для события window.onLoad
        YMaps.jQuery(function () {
            // Создание экземпляра карты и его привязка к созданному контейнеру
            var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
 
            // Установка для карты ее центра и масштаба
            map.setCenter(new YMaps.GeoPoint(43.99150,56.31534), 11);
 
            // Добавление элементов управления
            map.addControl(new YMaps.TypeControl());
            map.addControl(new YMaps.Zoom());
 
            // При щелчке на карте показывается балун со значениями координат указателя мыши и масштаба
            YMaps.Events.observe(map, map.Events.Click, function (map, mEvent) {
               // Перевод географических координат в пиксельные
           var pixelsCoords = map.coordSystem.fromCoordPoint(mEvent.getGeoPoint()),
           // Получение из пиксельных коорданит номер тайла и смещение внутри него
               tile = map.tileCoordinates.fromPixels(pixelsCoords, map.getZoom());
 
                var myHtml = "Значение координат: " + mEvent.getGeoPoint()+"<br>находится в тайле № " + tile.number + " со смещением в " + tile.offset.toString() + "<br>на масштабе " + map.getZoom();
                map.openBalloon(mEvent.getGeoPoint(), myHtml);
            });
        });
    </script>
</head>
 
<body>
    <div id="YMapsID" style="width:600px;height:400px"></div>
</body>
 
</html>

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

У нас получился функционал аналогичный примеру Tile Detector для Google Maps по адресу http://code.google.com/intl/ru-RU/apis/maps/documentation/examples/tile-detector.html

Надеюсь что, данный инструмент пригодиться в ваших разработках.

Инструмент для определения координат тайла на Яндекс.Картах: 4 комментария

  1. Владимир

    Здорово! Спасибо! Давно искал! А как передать значение координат переменной php, для дальнейших действий?

    1. admin Автор записи

      С помощью библиотеки jQuery передав значение php-скрипту методом GET или POST

  2. Anton

    ПОдскажите, пожалуйста, как присвоить input значение координат?

    1. admin Автор записи

      Нужно создать поле, куда будет передаваться значение с id=»mapcoord».
      Добавить строчку кода document.getElementById(«mapcoord»).innerHTML = mEvent.getGeoPoint(); после
      строки var myHtml = «Значение: » + mEvent.getGeoPoint() + » на масштабе » + map.getZoom();

Добавить комментарий для Anton Отменить ответ

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