Создание собственной карты с использованием API Яндекс.Карт 2.x

Автор: | 04.08.2013

На страницах своего блога я уже писал о том, как можно создать собственную карту, используя API Яндекс.Карт 1.х в заметках: «Создание собственной карты с использованием API Яндекс.Карт» и «Работаем с программой подготовки слоя тайлов для API Яндекс.Карт».

Но сейчас основной версией API Яндекс.Карт стала 2.x.

А существующий инструмент «Подготовка слоя тайлов» генерирует код для старой версии API.

Чтобы подготовленные тайлы можно было использовать в API Яндекс.Карт 2.x, разработчиками API был подготовлен специальный класс миграции.

Давайте возьмем примеры из заметки «Работаем с программой подготовки слоя тайлов для API Яндекс.Карт» и переделаем его, с использованием описанного класса, под API 2.x.

Первый пример, просмотр большого изображения без превязки к коррдинатам.

Просмотр большого изображения без превязки к коррдинатам

Вот исходный код старого примера:

<!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" xml:lang="ru" lang="ru">
<head>
    <title>Пример карты</title>
    <script src="http://api-maps.yandex.ru/1.1/index.xml?key=ACuF2EkBAAAAzahYCgIASLsFm9n8EPvNjaTc8nAWiETKgYcAAAAAAAAAAAC-q61vWtIK3Kzt2yQ9qFaGJGKzXw==" type="text/javascript"></script>
    <script type="text/javascript">
        window.onload = function () {
            var options = {
                    tileUrlTemplate: "./%z/tile-%x-%y.jpg",
                    controls: {
                        typeControl: false,
                        miniMap: false,
                        toolBar: true,
                        scaleLine: false
                    },
                    scrollZoomEnabled: false,
                    mapCenter: new YMaps.GeoPoint(-179.725341796875, 85.0663745554664),
                    backgroundMapType: YMaps.MapType.NONE,
                    mapZoom: 12,
                    isTransparent: true,
                    smoothZooming: false,
                    layerKey: "my#layer",
                    mapType: {
                        name: "Пример карты",
                        textColor: "#000000"
                    },
                    copyright: ""
                },
                map = new YMaps.Map(document.getElementById("YMapsID")),
                myData = new YMaps.TileDataSource(options.tileUrlTemplate, options.isTransparent, options.smoothZooming);
 
            myData.getTileUrl = function (tile, zoom) {
                return this.getTileUrlTemplate().replace(/%x/i, tile.x).replace(/%y/i, tile.y).replace(/%z/i, zoom);
            }
 
            var MyLayer = function () {
                return new YMaps.Layer(myData);
            }
            YMaps.Layers.add(options.layerKey, MyLayer);
 
            var mapLayers = options.backgroundMapType ? options.backgroundMapType.getLayers() : [],
                myMapType = new YMaps.MapType(YMaps.jQuery.merge(mapLayers, [ options.layerKey ]), options.mapType.name, { textColor: options.mapType.textColor });
 
            map.setCenter(options.mapCenter, options.mapZoom, myMapType);
            if (options.copyright) {
                map.addCopyright(options.copyright);
            }
 
            if (options.controls.typeControl) {
                map.addControl(new YMaps.TypeControl([ myMapType, YMaps.MapType.MAP, YMaps.MapType.SATELLITE, YMaps.MapType.HYBRID ], [1, 2, 3]));
            }
 
            if (options.controls.miniMap) {
                map.addControl(new YMaps.MiniMap());
            }
            if (options.controls.toolBar) {
                map.addControl(new YMaps.ToolBar());
            }
            if (options.controls.scaleLine) {
                map.addControl(new YMaps.ScaleLine());
            }
            if (options.scrollZoomEnabled) {
                map.enableScrollZoom();
            }
            map.addControl(new YMaps.Zoom());
        }
    </script>
</head>
<body>
    <div id="YMapsID" style="width:550px;height:400px"></div>
<p><a href="/?p=494" title="Работаем с программой подготовки слоя тайлов для API Яндекс.Карт." target="_blank">Вернуться к тексту заметки</a></p>
</body>
</html>

Новый код:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
    <title>Пример картыAPI Яндекс.Карт 2.x</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
    <script src="http://api-maps.yandex.ru/2.0/?load=package.standard&lang=ru-RU" type="text/javascript"></script>
    <script src="tiler-converter.js" type="text/javascript"></script>
 
    <script type="text/javascript">
        /**
         * Забираем этот объект из выдачи приложения "Подготовка слоя тайлов".
         * @see http://api.yandex.ru/maps/doc/jsapi/1.x/dg/concepts/ymapstiler.xml
         */
        var options = {
                    tileUrlTemplate: "./%z/tile-%x-%y.jpg",
                    controls: {
                        typeControl: false,
                        miniMap: false,
                        toolBar: true,
                        scaleLine: false
                    },
                    scrollZoomEnabled: false,
                    mapCenter: new YMaps.GeoPoint(-179.725341796875, 85.0663745554664),
                    backgroundMapType: YMaps.MapType.NONE,
                    mapZoom: 9,
                    isTransparent: true,
                    smoothZooming: false,
                    layerKey: "my#layer",
                    mapType: {
                        name: "Пример карты",
                        textColor: "#000000"
                    },
                    copyright: "",
                /**
                 * Диапазон доступных масштабов на данном слое карты.
                 * Эти два поля приложение не генерит,
                 * их нужно дописать вручную, чтобы корректно работал ZoomControl.
                 */
                layerMinZoom: 9,
                layerMaxZoom: 12
            };
 
        ymaps.ready(function () {
            // Передаем его в конструктор класса TilerConverter и получаем ссылку на карту.
            var myMap = (new TilerConverter(options)).getMap();
        });
    </script>
    <style type="text/css">
        #YMapsID {
            width: 800px;
            height: 600px;
        }
    </style>
</head>
<body>
    <div class="hero-unit">
        <div class="container">
            <p>Пример карты - API Яндекс.Карт 2.x</p>
            <div id="YMapsID"></div>
        </div>
    </div>
</body>
</html>

Перечислю основные отличия.

Мы подключаем другое API 2.x. Строкой

<script src="http://api-maps.yandex.ru/2.0/?load=package.standard&lang=ru-RU" type="text/javascript"></script>

Затем подключаем класс для миграции с версии 1.x на 2.0.

<script src="tiler-converter.js" type="text/javascript"></script>

После этого мы определяем параметры нашей карты options.

И перед добавлением нового слоя на карту, передаем все параметры нашему классу

var myMap = (new TilerConverter(options)).getMap();

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

Второй пример, с геопривязкой

Своя карта с геопривязкой

Код примера:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
    <title>Карта Балахны</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 
    <script src="http://api-maps.yandex.ru/2.0/?load=package.standard&lang=ru-RU" type="text/javascript"></script>
    <script src="tiler-converter.js" type="text/javascript"></script>
 
    <script type="text/javascript">
        /**
         * Забираем этот объект из выдачи приложения "Подготовка слоя тайлов".
         * @see http://api.yandex.ru/maps/doc/jsapi/1.x/dg/concepts/ymapstiler.xml
         */
        var options = {
                tileUrlTemplate: "./%z/tile-%x-%y.jpg",
                controls: {
                    typeControl: true,
                    miniMap: true,
                    toolBar: true,
                    scaleLine: true
                },
                scrollZoomEnabled: true,
                mapCenter: new YMaps.GeoPoint(43.5723586595115, 56.5053420690801),
                backgroundMapType: YMaps.MapType.NONE,
                mapZoom: 12,
                isTransparent: true,
                smoothZooming: false,
                layerKey: "my#layer",
                mapType: {
                    name: "Карта Балахны",
                    textColor: "#000000"
                },
                copyright: "",
                /**
                 * Диапазон доступных масштабов на данном слое карты.
                 * Эти два поля приложение не генерит,
                 * их нужно дописать вручную, чтобы корректно работал ZoomControl.
                 */
                layerMinZoom: 12,
                layerMaxZoom: 14
            };
 
        ymaps.ready(function () {
            // Передаем его в конструктор класса TilerConverter и получаем ссылку на карту.
            var myMap = (new TilerConverter(options)).getMap();
        });
    </script>
    <style type="text/css">
        #YMapsID {
            width: 800px;
            height: 600px;
        }
    </style>
</head>
<body>
    <div class="hero-unit">
        <div class="container">
            <p>Карта Балахны - API Яндекс.Карт 2.x</p>
            <div id="YMapsID"></div>
        </div>
    </div>
</body>
</html>

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

Теперь Вы можете использовать, ранее подготовленные тайлы с новой версией API Яндекс.Карт.

Загрузить архив с файлами примеров

Для написания использовалась статья «Миграция кода создания пользовательского слоя с версии 1.x на 2.0».

Создание собственной карты с использованием API Яндекс.Карт 2.x: 2 комментария

  1. Irina

    Скажите, а откуда в примере без геопривязки берется такой центр: mapCenter: new YMaps.GeoPoint(-179.725341796875, 85.0663745554664)
    ?

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

      В процессе работы с программой подготовки тайлов автоматически формируется HTML-код файла для карты (правда для версии API 1.x),
      в этом коде уже прописаны координаты центра карты.

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

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