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

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

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

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

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
  <style>
    #map { height: 500px; }
  </style>
</head>

Теперь мы можем создать базовую карту Leaflet, добавив следующий код в наш раздел <body>:

<body>
  <div id="map"></div>
  <script>
    var map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
      maxZoom: 18,
    }).addTo(map);
  </script>
</body>

Это создает карту с центром в Лондоне, Великобритания, с уровнем масштабирования по умолчанию 13 и использует слой листов OpenStreetMap. Теперь, когда у нас есть базовая карта, давайте добавим некоторые общие функции.

Добавление кластеризации маркеров

Общей функцией, которая часто требуется на картах с большим количеством маркеров, является кластеризация. Это позволяет сгруппировать маркеры, расположенные близко друг к другу, в кластер, улучшая читаемость карты. Мы можем добавить кластеризацию маркеров на нашу карту с помощью плагина Leaflet MarkerCluster. Чтобы использовать этот плагин, нам нужно добавить необходимые файлы JavaScript и CSS в наш HTML-документ. Мы можем сделать это, добавив следующие строки кода в раздел <head> нашего HTML-файла:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.0/MarkerCluster.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.0/MarkerCluster.Default.css" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.0/leaflet.markercluster.js"></script>

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

const markers = L.markerClusterGroup();
L.marker([51.5, -0.09]).addTo(markers);
L.marker([51.505, -0.08]).addTo(markers);
L.marker([51.51, -0.1]).addTo(markers);
markers.addTo(map);

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

Добавление тепловых карт

Тепловая карта — это метод визуализации, который показывает плотность точек на карте. Это полезно для визуализации таких данных, как плотность населения или уровень преступности. Мы можем добавить слой тепловой карты на нашу карту с помощью плагина Leaflet Heatmap. Чтобы использовать этот плагин, нам нужно добавить необходимые файлы JavaScript и CSS в наш HTML-документ. Мы можем сделать это, добавив следующие строки кода в раздел <head> нашего HTML-файла:

<head>
  <link rel="stylesheet" href="https://unpkg.com/leaflet.heat/dist/leaflet-heat.css" />
  <script src="https://unpkg.com/leaflet.heat/dist/leaflet-heat.js"></script>
</head>

Теперь мы можем создать слой тепловой карты и добавить его на нашу карту, используя следующий код:

const heatmapData = [
  [51.5, -0.09, 1],
  [51.505, -0.08, 2],
  [51.51, -0.1001, 3],
  [51.511, -0.1002, 3],
  [51.51, -0.1003, 3],
  [51.511, -0.1004, 4],
  [51.51, -0.1005, 5],
  // Add more data points here...
];

const heatmapLayer = L.heatLayer(heatmapData, {
  radius: 25,
}).addTo(map);

Это создает слой тепловой карты, используя данные в heatmapData. Параметр radius управляет размером точек тепловой карты. Затем мы добавляем слой тепловой карты на нашу карту, используя метод addTo.

Экспорт листовки в изображение

Если ваша карта выглядит правильно, вы можете сохранить ее как изображение. Это можно сделать с помощью другого плагина. Вот строки, которые нужно добавить в <head> документа, чтобы включить соответствующую библиотеку.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mapbox/[email protected]/leaflet-image.css" />
<script src="https://cdn.jsdelivr.net/gh/mapbox/[email protected]/leaflet-image.js"></script>

Далее добавим кнопку на страницу. Это кнопка, которую пользователи будут нажимать, чтобы экспортировать карту в виде изображения. Добавьте этот HTML-код в <body>справа после карты <div>.

<button id="export-btn">Export</button>

Вероятно, мы хотим, чтобы эта кнопка находилась в углу над картой. Этот CSS добьется этого.

#export-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 10px;
  z-index: 400;
}

С нашей кнопкой на месте и нашей картой, перемещенной в Центральный парк в Нью-Йорке, теперь это выглядит так. См. кнопку в правом верхнем углу.

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

L.DomEvent.on(document.getElementById('export-btn'), 'click', function() {
leafletImage(map, function(err, canvas) {
    var img = document.createElement('img');
    var dimensions = map.getSize();
    img.width = dimensions.x;
    img.height = dimensions.y;
    img.src = canvas.toDataURL();
    window.open("").document.write(img.outerHTML);
});

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

Заключение

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

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.