Управление своими картами. Статьи

JavaScript API 1.x

Управление своими картами

Примеры использования пользовательских карт:

Просмотр планов и подробных карт местности

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

Для навигации по плоской поверхности используйте стандартный класс YMaps.CartesianCoordSystem, который задает двумерную декартову систему координат. В примере ниже показано, как с помощью API Яндекс.Карт организовать навигацию по карте рельефа морского дна Черного и Азовского морей (карта взята из энциклопедического словаря Брокгауза и Эфрона).

Для этого потребуется:

Собственно изображение карты, разбитое на тайлы;
Координаты левого нижнего и правого верхнего углов карты. В примере (-10.17, 21.03) и (37.29, 56.54), где первое число каждой пары - это долгота, второе - широта;
Длина единичного отрезка в системе координат в метрах. В примере длина дуги в один градус вдоль меридиана равна 111 километров;
Длина дуги в один градус вдоль параллели. Это значение зависит от широты, в примере взято среднее значение 78.56 километра.

Ниже приводится пример создания кода :

Создайте декартову систему координат.

var myCoordSystem = new YMaps.CartesianCoordSystem(
        new YMaps.Point(26.94, 38.39),  // Координаты левого нижнего угла
        new YMaps.Point(43.25, 50.36),  // Координаты правого верхнего угла
        new YMaps.Point(77180, 111100), // Масштаб
        4                               // Максимальный коэффициент  
                                        // масштабирования (отсчитывается от 0)
    );

Создайте карту:

var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0], {
    coordSystem: myCoordSystem // Пользовательская система координат
});

Создайте пользовательский источник тайлов:
```
var myData = new YMaps.TileDataSource("/i/maps/tiles/black_sea/", false, true);
```
Совет. Для привязки изображения карты к географическим координатам и нарезки его на тайлы используйте приложение API Яндекс.Карт "Подготовка слоя тайлов".

Создайте пользовательский тип карты:

var myType = new YMaps.MapType(["blacksea"], "Рельеф", {textColor: "#706f60", minZoom:0, maxZoom: 3});

Создайте обзорную карту:
```
var miniMap = new YMaps.MiniMap();
```
Задайте правило получения URL тайла по тайловым координатам и коэффициенту масштабирования:
```
myData.getTileUrl = function (tile, zoom) {
    return this.getTileUrlTemplate() + 'tile-' + zoom + '-' + tile.x + '-' + tile.y + '.png';
}
```
Добавьте в список слоев новый слой, использующий пользовательский источник данных:
```
YMaps.Layers.add('mediterranean', function () { return new YMaps.Layer(myData) });
```
Задайте пользовательский тип карты для основной и обзорной карт:
```
map.setType(myType);
miniMap.setType(myType);
```
Добавьте обзорную карту:
```
map.addControl(miniMap);
```

Добавьте тулбар и элемент масштабирования:

map.addControl(new YMaps.ToolBar());
map.addControl(new YMaps.Zoom({ noTips: true }));

Задайте центр карты и коэффициент масштабирования:
```
map.setCenter(new YMaps.Point(10,40), 1);
```
Включите опцию масштабирования колесом мыши:
```
map.enableScrollZoom();
```

Открыть пример в новом окне

Просмотр изображений и фотографий высокого разрешения

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

Для просмотра изображение или фотографию необходимо подготовить:

Скорректировать размер изображения так, чтобы его ширина и высота были равны между собой и кратны 256.
Нарезать изображение на тайлы (фрагменты размером 256x256 пикселов).
Загрузить тайлы на любой общедоступный хостинг изображений.

Совет. Для нарезки изображения на тайлы используйте приложение API Яндекс.Карт "Подготовка слоя тайлов".

Создайте объект YMaps.TileDataSource.

// Первым параметром конструктора требуется передать шаблон, по которому строится  имя тайла;
// В примере указан URL папки, в которой находятся подготовленные тайлы
var myData = new YMaps.TileDataSource("/i/maps/tiles/photo/", 0, 1);

// Далее указывается правило получения URL тайла по тайловым координатам (номеру)
//  и коэффициенту масштабирования
// В примере имена картинок имеют вид "tile-z-x-y.png",
// где z - коэффициент масштабирования, (x, y) - номер тайла (тайловые координаты)
myData.getTileUrl = function (tile, zoom) {
    return this.getTileUrlTemplate() + "tile-" + zoom + "-" + tile.x + "-" + tile.y + ".png";
}

Создайте класс слоя карты, который будет загружать тайлы:
```
var myLayer = function () {
  return new YMaps.Layer(myData);
};
```

Добавьте класс в хранилище слоев карты с ключом "my#photo":

// Первый параметр - уникальный ключ пользовательского слоя
YMaps.Layers.add('my#photo', myLayer);

Создайте новый тип карты с названием "Фотография". Этот тип карты будет содержать один слой тайлов: my#photo:
```
// Создает пользовательский тип карты
var myType = new YMaps.MapType(['my#photo'], 'Фотография');
```

Создайте декартову систему координат:

В качестве координат удобно использовать положение точки (в пикселах) относительно левого верхнего угла изображения. Например, если размер изображения составляет 4096х4096 пикселов, то координаты левого нижнего угла (0, 4096), а правого верхнего - (4096, 0).

var myCoordSystem = new YMaps.CartesianCoordSystem(
    new YMaps.Point(0, 4096),   // Координаты левого нижнего угла
    new YMaps.Point(4096, 0),   // Координаты правого верхнего угла
    8.5e-5,                     // Параметр указывает, скольким метрам 
                                // соответствует один пиксел на фотографии
    4                           // Максимальный коэффициент масштабировнаия, 
                                // (отсчитывается от 0)
);

Создайте карту и укажите ее тип:

var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0], {
    coordSystem: myCoordSystem // Пользовательская система координат
});

// Добавляет на карту строку копирайта
map.addCopyright("© Олег Карпов");

// Выставляет центр, коэффициент масштабирования и тип карты
map.setCenter(new YMaps.Point(2048, 2048), 1, myType);

// Включает масштабирование колесом мыши
map.enableScrollZoom();

Открыть пример в новом окне

Создание карты с пользовательскими тайлами

Основным назначением API является организация удобной работы с картами. Однако наличие изображения-подложки с картой не является обязательным условием для корректной работы объектов API. С помощью интерфейса YMaps.ITile возможно использовать в качестве подложки любые объекты.

В инструкции ниже описывается создание виртуального "холста" с графическим изображением. В качестве подложки используются HTML-элементы <div>, которым имеют белый фон и границы в виде прерывистой линии. На холсте изображена буква "Я" красного цвета.

Чтобы создать "холст" выполните следующие шаги:

Реализуйте интерфейс YMaps.ITile.

function myTile (dataSource) {
        // Позиция тайла (в пикселах) относительно левого верхнего угла карты
    var myPos = new YMaps.Point(), 

        // HTML-элемент тайла
        element = YMaps.jQuery("<div/>").addClass("myTile"),

        // Размер тайла
        originalSize = new YMaps.Point(256);

    // Добавляет тайл на карту
    this.onAddToMap = function (map, parentContainer) {
        element.appendTo(parentContainer);
    };

    // Удаляет тайл с карты
    this.onRemoveFromMap = function () {
        element.remove();
    };

    // Задает новую позицию тайла
    this.setPosition = function (position) {
        myPos.moveTo(position);
        element.css({
            left : myPos.x,
            top : myPos.y
        });
    };

    // Возвращает текущую позицию тайла
    this.getPosition = function () {
        return myPos.copy();
    };

    // Осуществляет загрузку тайла
    this.load = function (tile, zoom) {
        element
            .removeClass("myTileFail")
            .addClass("myTileSuccess");
    };

    // Выставляет тайл "404", если для данной области нет изображения
    this.error = function () {
        element
            .removeClass("myTileSuccess")
            .addClass("myTileFail");
    };

    // Отменяет загрузку
    this.abort = function () {
        element
            .removeClass("myTileFail")
            .addClass("myTileSuccess");
    };

    // Производит масштабирование тайла
    this.scale = function (coeff) {
        var newSize = originalSize.copy().scale(coeff);
        element.css({
            width : newSize.x,
            height : newSize.y
        });
    };
}

Задайте необходимые CSS-стили:

.myTile {
    position: absolute;
    width: 256px;
    height: 256px;
    border: 1px dashed gray;
    border-collapse: collapse;
}

.myTileSuccess {
    background: #FFF;
}

.myTileFail {
    background: antiquewhite;
}

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

// Создает декартову систему координат:
var myCoordSystem = new YMaps.CartesianCoordSystem(
        new YMaps.Point(0, 0),      // Координаты левого нижнего угла
        new YMaps.Point(300, 300),  // Координаты правого верхнего угла
        1                           // Масштаб
    ),

    // Создает карту
    map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0], {
        coordSystem: myCoordSystem // передаем нашу систему координат
    }),

    // Создает пользовательский источник тайлов
    myData = new YMaps.TileDataSource(),

    // Создает пользовательский тип карты
    myType = new YMaps.MapType(["plot"], "Чертеж", {textColor: "#000000", minZoom: 0, maxZoom: myCoordSystem.getMaxZoom() }),

    // Создает обзорную карту
    miniMap = new YMaps.MiniMap();

// Переопределяет функцию получения тайла
myData.getTile = function () {
    return new myTile();
}

// Добавляет в список слоев новый слой, использующий пользовательский источник данных
YMaps.Layers.add("plot", function () { return new YMaps.Layer(myData) });

// Задает пользовательский тип для основной и обзорной карты
map.setType(myType);
miniMap.setType(myType);

// Добавляет на карту тулбар и элемент масштабирования
map.addControl(new YMaps.ToolBar());
map.addControl(new YMaps.Zoom({ noTips: true }));

// Выставляет центр карты и масштаб
map.setCenter(new YMaps.Point(150, 150), 0);

// Включает масштабирование колесом мыши
map.enableScrollZoom();

Нанесите на полученный "холст" требуемые объекты (в примере буква "Я" изображается с помощью двух многоугольников):

// Задает стиль многоугольников
var style = new YMaps.Style();
style.polygonStyle = new YMaps.PolygonStyle();
style.polygonStyle.outline = false
style.polygonStyle.fillColor = "f9001dff"
YMaps.Styles.add("polygon#yandex", style);

// Рисует многоугольники
var polygon1 = new YMaps.Polygon([
        new YMaps.Point(215, 15),
        new YMaps.Point(215, 285),
        new YMaps.Point(164, 285),
        new YMaps.Point(164, 260),
        new YMaps.Point(188, 260),
        new YMaps.Point(188, 135),
        new YMaps.Point(147, 135),
        new YMaps.Point(82, 15),
        new YMaps.Point(115, 15),
        new YMaps.Point(167, 110),
        new YMaps.Point(188, 110),
        new YMaps.Point(188, 15)
        ], { style: "polygon#yandex", clickable: false }),

    polygon2 = new YMaps.Polygon([
        new YMaps.Point(165.00, 285.00),
        new YMaps.Point(153.48, 283.80),
        new YMaps.Point(142.27, 280.23),
        new YMaps.Point(131.68, 274.39),
        new YMaps.Point(122.01, 266.44),
        new YMaps.Point(113.50, 256.60),
        new YMaps.Point(106.40, 245.13),
        new YMaps.Point(100.90, 232.35),
        new YMaps.Point(97.14, 218.60),
        new YMaps.Point(95.24, 204.27),
        new YMaps.Point(95.24, 189.73),
        new YMaps.Point(97.14, 175.40),
        new YMaps.Point(100.90, 161.65),
        new YMaps.Point(106.40, 148.87),
        new YMaps.Point(113.50, 137.40),
        new YMaps.Point(122.01, 127.56),
        new YMaps.Point(131.68, 119.61),
        new YMaps.Point(142.27, 113.77),
        new YMaps.Point(153.48, 110.20),
        new YMaps.Point(165.00, 109.00),
        new YMaps.Point(165.00, 134.00),
        new YMaps.Point(158.42, 134.86),
        new YMaps.Point(152.01, 137.41),
        new YMaps.Point(145.96, 141.59),
        new YMaps.Point(140.43, 147.28),
        new YMaps.Point(135.57, 154.33),
        new YMaps.Point(131.51, 162.54),
        new YMaps.Point(128.37, 171.69),
        new YMaps.Point(126.22, 181.53),
        new YMaps.Point(125.14, 191.80),
        new YMaps.Point(125.14, 202.20),
        new YMaps.Point(126.22, 212.47),
        new YMaps.Point(128.37, 222.31),
        new YMaps.Point(131.51, 231.46),
        new YMaps.Point(135.57, 239.67),
        new YMaps.Point(140.43, 246.72),
        new YMaps.Point(145.96, 252.41),
        new YMaps.Point(152.01, 256.59),
        new YMaps.Point(158.42, 259.14),
        new YMaps.Point(165.00, 260.00)
    ], { style: "polygon#yandex", clickable: false });

map.addOverlay(polygon1);
map.addOverlay(polygon2);

Открыть пример в новом окне

Была ли статья полезна?

Расскажите, что вам не понравилось в статье:

Поиск и построение маршрутов

Примеры

Поиск и построение маршрутов

Примеры