Как сделать 3д карту в Яндекс?

Решения для создания 3D карт

В этой зметке я хочу Вам рассказать о трех различных решениях для создания 3D-карт.

1. ViziCities — open source платформа для создания 3d-карты и визуализации данных.

Платформа построена на основе данных из OpenStreetMap, с использованием WebGL и Three.js.

Посмотреть демонстрацию работы ViziCities можно здесь

Если использовать клавишу shift и левую кнопку мыши, вы сможете наклонять и поворачивать вид карты.

ViziCities является платформой со свободным и открытым исходным кодом, вы можете использовать библиотеку для создания собственных 3d-карт и визуализации данных.

Примеры визуализации данных Вы можете посмотреть из видео демо-карт, созданных разработчиками.

2. OSM Buildings это довольно удивительная JavaScript-библиотека для визуализации данных OpenStreetMaps на интерактивных картах.

Посмотрите на этот Building Shadows пример карты, которая включает в себя 3d-зданий и теней,
которые показываются в зависимости от даты и времени суток.

Карта включает в себя два слайд-элемента управления для регулировки положения солнца, времени суток и времени года.

Посмотрите еще один пример OSM Buildings GL Preview карты,

который дает вам возможность повернуть карту и просматривать 3d-здания со всех сторон.

При использовании OSM Buildings GL Preview необходимо щелкнуть правой кнопкой мыши на карту,
чтобы начать вращение карты и щелкнуть левой кнопкой мыши, чтобы выключить вращение.

3. Mapzen’s Vector Tiles демо карта показывает контуры домов на низких уровнях масштаба, которая волшебным образом становиться 3d при увеличении масштаба карты.

Карта включает в себя ряд элементов управления, позволяющих изменять режим просмотра карты, изменять световые эффекты и добавлять различные эффекты на карту.

Вы можете импортировать 3d-здания в собственные карты с помощью Mapzen Vector Tile Service API.

webmap-blog.ru

Карты Google: весь мир в формате 3D

Для того, чтобы просмотреть, как выглядят наиболее популярные места нашей планеты в формате стерео 3D, теперь нужно совсем немного. Достаточно запастись 3D-очками (анаглиф), открыть карты Google Maps – и мир в 3D у вас на ладони.

Чтобы опробовать возможности трехмерного сервиса, достаточно зайти на сайт maps.google.com и выполнить следующие действия:

• выбрать фигурку человечка на экране слева и перетащить ее на любую из улиц
• если улица под курсором окрашена в голубой цвет, можно отпускать клавишу мышки; после этого вам откроется вид окружающей территории
• изображение можно просматривать в разных направлениях, изучая здания, пейзажи и другие объекты в пределах окрестностей
• нажмите клавишу «T» на клавиатуре (или выберите пункт 3D mode on контекстного меню), после чего изображение будет конвертировано в стерео 3D-формат

Вслед за Google Maps 3D-функциональность получило и приложение «Google Планета Земля». Тем, у кого есть оборудование с поддержкой NVIDIA 3D Vision с драйверами последней версии, достаточно просто запустить программу. Настроек 3D в меню Google Планета Земля вы не найдете, поэтому нужно убедиться в правильности настроек 3D Vision.

Если же вы счастливый обладатель системы NVIDIA 3D Surround, для просмотра карты в приложении “Google Планета Земля” вы можете использовать три 3D-монитора.

Кроме того, при помощи приложения “Google Планета Земля” можно создавать 3D-изображения как наиболее известных мировых достопримечательностей, так и просто улиц вашего города. Те, у кого еще не установлены карты, могут загрузить их здесь.

Прежде, чем начать работу, убедитесь, что сняты все метки, кроме «3D-здания» (как это показано на картинке слева). Для достижения более впечатляющего эффекта лучше выбрать картинку с несколькими планами.

Как только вы определились с местностью, войдите в полноэкранный режим и выровняйте изображение. Вы будете создавать стереопару, поэтому прежде чем выбрать первую (правую) картинку, нужно учесть, что часть изображения справа на левой картинке будет обрезана.

Выбрав нужное расположение для этой части будущего 3D-снимка, скопируйте изображение (опция доступна в стартовом меню) и сохраните его как правую картинку. После этого сделайте снимок левой части. Как правило, чем ближе к камере находятся объекты, тем меньше нужно сдвигать изображение.

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

Следующий шаг – компоновка стереопары. По данной ссылке можно скачать бесплатное приложение StereoPhoto Maker. К сожалению, меню программы доступно только на английском языке, однако разобраться в нем несложно. Выбираем пункт Open Left / Right Images. В окне вам будет предложено выбрать сначала левую картинку, а затем и правую. После подтверждения на экране появится стереопара из выбранных вами картинок.

После этого выберете Adjust – Auto alignment. Нужно это для того, чтобы исправить все проблемы выравнивания. Если результаты автокоррекции вас не устраивают, можно самостоятельно изменить настройки параллакса, выбрав в меню Adjust пункт Alignment (Left) или нажав клавишу «Влево». Предварительно, в меню Stereo необходимо выбрать настройки вывода 3D-изображения (серый или цветной анаглиф, горизонтальная или вертикальная стереопара).

Сохранить картинку можно в одном из доступных 3D-форматов при помощи пункта меню File – Save stereo image.

total3d.ru

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

Примечание: Мы стараемся как можно оперативнее обеспечивать вас актуальными справочными материалами на вашем языке. Эта страница переведена автоматически, поэтому ее текст может содержать неточности и грамматические ошибки. Для нас важно, чтобы эта статья была вам полезна. Просим вас уделить пару секунд и сообщить, помогла ли она вам, с помощью кнопок внизу страницы. Для удобства также приводим ссылку на оригинал (на английском языке) .

Вы можете использовать 3D Maps для анализа данных с помощью карты любого типа. Для этого можно создать или импортировать пользовательскую карту. Например, вам может потребоваться создать пользовательскую карту для отображения загруженности дорог (как на этом вымышленном острове).

Для этого вам потребуются:

Файл изображения в формате JPG, BMP или PNG. Например, рисунок плана этажа или схема маршрутов общественного транспорта.

Связанные с изображением данные, которые 3D Maps может отобразить на пользовательской карте в системе координат XY.

Совет: Если у вас нет данных по координатам X и Y, попробуйте с помощью приложения Microsoft Paint записать положение элементов (в пикселях) на изображении и ввести эти данные в столбцах X и Y на листе.

Ниже приведены инструкции по использованию этих элементов для создания пользовательской карты.

В приложении Excel откройте книгу, которая содержит данные координат X и Y для изображения.

Щелкните Вставить > 3D Map (Карта 3D Maps).

Щелкните Создать тур.

В 3D Maps щелкните Home (Главная) > New Scene (Создать сцену).

Выберите New Custom Map (Создать пользовательскую карту).

В окне Custom Maps Options (Параметры пользовательских карт) щелкните Browse for the background picture (Поиск фонового рисунка), найдите и выберите нужное изображение, а затем нажмите кнопку Open (Открыть).

При необходимости измените координаты X и Y.

Для переключения осей установите флажок Поменять местами оси X и Y.

Щелкните Автоподбор, чтобы получить наилучший результат.

Если вы не хотите, чтобы значения изменялись, установите флажок Заблокировать текущие значения координат.

Нажмите кнопку Применить, чтобы принять выбранные настройки, а затем нажмите кнопку Далее в области слоев.

Теперь вы готовы использовать 3D Maps, как и любые другие географические данные.

support.office.com

Яндекс.Карты в трёхмерном мире. Высотность, устройство городов и как люди в них ориентируются

На Яндекс.Картах теперь можно отличить высотку от одноэтажного здания и узнать известное здание по 3D-модели — все объекты на них стали объёмными. Сейчас на картах более 1000 моделей особенных сооружений в разных городах, со временем их станет больше.

Для этого проекта нам, естественно, пришлось выяснить и уточнить высоту всех зданий в разных городах. Естественно, мы не могли пройти мимо такого шанса посмотреть на города и их устройство под новым углом зрения — чтобы можно было лучше почувствовать разношёрстность или, наоборот, однообразность застройки, мы нарисовали тепловые карты высотности.

В Москве почти 4,5 тысячи высоких — выше 50 метров — зданий. Больше всего таких домов в Тропарево-Никулино, Раменках, Митино, Обручевском районе и Ясенево. Около 90 строений Москвы — выше 100 метров. По количеству таких зданий лидируют Пресненский район, Раменки, Хорошевский район, Тропарево-Никулино и Восточное Бирюлево. Самое высокое здание города — Останкинская башня. Для столицы мы отрисовали модели Московского Кремля, Храм Христа Спасителя, главного здания МГУ, Останкинской башни и многих других объектов, которые служат для людей ориентирами.

Санкт-Петербург занимает второе место среди городов-миллионников по количеству высоких зданий — выше 50 метров. В городе около 800 таких строений. По этому показателю Петербург уступает только Москве, где 4,5 тысячи высоких зданий. На его карте можно увидеть 3D-модель Троицкого собора, Эрмитажа, Петропавловского собора.

Нижний Новгород занимает шестое место среди городов-миллионников по количеству высоких зданий — выше 50 метров. В городе около 180 таких строений. По этому показателю Нижний Новгород обгоняют только Москва, Петербург, Екатеринбург, Новосибирск и Ростов-на-Дону.

Екатеринбург занимает третье место среди городов-миллионников по количеству высоких зданий — выше 50 метров. В городе около 270 таких строений. По этому показателю Екатеринбург уступает только Москве и Петербургу — около 4,5 тысяч и около 800 зданий выше 50 метров соответственно.

А здесь можно увидеть тепловые карты Волгограда, Ростова-на-Дону, Воронежа, Самары, Казани, Омска, Уфы, Красноярска, Перми и Челябинска.

Если вы хотите настроить высотность родного города, это можно сделать на Народной карте. С сегодняшнего дня там появилась возможность указывать высоту зданий — сразу после ввода цифры объект станет объемным и поднимется на нужную высоту на слое «Cхема».

habr.com

Всякое разное про front-end

В данной статье я хочу начать цикл статей по работе с API Яндекс.Карт. Документация Яндекс.Карт достаточно полна, но степень разрозненности информации в ней высокая, при первом заходе в документацию без пол-литры не разобраться, и для решения какой-то проблемы можно потратить много времени на поиск по документации и в поисковике. Этот цикл статей будет рассказывать о практических решениях наиболее частых случаев использования API Яндекс.Карт последней, на момент написания статьи, версии 2.1.

При вёрстке сайта в контактной информации часто бывает необходимость вставки карты, на которой будет отмечено местоположение организации, для которой разрабатывается сайт. В самых простых случаях это может быть просто скриншот c онлайн-карт (или не онлайн):

Для вставки интерактивной карты может использоваться конструктор карт
https://tech.yandex.ru/maps/tools/constructor/:

В случае, если нам нужно более продвинутое использование карт (свои метки, программное перемещение карт и т.п.), то для этого надо использовать API Яндекс.Карт: https://tech.yandex.ru/maps/jsapi/. В качестве примера использования карт в статье будет рассмотрено создание карты с простым добавлением пользовательских метки и балуна.

Для начала подключим компоненты API:

Если разрабатывается какое-то большое приложение с использованием карт, то лучше подключать компоненты API определённой версии, чтобы при обновлении API на стороне Яндекса у нас ничего не сломалось на продакшине:

Карту необходимо будет расположить в каком-нибудь блоке, например в div#map. Далее карту необходимо создать в данном блоке (после срабатывания события готовности карты и DOM):

Здесь мы указываем:

1. идентификатор блока «map», где у нас будет создана карта;
2. center — центр карты с указанием ширины и долготы;
3. zoom — коэффициент масштаба карты.

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

1. из элементов карты присутствует только ползунок изменения масштаба;
2. карта не должна менять масштаб скроллом мыши.

Для выполнения этих требований дополняем код:

Здесь мы отключили «scrollZoom» и добавили «zoomControl» с позиционированием от левого верхнего угла.

Теперь нужно добавить на карту метку, для статьи скачаём её картинку с http://medialoot.com/item/free-vector-map-location-pins/ и расположим в коде следующим образом:

Здесь мы объявляем переменную myPlacemark, в которой запишем маркер, в первом параметре ymaps.Placemark указываем координаты метки, а в третьем параметре:

1. указываем в iconLayout, что будет использоваться пользовательское изображение метки;
2. iconImageHref — путь к изображению;
3. iconImageSize — указываем размеры изображения;
4. iconImageOffset — указываем сдвиг от левого верхнего угла картинке к точке изображения, которая показываем на нужный нам объет. Нужно это чтобы при масштабировании карты положение метки не сбивалось. Почему смещение указывается в отрицательных значениях — одному Богу создателю API известно.

И через myMap.geoObjects.add() добавляем метку на карту.

А теперь сделаем баллун, который у нас будет показываться при клике на метку карты, макет баллуна и его содержимое возьмём с http://designdeck.co.uk/a/1241

Здесь мы:

1. в balloonContent указываем контент, который будет отображаться при открытии балуна;
2. balloonLayout — указываем, что в качестве макета баллуна будет использоваться пользовательское изображение;
3. balloonContentSize и balloonImageSize — размеры контента и изображения соответственно;
4. balloonImageHref — путь к изображению;
5. balloonImageOffset — смещение относительно левого верхнего угла;
6. balloonShadow — отключение тени у балуна (с пользовательскими изображениями ни на что не влияет).

blog.karmanov.ws

Конструктор карт от Яндекс – как вставить интерактивную карту на сайт?

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

Возможность помочь клиентам добраться в нужное место – это весомый вклад в развитие бизнеса, чем больше людей дойдет куда надо, тем выше будут доходы и прибыль. Так что, если ваш бизнес как-то привязан к объектам на местности, то вставить хорошую карту на сайт надо обязательно.

Зачем нужна интерактивная карта

1. Удобно для клиента – легко планируется маршрут с учетом всех актуальных изменений, так как Яндекс оперативно вносит данные о ремонтах и новых застройках на свои карты.
2. Удобно владельцу сайта – все корректировки вносятся на карту автоматически, достаточно один раз вставить карту на сайт, потом обновления подгружаются из базы Яндекса сами.
3. Поднимает авторитет и уровень доверия к организации. Хотя такую примочку может сделать любая шараж-монтаж контора, на подсознательном уровне сайт с интерактивной картой воспринимается лучше.

В былые времена адреса офисов, маршруты прохода и проезда, различные интересные объекты и т.д. отмечали на картинках, изображающих карту, и выкладывали на сайт обычным jpg или png файлом. Проблема была в том, что они не могли учесть временные ремонты, пробки или другие изменения местности, не имели возможности подсказать индивидуальных маршрут с разных направлений.

С развитием интернет сервисов, таких как Яндекс Карты и Google Maps, появилась возможность сделать карты живыми – интерактивными. Такие можно вертеть в разные стороны, менять масштаб, маршруты с разных точек задавать, планировать свое перемещение с учетом пробок и многое другое.

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

И для того, чтобы помочь вам сделать свой веб ресурс более приветливым к людям я расскажу, как добавить Яндекс карту на сайт, делается это очень легко с помощью специального конструктора (не сложнее чем вставка видео с Youtube).

Конструктор карт Яндекс

Если у вас нет аккаунта в Яндексе, то надо будет его завести, так как без этого сконструировать ничего не получится, сервис попросит вас залогиниться или пройти регистрацию. Пугаться не нужно, регистрация – это создание почтового ящика на Yandex. Даже если он вам не нужен для работы с электронной почтой, пригодится для других сервисов поисковика, например, для Яндекс Метрики или Яндекс Вебмастер.

Начинается процедура с этой странички – tech.yandex.ru/maps/tools/constructor/

Так как вы читаете эту статью, значит, вы входите первый раз и сохраненных ранее карт у вас нет, остается выбрать левую желтую кнопку “Создать новую карту”. С этого момента начинается формирование индивидуальных настроек карты на нужной местности.

Фишка в том, что вы сможете вставить не просто Яндекс карту с точным адресом, а карту с любым количеством объектов выделенных разными маркерами и цветами – объектами, точками, маршрутами.

Все настройки производятся в визуальном конструкторе, никакие коды править не придется, работа по адаптации мало отличается от обычного использования Яндекс карт пользователем. Начнем с добавления объектов.

Добавление объектов

Первым инструментом послужит форма поиска, которая находится в верхней части карты. С ее помощью мы можем отыскать нужную точку по адресу, координатам или названию. Вводим в поле данные запроса, пример с адресом «Москва, Красная площадь»:

После нажатия на кнопку найти на местности появится точка, соответствующая расположению заданного объекта. Вставить можно много объектов. Пример с Кремлем:

Каждую точку можно настроить так, чтобы она отличалась от других объектов и была на карте легко различима – меняется цвет и форма, а также, внутри можно добавить уникальный значок, если ткнуть в выпадающее меню «Контент». Это удобно, если объектов на создаваемой карте много и их можно классифицировать по разным группам.

Слева наполняется список всех отмеченных на карте адресов.

Изменение масштаба и положения

С помощью клавиш «+» и «-», находящихся в левой верхней части макета устанавливается оптимальный масштаб. Полная карта России не нужна, чтобы перемещаться по центру Москвы и, если вы указываете точечный объект в каком-то городе, лучше настроить масштаб на уровне, когда различимы названия улиц и окружающих домов.

Для перемещения карты в разные стороны нужно захватить ее нажатием левой кнопки мыши и двигать куда нужно.

Контуры объектов (многоугольники) и линии

При необходимости выделить очертания какого-либо элемента на карты, когда указания точкой недостаточно, используем инструмент «Многоугольники». Устанавливая одну точку за другой, мы получаем периметр, залитый внутри определенным цветом.

Точек может быть сколько угодно, поэтому, фигура, закрашенная на карте, допускает любую степень сложности. Завершить построение контура можно кликом мыши по последней установленной точке или переключением на любую другую кнопку конструктора (например, на линии). Я выделил контуры Московского Кремля по его стене:

Начертание линий осуществляется кнопкой «Линии». Все действия аналогичны предыдущему инструменту, только пространство между точками не закрашивается. С помощью линий на Яндекс карте можно рисовать маршруты движения (прохода, проезда).

Таким способом можно показать оптимальный маршрут осмотра достопримечательностей.

Конечную точку подтверждаем повторным ее нажатием мышью, там будет меню «Удалить»/«Завершить». После выбора завершения открывается поле для подписи к конечной точке и настройки параметров линии (толщина, цвет, прозрачность).

Завершаем маршрут нажатием на «Готово».

Вид карты и наложение пробок

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

А вот переключение режимов между схемой, спутником и гибридом может пригодиться.

Вид со спутника придает окружающим объектам их реальный облик и узнать их на такой карте проще, чем схематичные прямоугольники схемы.

Название и описание

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

Код карты для вставки на сайт

Наша карта уже готова и теперь надо получить ее код для вставки на сайт, Яндекс дает возможность сделать:

• интерактивную карту (о которой я говорил с самого начала);
• статическую – обычная картинка, только с мудреным кодом, ничего двигать в ней нельзя, в добавок еще и максимальное число объектов ограничено;
• печатную – файл-изображение высокого качества, поддерживаются не все страны, в основном СНГ и Турция, не поддерживаются спутниковая и гибридная версия.

Выбор между ними будет выведен сразу после сохранения.

В этом же меню задается итоговый размер в пикселях. Задать его можно вручную или двигая за уголки рамку вокруг выделенной области справа. Галочка «Растянуть по ширине» заставляет карту занимать все пространство на сайте упираясь в края того блока, где она выводится.

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

Итоговый код появляется после нажатия на кнопку «Получить код карты», мой выглядит вот так:

При выборе печатной карты добавится выбор формата файла – png или jpg, и кода, соответственно, не будет – кнопка скачивания вместо него появится. Такой файл тоже можно вставить на сайт, только надо будет закачивать его на хостинг и, при отсутствии визуального редактора у вашего сайта, надо будет выписать изображение в HTML теги (src)

Как вставить карту Яндекс на сайт

Код мы получили, теперь необходимо перенести его на наш веб ресурс. Для размещения подойдет любое место, главное, чтобы размеры вписывались. Если вы пользуетесь конструкторами или визуальными редакторами, то не забудьте при вставке кода переключить их в текстовых (HTML) режим. Вот так:

Карта, которую я сделал

Вот что получилось у меня после всех проведенных настроек:

Удобен сей элемент всем – и объекты нужные подсвечены и масштаб подобран как положено. Кроме того, сервис Яндекса позволяет пользователю определить свое местоположение (стрелочка в верхнем левом углу) и проложить индивидуальный маршрут в нужную точку.

Раскрыть карту на весь экран позволяет кнопка в правом верхнем углу в виде двух расходящихся в разные стороны стрелок. Теперь про плагины.

Плагины для WordPress и других CMS

Раньше делать карты было сложнее и многие пользовались для этих целей специальными плагинами, например, для WordPress был такой – Yandex Maps for WordPress. Сейчас не нужны никакие API и любой пользователь с минимальными знаниями разберется как все настроить, поэтому смысла в плагинах я не вижу. Названный выше плагин тому подтверждение – не обновляется более 2-х лет, видимо спроса нет.

Из относительно актуальных я нашел Yandex Maps API (обновлен 4 месяца назад) и Oi Yandex.Maps for WordPress (5 месяцев назад). Если у вас есть желание поиграть в плагины, то их найдете в репозитории Вордпресс поиском, а как устанавливать плагины смотрите тут.

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

biznessystem.ru