Автор: Сатишрави Переводчик: JackChen007 Источник: medium.com
предисловие
Прежде чем создавать свое первое картографическое приложение, ознакомьтесь с популярными картографическими API и библиотеками JavaScript.
Большинство приложений, которые мы используем сегодня, будут отображать местоположение и данные в реальном времени на карте. Например, онлайн-товары в наше приложение для доставки еды с помощью карт. Карты широко используются для представления данных, и нам всегда нужно больше интерактивности. Для карт доступно множество различных библиотек и плагинов, как платных, так и с открытым исходным кодом.
Карты Google — не самое эффективное решение для картографических приложений. Он не предлагает никаких вариантов настройки, чтобы сделать его более удобным для вас. Если вы хотите реализовать его со своей собственной функциональностью, вы должны использовать открытый исходный код на рынке. В этой статье мы увидим, что разные карты содержат инструменты JavaScript для работы с библиотекой карт.
Классифицировать карту с помощью библиотеки функций javascript
Есть много инструментов, которые работают с JavaScript. Мы можем классифицировать в соответствии с этим.
- Библиотеки: позволяют общедоступным классам и функциям создавать приложения на более высоком уровне программирования.
- Оболочка (Wrappers): действует как интерфейс между вызывающей стороной и кодом упаковки.
- Наборы инструментов: это модульная система, которую легко интегрировать в пользовательские приложения.
- Платформы: повторно используемые компоненты, используемые для включения и поддержки служб, настройки и интеграции с кодом приложения.
- Клиенты (клиенты): приложения веб-карт, которые должны использоваться в конечном продукте.
Как выбрать эффективное решение
Это зависит от того, как вы собираетесь их использовать и насколько вы хотите их настроить, чтобы сделать их более интерактивными.
Когда вы выбираете инструмент для карты. Сначала вы должны выбрать платный фреймворк или фреймворк с открытым исходным кодом. У обоих много функций.
Версии и обновления
Возьмем, к примеру, Google Maps и Leaflet. Карты Google контролируются Google. Все доступные обновления будут запланированы Google. Обновления листовок происходят часто, и они выпускают новые версии с новыми функциями. Обновления плагинов не зависят от всего обновления.
Картографические инструменты и библиотеки
Некоторые инструменты уменьшат усилия по созданию интерактивных карт. Он позволяет создать динамическую карту всего несколькими строками кода. Библиотека JS позволит вам добавлять функциональные возможности маркеров и рисовать собственные линии в определенных точках на карте.
CSS позволяет добавлять на карту пользовательские стили. Учитывая все эти функции, мы собрали следующие библиотеки, которые помогут разработчикам быстро и легко создавать сложные карты.
Leafletjs
Официальный сайт:leafletjs.com/
GitHub stars: 28.1k, GitHub.com/leaflet/Lea…
Цена: Бесплатно
Источник данных карты: OpenStreetMap
Зависимости: нет
Рубрика: JS-библиотеки
Пример:Листовка - это просто .com/examples.Контракт...
Leaflet — это современная библиотека JavaScript с открытым исходным кодом, разработанная для создания мобильных интерактивных карт. Он был разработан командой профессиональных разработчиков во главе с Владимиром Агафонкиным, и хотя код составляет всего 38 КБ, он имеет большинство функций, которые разработчики могут использовать для разработки онлайн-карт.
Leaflet разработан с учетом простоты, производительности и удобства использования, эффективно работает на всех основных настольных и мобильных платформах, использует преимущества HTML5 и CSS3 в современных браузерах, а также поддерживает старые браузеры. Поддерживаются расширения плагинов с дружественной, простой в использовании документацией по API и простым, читаемым исходным кодом.
Он содержит мощную документацию по API и различные примеры для начинающих, чтобы быстро проконсультироваться и приступить к работе.
Рекомендуется прочитать соответствующие вводные руководства:
Начало работы с небольшой демо-версией Leaflet
leafletjs визуализировать географическое положение
Справочник документации по API leafLet на китайском языке
Openlayers
Официальный сайт:openlayers.org/
GitHub stars: 7.1k, GitHub.com/openlayers/…
Цена: Бесплатно
Источник данных карты: OpenStreetMap
Зависимости: нет
Рубрика: JS-библиотеки
Пример:openlayers.org/en/latest/ о…
OpenLayers также является лучшей средой JavaScript с открытым исходным кодом для создания интерактивных карт. Вы можете выбирать между различными типами карт стилей, используя векторные плитки. Он также способен конвертировать векторные данные в формат GeoJson. Он также предоставляет лучшую документацию и образцы рабочего кода для разработчиков.
В последнее время в проекте компании есть бизнес-требование реализовать функцию веб-ГИС (сетевая географическая информационная система) и разработать систему управления военной симуляцией.Редактор специально сослался на множество материалов и, наконец, выбрал фреймворк OpenLayers. После того, как проект будет завершен, я напишу статью, поделюсь опытом и опытом разработки. Как показано ниже:
Рекомендуется прочитать соответствующие вводные руководства:
Базовое руководство по OpenLayers
Подробное объяснение OpenLayers на китайском языке
Mapbox
Официальный сайт:www.mapbox.com/
GitHub stars: 6.1k, GitHub.com/mapingboxing/horseside…
Цена: Частично бесплатно
Источник данных карты: Mapbox
Зависимости: нет
Категория: ВЕБ-приложение
Пример:docs.mappinboxing.com/mappinboxing-km-just…
Mapbox — это современное картографическое решение для создания высокопроизводительных интерактивных карт. Он был создан разработчиками с дополнительными функциями, такими как пользовательские маркеры, векторная графика, статические карты и геокодирование. Он предоставляет спутниковые снимки и направления.
Он также предоставляет онлайн-редактор для быстрого создания ваших пользовательских карт с вашими собственными данными. Документация хорошо разработана и проста в использовании.
Рекомендуется прочитать соответствующие вводные руководства:
Визуализация карты Vue (2) статьи mapbox
Google Maps API
Официальный сайт:Developers.Google.com/maps/doc UME…
Цена: Частично бесплатно
Источник данных карты: Google
Зависимости: нет
Категория: ВЕБ-приложение
Пример:Developers.Google.com/maps/doc UME…
Google Maps API лучше всего подходит для всех, как для опытных, так и для начинающих. Легко интегрируйте Карты Google с любым приложением или веб-сайтом. Кроме того, у пользователей WordPress есть дополнительные плагины для добавления JavaScript API Google Maps.
Datamaps
Официальный сайт:datamaps.github.io/
GitHub stars: 3.4k, GitHub.com/mark mark oh/…
Цена: Бесплатно
Источник данных карты: D3.js
Зависимость: D3.JS и TOPOJSON
Рубрика: JS-библиотеки
Пример:datamaps.github.io/
Datamaps — это интерактивная карта для визуализации данных. Он упакован в отдельный файл JavaScript. Он хранится в формате JSON, и вы можете легко создать любую пользовательскую карту, используя следующую структуру.
Bing Maps
Официальный сайт:woohoo.Microsoft.com/en-US/maps/…
Цена: Бесплатно
Источник данных карты: Bing Maps
Зависимости: нет
Категория: ВЕБ-приложение
Пример:docs.Microsoft.com/en-US/ не…
Эта карта была создана Microsoft и является очень популярной картографической платформой. Он включает в себя AJAX SDK, который предоставляет разработчикам образцы кода и фрагменты для создания пользовательских карт. Он предоставляет несколько функций API, таких как служба REST и служба пространственных данных.
ArcGIS
Официальный сайт:developers.arcgis.com/
Цена: Частично бесплатно
Источник данных карты: Esri
Зависимости: нет
Категория: Рамки
Пример:Developers.ArcGIS.com/JavaScript/…
ArcGIS — это облегченная среда JavaScript, которая упрощает встраивание карт в любое приложение или веб-сайт. Он загружен множеством функций и примеров. Портал для разработчиков содержит ArcGIS API и SDK. Он предоставляет удобную для разработчиков документацию.
Рекомендуется прочитать соответствующие вводные руководства:
Визуализация карты Vue (3) Статьи ArcGIS
Zeemaps
Официальный сайт:www.zeemaps.com/
Цена: Частично бесплатно
Зависимости: нет
Категория: ВЕБ-приложение
Пример:Woohoo. Затем E Mom PS.com/Mobile? Dogmeat…
Zeemaps — это картографический сервис корпоративного уровня, который позволяет легко создавать, публиковать и обмениваться интерактивными картами.Вы можете создавать визуальные динамические карты с географической информацией, например, помечая географические местоположения бизнес-пользователей как привет, места, где вы были, и продажи. , Карты и т. д. Все поисковые запросы по картам хранятся на официальном сервере, и пользователи могут получить к ним доступ в любом месте и в любое время.
напиши в конце
Я надеюсь, что вам понравится и вы поймете API и библиотеку карт в JavaScript и выберете лучший фреймворк для создания высокоинтерактивной карты для вашего приложения или веб-сайта в соответствии с вашими потребностями.
оригинал:medium.com/JavaScript-…
Если у вас возникли технические проблемы с интерфейсом, добавьте друзей в WeChat:lazycode520, редактор втянет вас в передовую группу по реальному боевому обмену и обучению.
Рекомендуем прочитать качественные статьи по теме
- Разработайте персонализированное резюме апплета WeChat, сможете ли вы открыть дверь на большую фабрику и получить билеты? (с исходным кодом)
- Vue+Echarts создает визуализацию больших данных, классное отображение бренда компании, совместное использование практических проектов (с исходным кодом)
- Фронтенд должен знать эти вещи о MySQL — Путь роста полного стека NodeJS
- 2020 год стоит того, чтобы собрать и изучить более 280 мини-игр H5, от входа до полного понимания (с исходным кодом)
Получите больше практического опыта проекта и различные ресурсы исходного кода,Обратите внимание на публичный аккаунт автора: lazy code farmer