18.01.2017 18.01.2017

Третья часть урока по созданию собственной карты для ARMA 3. В этой части мы рассмотрим как создать карту реальной местности из Google Maps и какие программы для этого использовать.

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

• Как создать свою карту для ARMA 3. Часть 3

Необходимые инструменты

Необходимо скачать несколько инструментов:

• GIMP (https://www.gimp.org/) \\ Можете использовать любой граф. редактор.
• Google Earth Pro \\ Именно PRO версия, она бесплатная
• L3DT Pro \\ Именно PRO версия, она платная но мы подскажем как получить бесплатно

L3DT Pro нужная вещь для картадела, в нашем случае он нужен для карты высот. Что-бы скачать PRO версию перейдите по данной ссылке . На этой странице вы можете купить или получить пробную PRO версию L3DT на 90 дней (этого хватит). Для активации пробной версии жмем на register for a free 90-day trial .

Заполняем все поля и указываем действующий почтовый ящик, туда придут ключи активации и ссылка на скачивание. При первом запуску программы забейте все ключи которые вам дали.

Создаем реальную Карту Высот

Карта высот одна из самых главных проблем в этом деле. Если вы делаете реальную карту высот будьте готовы потратить кучу времени.

В нашем случае необходимо сначала сделать именно карту высот, в дальнейшем когда вы будете делать свою выбранную местность вы поймете почему. Для урока в Googl Maps мы выбрали остров Block Island (г. Нью Шорхэм) который находится в США. Почему именно США, а не родную Россию? К сожалению более четко Googl Maps отображает США и Европу.

Теперь необходимо скачать карту высот этого острова:

1. Перейдите по ссылке Open Topography
2. Найдите наш островок
3. Нажмите кнопку Select A Region
4. Обведите в квадрат наш остров

Ниже уберите галочку с Generate hillshade images from DEMs и введите любой почтовый ящик. Далее жмем кнопку SUMBIT

Теперь мы можем скачать карту высот в формате tag.gz

Осталось из “tag.gz” сделать формат “.bmp”. В этом нам поможет L3DT Pro, но сначала распакуйте tag.gz в tif. Для подойдет даже winrar, распакуйте текстуру и запускайте L3DT Pro.

В L3DT Pro заходим в File >> Import >> Heightfiled >> текстура формата tif

Полученная карта высот очень маленькая, что бы увеличить его в L3DT Pro переходим: Operations >> Heightfiled >> Resize Heightfiled.

В появившемся окошке выставляем нужный вам размер по Width. В нашем случает выставляем Width: 8192 Height: 6168

Размер выставлен, сохраняем карту высот в формате bmp. Для этого в L3DT Pro кликаем по текстуре Правой кнопкой мыши и выбираем Export. В окошке Exporta выбираем формат BMP и путь с названием.

Создаем высококачественную SATку для острова

Для создания SATки высокого качества нам понадобится Google Earth Pro. Метод который будет описан в уроке позволит сделать текстуру высокого качества, вы же можете сделать качество еще выше или ниже.

Наша сатка будет размером 8192 x 8192, весом около 200мб. Google Earth Pro позволяет сделать снимок в качестве 4К размером 4800 х 2757. Следовательно нужно сделать 6 снимков и поделить остров на 6 частей. Потом эти 6 частей соберутся в одну тяжелую текстуру.

Запускаем программу Google Earth Pro и находим в ней наш остров. Делим остров на 6 условных частей: 2 по горизонтали и 3 по вертикали 2757

Делаем на каждую часть снимок. Для этого приближаем до примерного куска части нашего острова и делаем снимок. В Google Earth Pro жмем кнопку “Сохранить изображение”, убираем все галочки в параметрах, ставим разрешение Maximum и сохраняем изображение в формате “.jpg”.

Проделываем тоже самое с остальными частями острова. В итоге должно получиться остров из 6 изображений. Например в Paint аккуратно скливаем наш остров. По итогу задаем размер текстуре 8192 x 8192 и сохраняем в формате BMP.

Вот таким нелегким путем наша сатка готова!

Создаем Маску для острова

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

Закидываем 2 раза в GIMP нашу готовую Сатку и mapLegend.png

Переходим в ЦВЕТ >> Постеризация. Меняем значение – чем выше значение тем больше цветов и более точная получиться маска.

Ставим значение для посеризации, например 4. Теперь вы можете заменить или убрать цвета на необходимые например через mapLegend. Для этого в разделе “Выделение” >> “По цвету” выделяем нужные цвета и заливаем необходимые.

Надеюсь суть Вы поняли. Итог экспортируйте в формат BMP.

Создаем карту в Terrain Builder

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

Допустим что ваша САТКА, КАРТА ВЫСОТ и МАСКА готовы, давайте создадим по ним карту в Terrain Builder! Вы так же можете скачать наш пример [ Я.ДИСК ]

О том как создать карту в Terrain Builder описано в е. Тут будет описаны параметры для карты.

Параметры для текстур:

Google, Yandex, Microsoft и прочие гиганты продвигают свои картографические сервисы как только позволяет их бюджет. OpenStreetMap не отстаёт стараниями тысяч своих пользователей. Но совсем не факт, что именно ваш город уже нанесён на карту с нужной детализацией. В тоже время у вас почти наверняка есть бумажная карта вашего города, которую можно отсканировать. Благодаря нашему сервису этого достаточно, чтобы сделать свою интерактивную карту online!

Более того, речь может идти не о карте города на Земле, а о вымышленном мире. Вам до безумия нравится трилогия «Властелин колец»? Чудесно, вы легко и просто можете сделать свою карту Средиземья и отметить на ней особо значимые места, прикрепить комментарии, описания и даже фотографии с автографом самого Фродо. Или, возможно, вы тратите всё свободное время на изучение игрового мира The Eldest Scrolls IV: Oblivion? Тогда вам будет отличным подспорьем карта, на которой вы сами разметите все форты, пещеры и стоянки, оставите комментарии и добавите скриншоты своих игр. Более того, совсем не обязательно речь должна идти о картах. С тем же успехом можно демонстрировать схему пожарной эвакуации из здания или план палуб корабля. Мы даём инструмент, а уж его использование ограничено только вашей фантазией.

Прежде чем перейти к описанию того, как сделать свою интерактивную карту, последнее отступление. То, что мы предлагаем, есть конструкция на Google Maps API. Это значит, что всё тоже самое и многое другое вы можете сделать изучив Google API или API любого другого картографического сервиса. Но такое изучение потребует некоторых навыков в программировании. Мы же предлагаем хороший набор возможностей по созданию карт не требующий специальных навыков для использования.

Итак, приступим!

Общая идея. На входе — изображение карты, на выходе — интерактивная карта.

Алгоритм действий.

1. Скачать специально разработанную нами программу . Эта программа предназначена для нарезки изображения карты на небольшие кусочки, которые будут подгружаться в браузер по мере необходимости. Кроме того, она подготовит файл с некоторой служебной информацией необходимой для правильного отображения карты нашим скриптом. Также программа пригодится для подготовки custom maps если вы решили создать свою карту на основе Google Maps, без помощи нашего сервиса.
2. С помощью программы подготовить карту к загрузке на сервер.

   

   Необходимо указать «Изображение карты» и «папка для сохранения». Всё остальное — опционально, хотя желательно заполнить всё. «Картинка для фона» — это изображение размером 256х256 точек в формате GIF, оно будет использоваться для вывода по периметру вашей карты (несколько примеров вы найдёте в архиве с программой). Когда всё поля заполнены жмите «Подготовить файлы карты». По окончании процесса в указанной папке окажется куча файлов.

3. Если у вас нет сайта — зарегистрируйте хотя бы бесплатный. Подойдёт практически любой, например, 50webs.com. Некоторые бесплатные хостинги «не отдают» картинки скрипту запущенному с другого сайта, поэтому выбирайте такой, который лишён этого недостатка. На платных хостингах этой проблемы не возникает.
4. Залейте папку с файлами подготовленными в п.2. на свой сайт. Рекомендуем использовать программу доступа по FTP FileZilla . Для определённости будем считать, что ваш сайт имеет адрес http://yourtestsite.ru, а папка, которую вы залили на сайт называется mymap. В этом случае ваши файлы располагаются по адресу http://yourtestsite.ru/mymap.
5. Обратитесь по адресу http://сайт/map/map.php?url=http://Адрес-вашего-сайта/ваша-папка в нашем примере это будет http://сайт/map/map.php?url=http://yourtestsite.ru/mymap. Это всё! Ваша карта уже действует!
6. Допишите к URL из п.5 «&d=markers » (в нашем примере адрес будет выглядеть так: http://сайт/map/map.php?url=http://yourtestsite.ru/mymap&d=markers). В этом режиме вы можете размещать на карте маркеры (щелчком на карте, также маркеры можно перетаскивать мышью) и в редакторе справа вводить к ним описания, выбирать изображение маркера из списка доступных. Не забывайте нажимать иконку с дискетой (сохранить) по окончании редактирования каждого маркера.

   

   Параметры маркера на карте

7. Для пользователей карта будет открываться в том масштабе и в той позиции, в которых вы закончите редактирование. Поэтому не забудьте о необходимости выбрать нужный масштаб и положение центра карты заканчивая работу.
8. На карте могу выводиться маркеры с разными иконками, удобно иметь возможность скрыть/показать сразу все маркеры с конкретной иконкой. Чтобы дать пользователям такую возможность установите галочку «Показывать список типов маркеров». Если нужна возможность видеть список текстов введённых как описание маркеров и быстро переходить к соответствующему маркеру на карте, установите галочку «Показывать список маркеров».
9. Когда все маркеры расставлены/отредактированы, положение и масштаб карты заданы, параметры определены нажмите кнопку «получить файл маркеров». Скопируйте текст из открывшегося окна и сохраните в файл markers.js. Загрузите этот файл в ту же папку вашего сайта, где уже лежат кусочки карты.
10. Обратившись по адресу вида http://сайт/map/map.php?url=http://Адрес-вашего-сайта/ваша-папка&m=markers вы увидите свою карту с отмеченными вами местами. При щелчке на маркере в открывшемся окошке будет выведено ваше примечание к нему.

Примечание : совсем не обязательно использовать имя «markers». Вы можете использовать любое имя файла. Более того, можно использовать несколько файлов маркеров с одной картой для вывода на ней объектов разных типов (например, http://….&m=cinema — кинотеатры (имя файла cinema.js), http://….&m=school — школы (имя файла school.js) и т.д.).

Вставка на свой сайт.

Созданную карту вы можете вставить на страницу своего сайта используя iframe. Для этого в нужном месте разместите код такого вида:

Демонстрация
Интерактивная карта Средиземья с несколькими маркерами.

Смотрите также

Несомненно, Google Maps - ведущий картографический сервис на рынке, предоставляющий услуги GPS-трекинга и навигации. Но сегодня сфера применения карт постоянно расширяется и уже вышла за рамки традиционных прокладки маршрута и поиска объектов.

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

Очевидно, что услуги геолокации будут играть все более важную роль в будущем и потребность в подобных услугах будет только расти.

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

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

Итак, давайте перейдем к рассмотрению наиболее популярных картографических сервисов .

Mapme

Стоимость: бесплатно, $99 и $199

Animaps

Стоимость: бесплатно

Click2Map

Стоимость: $39 в месяц

Zee Maps

Стоимость: бесплатно (до 5 карт) и платно, в зависимости от тарифного плана.

Scribble Maps

Стоимость: бесплатно

GmapGIS

Стоимость: бесплатно

Heatmap Tool

Стоимость: бесплатно (с водяными знаками и ограничениями на количество объектов и просмотров) и платно в зависимости от тарифного плана.

MapTiler

Mapbox

Стоимость: имеются как бесплатный, так и платные тарифные планы

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

В этой статье мы расскажем для чего и как вставить карту Яндекса на сайт.

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

Для чего нужна карта на сайте?

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

• Обратите особое внимание: наличие карты в значительной степени повышает степень доверия к вашей ресурсу. Визуальное отображение месторасположения компании, офиса, магазина, подсознательно раскрепощает потенциального клиента (избавляет от опасений, вроде: "а вдруг обманут и исчезнут?"), а значит увеличивает вероятность того, что посетитель сайта станет реальным вашим клиентом.
• Наличие интерактивной карты (в отличие от карты-изображения) позволяет пользователю лучше сориентироваться на местности, посмотреть ближайшее метро, автомобилистам - проверить маршрут на дальних подступах к объекту. Кроме того, интерактивная карта позволяет посмотреть на местность из космоса.
• Ну, и конечно же, карта на сайте нужна для того, чтобы посетители и клиенты сайта знали месторасположение вашего магазина, офиса, склада.

Как вставить карту Яндекса на сайт (пошаговая инструкция)

Следует воспользоваться конструктором API Яндекс.Карт .

В этой статье мы приводим примерную пошаговую инструкцию, которая, как мы надеемся, поможет вставить карту Яндекс на ваш сайт:

Шаг 1. Начальная настройка Яндекс карты для сайта:

• Откройте страницу конструктора Яндекс.Карт для сайта .
• Найдите на карте необходимое географическое место по адресу или вручную (с помощью масштабирования ползунком и перемещения карты мышью).
• Выберите удобный для работы масштаб. Окончательный масштаб лучше установить в конце работы. Рисовать будем метки на карте, линии (подъездные пути) и контуры зданий или территорий.
• Укажите в соответствующем поле название будущей карте.
• Перейдем к инструментарию сервиса: кнопки для рисования точек (меток на карте), линий, многоугольников (контуров) и размеров карты.

Шаг 2. Рисование на карте точек (меток):

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

Шаг 3. Настройка свойств установленной на карте метки:

• Кликаем непосредственно по нарисованной нами метке.
• В открывшемся окошке выбираем нужные нам свойства (цвет, номер метки на карте), пишем по желанию текст (в последствии текст будет виден пользователю при клике по метке).
• Любую метку можно удалить в соответствующем окошке свойств.
• Итак мы вставили на Яндекс-карте для сайта метку вашего офиса, настроили её свойства, теперь переходим к рисованию линий. К примеру, линии подъездного пути к офису.

Шаг 4. Рисование линий на карте:

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

Шаг 5. Рисование многоугольников, заполненных цветом контуров:

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

Шаг 6. Изменение размеров карты для сайта:

• Кликаем по кнопке изменения размеров.
• Перемещая квадратные маркеры по контуру карты, можно изменить размер до необходимого. Всё просто.
• Переходим к финалу создания карты.

Шаг 7. Получение кода карты для сайта (Яндекс):

• Придаем карте окончательный вид, установив финальный масштаб карты и окончательную позицию (координаты).
• На этом этапе создание карты для сайта (Яндекс) можно считать законченным. Нажимаем на большую желтую кнопку "Сохранить и получить код".
• Даже после сохранения карты всегда можно вернуться к редактированию.
• Обратите внимание на то, что карта может быть не только схемой, но и фотоснимком из космоса, гибридом или элементом "Народной карты".
• Кроме того, вы вольны сделать карту интерактивной или простым изображением. Интерактивная карта интересней, функциональней, но может загружаться дольше простого изображения. Выбор за вами.
• Вставить карту Яндекса на сайт можно, разместив html-код карты в нужном вам месте страницы.

Спасибо всем читателям, заинтересовавшимся нашей пошаговой инструкцией.

Создание карты для сайта от Яндекса - это нетрудоемкое, не требующее специальных знаний и навыков действие на фоне куда более сложных проблем сайтостроительства. Если при создании вашего сайта вы столкнулись с более серьёзными трудностями, обращайтесь к нам. Мы постараемся решить ваши проблемы!

Если вам понравилась наша инструкция, можете порекомендовать её своим друзьям и знакомым. "Социальные кнопки" находятся справа. Такова наша маленькая корысть .

Применение интерактивных карт на учебных занятиях очень эффективно. Оно позволяет оперативно решать с ребятами различные учебные задачи, быстро «перемещаться» в пространстве и во времени.

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

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

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

Итак, начинаем создавать интерактивную карту.

Шаг первый . Вставляем основную карту. В приведенном ниже примере это будет карта России.

Внимание! Для интерактивной карты целесообразнее настраивать не объект, а целый слайд. Поэтому целесообразно выполнить следующий шаг по смене слайдов.

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

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

Алгоритм выполнения следующий: Вставка – Фигуры – Полилиния (можно и Рисованная кривая ).

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

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

Когда на экране у вас появится выделенная область, независимо от полученного цвета заливки настраиваем формат полученного рисунка на 100%-ную прозрачность. Таким образом, объект гиперссылки невидим, внешне наша карта ничем не отличается от обычной. Но между тем, все выделенные нами регионы являются гиперссылками.

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

Шаг пятый . Каждый из выделенных объектов делаем гиперссылками на соответствующие карты. Рекомендуемое действие гиперссылки «по наведению указателя мыши». В таком режиме наиболее эффективна работа интерактивной карты.

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

При необходимости можем продолжить углубление содержания, то есть от карты региона перейти к карте города (населённого пункта). Отсюда – к отдельным объектам. Например, показать вид школы из космоса. Или перейти по гиперссылке к фото отдельных объектов.

Шаг шестой . Не забываем на всех картах разместить «кнопки возврата» и на главную карту, и на карту, например, региона. То есть на остальных картах может быть несколько кнопок возврата: например, одна кнопка — с населенного пункта на карту региона, другая – на карту России.

Итак, наша карта готова. Хотелось бы подчеркнуть, что для всех других слайдов необходимо также выбирать качественные карты или изображения. То есть вряд ли будет уместно, например, из большой карты России вырезать отдельный регион, увеличить его и разместить на отдельном слайде. Как правило, мы получим мало узнаваемый, размытый объект.

Мы должны постараться найти отдельные карты, схемы, качественные фотографии. Только тогда этот прием будет эффективен. И еще одно.

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

Интерактивные карты могут быть использованы и в дидактических играх-путешествиях по виртуальным, вымышленным странам. В таком случае необходимо красочно прорисовать необходимые зоны, объекты. Однако здесь могут быть другие проблемы с гиперссылками.

Если на такой карте вы рисовали какие-то символы, делали надписи и т.п., то группировка их в один объект (область какой-то страны например) не поможет вам сделать его гиперссылкой. Вряд ли уместно давать гиперссылку на отдельные элементы. Тут вновь может помочь гиперссылка на основе невидимой автофигуры.