Как сделать масштабируемую карту
Добавил пользователь Валентин П. Обновлено: 05.10.2024
Я хочу создать масштабируемую перетаскиваемую карту и т. Д. Действительно большого изображения, функциональность должна быть похожа на карты Google, но сама карта исходит от меня (это будет изображение галактики).
Поэтому я думаю, что мне нужно использовать следующие компоненты:
И соедините их друг с другом, так что интерфейс будет вызывать бэкэнд для отображения плиток на текущем уровне масштабирования карты.
Я новичок в создании карт и просто хочу убедиться, что не иду в неправильном направлении, имеет ли это смысл? Кто-нибудь делал это раньше? Или какие-нибудь идеи получше?
ИЗМЕНИТЬ
Извините, я забыл об этом: пользователю не нужно устанавливать какие-либо дополнительные вещи, и он должен работать на Ipad, поэтому я не могу использовать silverlight, flash и т. Д. Просто старый добрый простой JS :)
2 ответа
Я работал над аналогичным требованием, но платформой разработки была Silverlight. Я использовал DeepEarth (расширенный глубокий зум) с тайлами, размещенными на локальном сервере.
Вы можете попробовать использовать Bing Control и сервисы, которые являются платными. В пробной версии вы увидите логотип Bing в фоновом режиме. службы Bing
Управление Bing или любые подобные элементы управления с тайловыми службами подходят, когда вам нужна карта реального мира - города / дороги. Если вам просто нужна функция увеличения / уменьшения изображения, вы можете использовать deepzoom.
Достаточно уже написано о внедрении географической составляющей в разные сферы деятельности, в частности в СМИ и маркетинг. Поэтому крупные компании разрабатывают возможности для реализации этого запроса. Конструктор карт Яндекса позволяет создавать простые интерактивные карты и встраивать их на сайты. Это делает материал более интересным и полезным для читателя.
Интерфейс и инструменты
Тем, кто работал в десктопной версии Яндекс.Карт, будет легко разобраться с интерфейсом Конструктора. Как и в любой геоинформационной системе, есть возможность нанести точечные, линейные и полигональные объекты.
При создании каждого объекта будет всплывать окошко, в котором можно изменить цвет и прозрачность. Если это полигон, то можно настроить цвет и толщину контура.
Точечные объекты выражены метками, цвет и символ внутри которой можно изменить.
Подготовка к публикации
Здесь задаём размер и охват карты. Предоставляется выбор – интерактивная или статическая карта. Интерактивная карта позволяет перемещать и масштабировать охват, а нанесённые объекты откликаются на действия пользователя.
А здесь можно посмотреть пример того, как карта Яндекса встроена на сайт информационного агентства, показывая читателям точки интереса.
Импорт и экспорт объектов
Если имеются объекты, с которыми вы работали в ГИС-программах, в форматах XLSX, CSV, KML, GPX или GeoJSON, то можно добавить их в Конструктор и он их распознает. При этом XLSX- и CSV-файлы должны быть заполнены по шаблонам, которые можно скачать в окне импорта.
Экспортировать нанесённые в Конструкторе объекты тоже можно в разных форматах, чтобы потом использовать эти данные в других настольных ГИС.
После экспорта данных из Конструктора в формате GeoJSON добавляем файл, например, в QGIS. Указанные объекты открываются тремя слоями: точечным, линейным и полигональным. Сколько бы объектов не было на карте Конструктора, но если у них единый тип геометрии, то они будут в одном слое.
можно ли как-то машабировать изображение карты, чтобы получить желаемый результат.
Заранее благодарна за помощь!
поставьте как =3д макс стандарт= и потом внизу таллингом крутите и вроде как поставить галочку-эннвиропмент. (По памяти.)
Dedora
попробовала, как Вы говорите. но картинка таллится не совсем как хотелось бы, - получается черный фон, а на нем "квадратик" карты, с нужным размером травы.
Имелось в виду увеличение числа тайлинга, а не его отключение. Но в этом будет крыться один косяк, если освещаете hdri, то "солнц" будет больше.
А у вас дом в масштабе? обычно хдр слейлить незачем, она идеально встает если все масштабы верные в сцене
flemming086
дом в масштабе. модель перекидывала с архикада. и даже когда умышленно дом увеличила до нереально больших размеров (стена вместо 4200 мм стала 420000 мм) фон не изменился :(
и не только с этой картой. когда беру карту просто неба (когда вверху небо, внизу "земля" или что-то тому подобное, тогда дом, как на Марсе стоит.
Вообще то, хотелось бы поподробней о "вставила ее в сцену".
А так, похоже на неправильный выбор способа наложения текстурной карты:
Несмотря на то что тему закрыли, позволю себе поделиться некоторыми соображениями. Другими словами - итого.
Все мудрые замечания в этой и в указанной CrAsssH-ем ветках, imho, должны начинаться с предупреждения о том, что HDRI это, хоть и волшебная аббревиатура, но не всемогущая! И если новичек думает, что применив HDRI он и сцену светом оживит и сможет обойтись без одного из следующих инструментов:
Изучение
Leaflet.js в настоящее время является одной из самых популярных библиотек картографии. Это гибкая, легкая библиотека JavaScript с открытым исходным кодом для создания интерактивных карт.
Leaflet — это структура для представления картографических данных. Данные вместе с базовым слоем карты должны быть предоставлены разработчиками. Карты состоят из слоев мозаики с поддержкой браузера, интерактивностью по умолчанию, возможностями панорамирования и масштабирования. Вы также можете добавить дополнительные пользовательские слои и плагины, а также все сопоставления в Leaflet. Эта библиотека картографии преобразует ваши данные в слои карты и имеет прекрасную поддержку, что делает ее лучшим выбором для большинства разработчиков. Он действительно хорошо работает на основных настольных и мобильных платформах, что делает его идеальной библиотекой JavaScript для мобильных и больших экранных карт.
В этом уроке я покажу вам, как создать красивую интерактивную карту южной части Тихого океана с помощью HTML, CSS и Leaflet, на которой будут выделены самые популярные пляжи. Я собрал данные с веб-сайта TripAdvisor и сопоставил десять лучших пляжей южной части Тихого океана по результатам опроса Travelers ’Choice 2021.
Вы видели несколько интересных онлайн-карт и хотели бы создать их самостоятельно? Следуйте за этим увлекательным путешествием, когда я покажу вам, как построить классную карту и выделить десять лучших пляжей с помощью Leaflet.
Листовка с картой GIF, показывающей различные слои
Создание базовой карты-листовки за четыре шага
Процесс создания простой карты с листовкой несложен. Некоторые базовые знания HTML и JavaScript полезны, но не волнуйтесь, если вы полный новичок. С этой библиотекой JavaScript это довольно просто, и я проведу вас по каждой строчке кода, создавая эту потрясающую, проницательную карту.
Создайте базовую HTML-страницу
Для начала я создаю HTML-страницу для визуализации объекта карты. Затем я добавляю,
чтобы удерживать карту, и присваиваю ей идентификатор, mapна который я буду ссылаться позже. Затем я добавляю некоторые детали стиля, где указываю ширину и высоту как 100vwи 100vh. Это приведет к тому, что карта займет всю страницу:
Ссылка на файлы библиотеки JavaScript Leaflet с открытым исходным кодом
Поскольку я использую библиотеку Leaflet, мне нужно включить необходимые файлы JavaScript и CSS этой библиотеки. Вы можете загрузить файлы напрямую, использовать диспетчер пакетов JavaScript (npm) для локальной установки файлов или использовать размещенную версию из их CDN:
Примечание: integrityатрибут позволяет браузеру проверять выбранный сценарий, чтобы убедиться, что код не загружен, если источник был изменен.
Подготовьте данные
Чтобы построить любую карту, мне нужны значения координат, такие как широта и долгота. Я сверяют широты и долготы для каждой из точек данных с этого сайта здесь. Кроме того, для разработки Leaflet мне также нужен базовый уровень, который я получил с сайта OpenStreetMap.
Настройте карту Leaflet
Теперь переходим к интересной части создания карты путем написания нескольких строк кода. Вы не поверите, сколько строк кода требуется для создания полнофункциональных карт с помощью Leaflet. Эта простота разработки, наряду с тем фактом, что Leaflet является библиотекой JavaScript с открытым исходным кодом, ставит ее на первое место в списке библиотек сопоставления.
Инициализировать карту
Первое, что я делаю, это объявляю переменную карты и инициализирую ее с помощью карты Leaflet. Первый параметр — это идентификатор
ранее определенного. Второй — это то место, где вы хотите, чтобы был центр карты. Последнее — это уровень масштабирования. Я установил масштаб на 3,5, но вы можете установить все, что захотите.
Я использую эти параметры для своей карты, но существует множество различных опций для настройки состояния карты, взаимодействия, анимации и событий, которые вы можете проверить здесь :
Добавьте базовый слой
Затем я добавил слой тайлов, который будет базовым слоем для карты Leaflet. Слой листов — это набор листов, доступ к которым осуществляется через сервер с помощью прямого запроса URL. Этот слой листов добавляет на карту географические границы.
Обязательно укажите для этого текст атрибуции, так как большинство разработчиков это забывают:
Добавьте маркеры по умолчанию
Чтобы обозначить пляжи, я добавляю маркеры. Leaflet предоставляет эту функцию по умолчанию. Поскольку мне нужно показать десять пляжей, я добавлю маркер со значениями широты и долготы соответствующего пляжа:
Вуаля! Совершенно красивая и функциональная карта Leaflet настроена и готова. Разве эта разработка Leaflet не была легкой?
На изображении ниже показано, как все это выглядит на данный момент.
Настройка карты листовок
Одной из полезных функций библиотеки Leaflet JavaScript является возможность быстрого создания базовых карт, а также наличие множества опций для настройки карт. Итак, позвольте мне показать вам четыре способа сделать эту карту Leaflet более информативной и более эстетичной.
1. Отключить масштабирование с помощью прокрутки мыши
2. Добавьте слои на карту.
Еще одна интересная и полезная функция Leaflet — это возможность добавлять несколько векторных слоев. Сохраняя вид улиц как один из слоев, я добавлю еще два слоя тайлов с сайта, который предоставляет бесплатный сервис веб-карт (WMS). Я добавлю слой топографии и слой мест:
Leaflet также предоставляет функцию, позволяющую пользователю управлять слоем для рендеринга. Используя эту функцию, я добавлю кнопку меню параметров в правом верхнем углу страницы, которая позволяет вам выбрать, какой из трех слоев вы хотите наложить на карту:
Наконец, я установлю слой Topography в качестве слоя по умолчанию для рендеринга. В финальной версии я вернусь к просмотру улиц по умолчанию:
3. Настройте маркеры
Маркер по умолчанию отлично подходит для обозначения местоположения, но настраиваемые маркеры придают карте индивидуальный вид, и их довольно легко настроить с помощью библиотеки Leaflet.
Чтобы определить значок, мне нужно указать URL-адрес и размер значка. Я скачаю бесплатный значок SVG и размещу его в своей учетной записи GitHub, где указан URL-адрес. Я установил размер 40, но вы можете оставить его более-менее.
Теперь я просто добавлю этот значок к каждому определенному ранее маркеру, и все. Все маркеры, обозначающие пляж, теперь являются значками пляжа:
Посмотрите, как выглядит эта персонализированная версия, и поиграйте с кодом на CodePen.
Этот значок был всего лишь примером, поэтому следите за более забавным значком, когда я меняю пользовательский маркер в окончательной версии визуализации.
4. Добавить всплывающие окна
Как и всплывающие подсказки, всплывающие окна могут содержать дополнительную информацию о данных. Всплывающее окно на картах отображается при нажатии и может быть настроено в соответствии с вашими предпочтениями. С помощью Leaflet всплывающее окно можно очень легко добавить с помощью функции, называемой bindPopup.
Поскольку мы отображаем пляжи на нашем объекте карты, я решил показать название каждого пляжа во всплывающем окне. Я просто добавляю текст в функцию и привязываю его к каждому из маркеров:
Вот и все! Вы можете найти весь код на CodePen.
Другие настройки с картами Leaflet
Помимо того, что я показал вам в этом руководстве, в Leaflet есть множество вариантов настройки, таких как добавление фигур, таких как круги или многоугольники, настройка всплывающего окна и добавление событий. Вы можете ознакомиться с инструкциями в официальной документации и многочисленными примерами, предоставленными Leaflet.
Плагин открывает целую вселенную настроек, а Leaflet, будучи открытым исходным кодом, имеет множество сторонних плагинов, которые обеспечивают расширенную функциональность исходной карты. Вы можете найти любой плагин, разработанный сообществом Листовка здесь. Вы можете добавить дополнительные фрагменты карты, страницы, шаблоны URL, изображения PNG, изображения фрагментов, расширенные параметры масштабирования и улучшенное взаимодействие фрагментов с помощью подключаемых модулей Leaflet. Также есть возможность использовать API Google для определения местоположения и поиска.
Заключение
Как видите, создавать интерактивные карты с помощью библиотеки JS, такой как Leaflet, очень просто и быстро. Установка проста, работает эффективно, код читается, а все сопоставления удобно обрабатываются библиотекой. Это отличный выбор для создания удобных для мобильных устройств интерактивных карт, так как он хорошо работает со всеми мобильными платформами. Наряду с отличным удобством использования Leaflet поддерживает множество параметров настройки. Пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы или предложения.
Итак, прогуляйтесь по пляжу или начните строить карты. Оба варианта помогут вам расслабиться и развлечься!
Читайте также: