Руководство для новичков по созданию карты с помощью Leaflet.js

Руководство для новичков по созданию карты с помощью Leaflet Изучение

Leaflet.js в настоящее время является одной из самых популярных библиотек картографии. Это гибкая, легкая библиотека JavaScript с открытым исходным кодом для создания интерактивных карт.

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

В этом уроке я покажу вам, как создать красивую интерактивную карту южной части Тихого океана с помощью HTML, CSS и Leaflet, на которой будут выделены самые популярные пляжи. Я собрал данные с веб-сайта TripAdvisor и сопоставил десять лучших пляжей южной части Тихого океана по результатам опроса Travelers ’Choice 2021.

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

Листовка с картой GIF, показывающей различные слои

Создание базовой карты-листовки за четыре шага

Процесс создания простой карты с листовкой несложен. Некоторые базовые знания HTML и JavaScript полезны, но не волнуйтесь, если вы полный новичок. С этой библиотекой JavaScript это довольно просто, и я проведу вас по каждой строчке кода, создавая эту потрясающую, проницательную карту.

Создайте базовую HTML-страницу

Для начала я создаю HTML-страницу для визуализации объекта карты. Затем я добавляю,

чтобы удерживать карту, и присваиваю ей идентификатор, mapна который я буду ссылаться позже. Затем я добавляю некоторые детали стиля, где указываю ширину и высоту как 100vwи 100vh. Это приведет к тому, что карта займет всю страницу:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Leaflet Map</title>
    <style type="text/css">
      body{
        margin: ;
        padding: ;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

Ссылка на файлы библиотеки JavaScript Leaflet с открытым исходным кодом

Поскольку я использую библиотеку Leaflet, мне нужно включить необходимые файлы JavaScript и CSS этой библиотеки. Вы можете загрузить файлы напрямую, использовать диспетчер пакетов JavaScript (npm) для локальной установки файлов или использовать размещенную версию из их CDN:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Leaflet Map</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
    <style type="text/css">
      body{
        margin: ;
        padding: ;
      }
      #map {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
    <script>
      // All the code for the leaflet map will come here
    </script>
  </body>
</html>

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

Подготовьте данные

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

Настройте карту Leaflet

Теперь переходим к интересной части создания карты путем написания нескольких строк кода. Вы не поверите, сколько строк кода требуется для создания полнофункциональных карт с помощью Leaflet. Эта простота разработки, наряду с тем фактом, что Leaflet является библиотекой JavaScript с открытым исходным кодом, ставит ее на первое место в списке библиотек сопоставления.

Итак, для начала помните, что все в этой библиотеке JavaScript доступно через букву «L», и все функции расширяются через нее.

Инициализировать карту

Первое, что я делаю, это объявляю переменную карты и инициализирую ее с помощью карты Leaflet. Первый параметр — это идентификатор

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

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

const map = L.map('map', {
  center: [-29.50, 145],
  zoom: 3.5
});

Добавьте базовый слой

Затем я добавил слой тайлов, который будет базовым слоем для карты Leaflet. Слой листов — это набор листов, доступ к которым осуществляется через сервер с помощью прямого запроса URL. Этот слой листов добавляет на карту географические границы.

Обязательно укажите для этого текст атрибуции, так как большинство разработчиков это забывают:

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map);

Добавьте маркеры по умолчанию

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

const marker1 = L.marker([-37.699450, 176.279420]).addTo(map);
const marker2 = L.marker([-27.643310, 153.305140]).addTo(map);
const marker3 = L.marker([-33.956330, 122.150270]).addTo(map);
const marker4 = L.marker([-34.962390, 117.391220]).addTo(map);
const marker5 = L.marker([-17.961210, 122.214820]).addTo(map);
const marker6 = L.marker([-16.505960, 151.751520]).addTo(map);
const marker7 = L.marker([-22.594400, 167.484440]).addTo(map);
const marker8 = L.marker([-37.977000, 177.057000]).addTo(map);
const marker9 = L.marker([-41.037600, 173.017000]).addTo(map);
const marker10 = L.marker([-37.670300, 176.212000]).addTo(map);

Вуаля! Совершенно красивая и функциональная карта Leaflet настроена и готова. Разве эта разработка Leaflet не была легкой?

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

На изображении ниже показано, как все это выглядит на данный момент

Настройка карты листовок

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

1. Отключить масштабирование с помощью прокрутки мыши

Одна из основных проблем рабочего стола — это случайная прокрутка карты при попытке перемещения по странице. Чтобы справиться с этим, я изменяю код, в котором я объявил карту на этапе настройки. Я добавлю scrollWheelZoomатрибут и установлю для него значение false, чтобы масштабировать карту можно было только с помощью кнопок масштабирования. Я также использую другой способ установки центра и уровня масштабирования, который работает эффективно и более читабелен:

const map = L.map('map', {scrollWheelZoom:false}).setView([-29.50, 145], 3.5);

2. Добавьте слои на карту.

Еще одна интересная и полезная функция Leaflet — это возможность добавлять несколько векторных слоев. Сохраняя вид улиц как один из слоев, я добавлю еще два слоя тайлов с сайта, который предоставляет бесплатный сервис веб-карт (WMS). Я добавлю слой топографии и слой мест:

const basemaps = {
  StreetView: L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',   {attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}),
  Topography: L.tileLayer.wms('http://ows.mundialis.de/services/service?',   {layers: 'TOPO-WMS'}),
  Places: L.tileLayer.wms('http://ows.mundialis.de/services/service?', {layers: 'OSM-Overlay-WMS'})
};

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

L.control.layers(basemaps).addTo(map);

Наконец, я установлю слой Topography в качестве слоя по умолчанию для рендеринга. В финальной версии я вернусь к просмотру улиц по умолчанию:

basemaps.Topography.addTo(map);

3. Настройте маркеры

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

Чтобы определить значок, мне нужно указать URL-адрес и размер значка. Я скачаю бесплатный значок SVG и размещу его в своей учетной записи GitHub, где указан URL-адрес. Я установил размер 40, но вы можете оставить его более-менее.

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

const basicBeachIcon = L.icon({
  iconUrl: 'https://raw.githubusercontent.com/shacheeswadia/leaflet-map/main/beach-icon-chair.svg',
  iconSize: [40, 40],
});

const marker1 = L.marker([-37.699450, 176.279420], {icon: basicBeachIcon}).addTo(map);
const marker2 = L.marker([-27.643310, 153.305140], {icon: basicBeachIcon}).addTo(map);
const marker3 = L.marker([-33.956330, 122.150270], {icon: basicBeachIcon}).addTo(map);
const marker4 = L.marker([-34.962390, 117.391220], {icon: basicBeachIcon}).addTo(map);
const marker5 = L.marker([-17.961210, 122.214820], {icon: basicBeachIcon}).addTo(map);
const marker6 = L.marker([-16.505960, 151.751520], {icon: basicBeachIcon}).addTo(map);
const marker7 = L.marker([-22.594400, 167.484440], {icon: basicBeachIcon}).addTo(map);
const marker8 = L.marker([-37.977000, 177.057000], {icon: basicBeachIcon}).addTo(map);
const marker9 = L.marker([-41.037600, 173.017000], {icon: basicBeachIcon}).addTo(map);
const marker10 = L.marker([-37.670300, 176.212000], {icon: basicBeachIcon}).addTo(map);

Посмотрите, как выглядит эта персонализированная версия, и поиграйте с кодом на CodePen.

Посмотрите, как выглядит эта персонализированная версия, и поиграйте с кодом на CodePen

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

4. Добавить всплывающие окна

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

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

const marker1 = L.marker([-37.699450, 176.279420], {icon: basicBeachIcon})
    .bindPopup('Whitehaven Beach, Whitsunday Island')
    .addTo(map);
const marker2 = L.marker([-27.643310, 153.305140], {icon: basicBeachIcon})
    .bindPopup('Turquoise Bay Exmouth, Australia')
    .addTo(map);
const marker3 = L.marker([-33.956330, 122.150270], {icon: basicBeachIcon})
    .bindPopup('Cape Le Grand National Park Esperance, Australia')
    .addTo(map);
const marker4 = L.marker([-34.962390, 117.391220], {icon: basicBeachIcon})
    .bindPopup('Greens Pool Denmark, Australia')
    .addTo(map);
const marker5 = L.marker([-17.961210, 122.214820], {icon: basicBeachIcon})
    .bindPopup('Cable Beach Broome, Australia')
    .addTo(map);
const marker6 = L.marker([-16.505960, 151.751520], {icon: basicBeachIcon})
    .bindPopup('Matira Beach, Society Islands')
    .addTo(map);
const marker7 = L.marker([-22.594400, 167.484440], {icon: basicBeachIcon})
    .bindPopup('Piscine Naturelle Ile Des Pins, New Caledonia')
    .addTo(map);
const marker8 = L.marker([-37.977000, 177.057000], {icon: basicBeachIcon})
    .bindPopup('Ohope Beach Whakatane, New Zealand')
    .addTo(map);
const marker9 = L.marker([-41.037600, 173.017000], {icon: basicBeachIcon})
    .bindPopup('Kaiteriteri Beach, New Zealand')
    .addTo(map);
const marker10 = L.marker([-37.670300, 176.212000], {icon: basicBeachIcon})
    .bindPopup('Mt Maunganui Main Beach, New Zealand')
    .addTo(map);

Вот и все! Вы можете найти весь код на CodePen.

Вы можете найти весь код на

Другие настройки с картами Leaflet

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

Плагин открывает целую вселенную настроек, а Leaflet, будучи открытым исходным кодом, имеет множество сторонних плагинов, которые обеспечивают расширенную функциональность исходной карты. Вы можете найти любой плагин, разработанный сообществом Листовка здесь. Вы можете добавить дополнительные фрагменты карты, страницы, шаблоны URL, изображения PNG, изображения фрагментов, расширенные параметры масштабирования и улучшенное взаимодействие фрагментов с помощью подключаемых модулей Leaflet. Также есть возможность использовать API Google для определения местоположения и поиска.

Заключение

Как видите, создавать интерактивные карты с помощью библиотеки JS, такой как Leaflet, очень просто и быстро. Установка проста, работает эффективно, код читается, а все сопоставления удобно обрабатываются библиотекой. Это отличный выбор для создания удобных для мобильных устройств интерактивных карт, так как он хорошо работает со всеми мобильными платформами. Наряду с отличным удобством использования Leaflet поддерживает множество параметров настройки. Пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы или предложения.

Итак, прогуляйтесь по пляжу или начните строить карты. Оба варианта помогут вам расслабиться и развлечься!

Читайте также:  Реализация OSPF
Оцените статью
bestprogrammer.ru
Добавить комментарий

Adblock
detector