Создание собственной карты

Войти

Экспорт

Сохранить как файлыЭкспорт на JSFiddle

Layer, MapType, projection.Cartesian, Map

АПИ Яндекс.Карт может использоваться для отображения на сайте карт и планов, не имеющих привязки к земной поверхности.

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

Для того чтобы использовать изображение в качестве пользовательского слоя Яндекс.Карт, его необходимо предварительно подготовить. Изображение требуется нарезать на фрагменты (тайлы) размером 256x256 пикселов. Каждый тайл хранится в отдельном файле (JPEG или PNG). Для каждого значения коэффициента масштабирования должен быть сформирован свой набор тайлов.

Затем создается новый тип карты. Чтобы создать новый тип карты используется класс MapType. При создании типа карты необходимо указать следующие параметры:

название типа
массив, содержащий конструкторы слоев или ключ.

Создаем карту и задаем для нее свой тип карты. Это возможно сделать через параметр type конструктора или метод setType экземпляра класса.

\n","custom_map.js":"ymaps.ready(function () {\n\n var LAYER_NAME = 'user#layer',\n MAP_TYPE_NAME = 'user#customMap',\n // Директория с тайлами.\n TILES_PATH = 'images/tiles',\n /* Для того чтобы вычислить координаты левого нижнего и правого верхнего углов прямоугольной координатной\n * области, нам необходимо знать максимальный зум, ширину и высоту изображения в пикселях на максимальном зуме.\n */\n MAX_ZOOM = 4,\n PIC_WIDTH = 2526,\n PIC_HEIGHT = 1642;\n\n /**\n * Конструктор, создающий собственный слой.\n */\n var Layer = function () {\n var layer = new ymaps.Layer(TILES_PATH + '/%z/tile-%x-%y.jpg', {\n // Если есть необходимость показать собственное изображение в местах неподгрузившихся тайлов,\n // раскомментируйте эту строчку и укажите ссылку на изображение.\n // notFoundTile: 'url'\n });\n // Указываем доступный диапазон масштабов для данного слоя.\n layer.getZoomRange = function () {\n return ymaps.vow.resolve([0, 4]);\n };\n // Добавляем свои копирайты.\n layer.getCopyrights = function () {\n return ymaps.vow.resolve('©');\n };\n return layer;\n };\n // Добавляем в хранилище слоев свой конструктор.\n ymaps.layer.storage.add(LAYER_NAME, Layer);\n\n /**\n * Создадим новый тип карты.\n * MAP_TYPE_NAME - имя нового типа.\n * LAYER_NAME - ключ в хранилище слоев или функция конструктор.\n */\n var mapType = new ymaps.MapType(MAP_TYPE_NAME, [LAYER_NAME]);\n // Сохраняем тип в хранилище типов.\n ymaps.mapType.storage.add(MAP_TYPE_NAME, mapType);\n\n // Вычисляем размер всех тайлов на максимальном зуме.\n var worldSize = Math.pow(2, MAX_ZOOM) * 256,\n /**\n * Создаем карту, указав свой новый тип карты.\n */\n map = new ymaps.Map('map', {\n center: [0, 0],\n zoom: 2,\n controls: ['zoomControl'],\n type: MAP_TYPE_NAME\n }, {\n\n // Задаем в качестве проекции Декартову. При данном расчёте центр изображения будет лежать в координатах [0, 0].\n projection: new ymaps.projection.Cartesian([[PIC_HEIGHT / 2 - worldSize, -PIC_WIDTH / 2], [PIC_HEIGHT / 2, worldSize - PIC_WIDTH / 2]], [false, false]),\n // Устанавливаем область просмотра карты так, чтобы пользователь не смог выйти за пределы изображения.\n restrictMapArea: [[-PIC_HEIGHT / 2, -PIC_WIDTH / 2], [PIC_HEIGHT / 2, PIC_WIDTH / 2]]\n\n // При данном расчёте, в координатах [0, 0] будет находиться левый нижний угол изображения,\n // правый верхний будет находиться в координатах [PIC_HEIGHT, PIC_WIDTH].\n // projection: new ymaps.projection.Cartesian([[PIC_HEIGHT - worldSize, 0], [PIC_HEIGHT, worldSize]], [false, false]),\n // restrictMapArea: [[0, 0], [PIC_HEIGHT, PIC_WIDTH]]\n });\n\n // Ставим метку в центр координат. Обратите внимание, координаты метки задаются в порядке [y, x].\n var point = new ymaps.Placemark([0, 0], {\n balloonContent: 'Координаты метки: [0, 0]'\n }, {\n preset: 'islands#darkOrangeDotIcon'\n });\n\n map.geoObjects.add(point);\n});\n"},"resources":["images/tiles/0/tile-0-0.jpg","images/tiles/1/tile-0-0.jpg","images/tiles/1/tile-1-0.jpg","images/tiles/2/tile-0-0.jpg","images/tiles/2/tile-0-1.jpg","images/tiles/2/tile-1-0.jpg","images/tiles/2/tile-1-1.jpg","images/tiles/2/tile-2-0.jpg","images/tiles/2/tile-2-1.jpg","images/tiles/3/tile-0-0.jpg","images/tiles/3/tile-0-1.jpg","images/tiles/3/tile-0-2.jpg","images/tiles/3/tile-0-3.jpg","images/tiles/3/tile-1-0.jpg","images/tiles/3/tile-1-1.jpg","images/tiles/3/tile-1-2.jpg","images/tiles/3/tile-1-3.jpg","images/tiles/3/tile-2-0.jpg","images/tiles/3/tile-2-1.jpg","images/tiles/3/tile-2-2.jpg","images/tiles/3/tile-2-3.jpg","images/tiles/3/tile-3-0.jpg","images/tiles/3/tile-3-1.jpg","images/tiles/3/tile-3-2.jpg","images/tiles/3/tile-3-3.jpg","images/tiles/3/tile-4-0.jpg","images/tiles/3/tile-4-1.jpg","images/tiles/3/tile-4-2.jpg","images/tiles/3/tile-4-3.jpg","images/tiles/4/tile-0-0.jpg","images/tiles/4/tile-0-1.jpg","images/tiles/4/tile-0-2.jpg","images/tiles/4/tile-0-3.jpg","images/tiles/4/tile-0-4.jpg","images/tiles/4/tile-0-5.jpg","images/tiles/4/tile-0-6.jpg","images/tiles/4/tile-1-0.jpg","images/tiles/4/tile-1-1.jpg","images/tiles/4/tile-1-2.jpg","images/tiles/4/tile-1-3.jpg","images/tiles/4/tile-1-4.jpg","images/tiles/4/tile-1-5.jpg","images/tiles/4/tile-1-6.jpg","images/tiles/4/tile-2-0.jpg","images/tiles/4/tile-2-1.jpg","images/tiles/4/tile-2-2.jpg","images/tiles/4/tile-2-3.jpg","images/tiles/4/tile-2-4.jpg","images/tiles/4/tile-2-5.jpg","images/tiles/4/tile-2-6.jpg","images/tiles/4/tile-3-0.jpg","images/tiles/4/tile-3-1.jpg","images/tiles/4/tile-3-2.jpg","images/tiles/4/tile-3-3.jpg","images/tiles/4/tile-3-4.jpg","images/tiles/4/tile-3-5.jpg","images/tiles/4/tile-3-6.jpg","images/tiles/4/tile-4-0.jpg","images/tiles/4/tile-4-1.jpg","images/tiles/4/tile-4-2.jpg","images/tiles/4/tile-4-3.jpg","images/tiles/4/tile-4-4.jpg","images/tiles/4/tile-4-5.jpg","images/tiles/4/tile-4-6.jpg","images/tiles/4/tile-5-0.jpg","images/tiles/4/tile-5-1.jpg","images/tiles/4/tile-5-2.jpg","images/tiles/4/tile-5-3.jpg","images/tiles/4/tile-5-4.jpg","images/tiles/4/tile-5-5.jpg","images/tiles/4/tile-5-6.jpg","images/tiles/4/tile-6-0.jpg","images/tiles/4/tile-6-1.jpg","images/tiles/4/tile-6-2.jpg","images/tiles/4/tile-6-3.jpg","images/tiles/4/tile-6-4.jpg","images/tiles/4/tile-6-5.jpg","images/tiles/4/tile-6-6.jpg","images/tiles/4/tile-7-0.jpg","images/tiles/4/tile-7-1.jpg","images/tiles/4/tile-7-2.jpg","images/tiles/4/tile-7-3.jpg","images/tiles/4/tile-7-4.jpg","images/tiles/4/tile-7-5.jpg","images/tiles/4/tile-7-6.jpg","images/tiles/4/tile-8-0.jpg","images/tiles/4/tile-8-1.jpg","images/tiles/4/tile-8-2.jpg","images/tiles/4/tile-8-3.jpg","images/tiles/4/tile-8-4.jpg","images/tiles/4/tile-8-5.jpg","images/tiles/4/tile-8-6.jpg","images/tiles/4/tile-9-0.jpg","images/tiles/4/tile-9-1.jpg","images/tiles/4/tile-9-2.jpg","images/tiles/4/tile-9-3.jpg","images/tiles/4/tile-9-4.jpg","images/tiles/4/tile-9-5.jpg","images/tiles/4/tile-9-6.jpg"],"directory":"https://sandbox.api.maps.yandex.net/examples/ru/2.1/custom_map/"}custom_map.htmlcustom_map.js

Пишете на JavaScript? У нас есть вакансии