Vue-CLI и Leaflet (11): агрегация точек Leaflet.markercluster

Vue.js

I. Обзор

Пятая статья получила один комментарий. нетизен@RackarСпросил, как правильно ввести Leaflet.markercluster.

screenshot

На самом деле это не сложно, здесь мы кратко представим это.Leaflet.markerclusterПрименение.

чтоLeaflet.markercluster?

Студенты, имеющие опыт разработки географических информационных систем, должны быть знакомы с makecluster. До популярности технологии h5, чтобы улучшить эффект от отображения больших точечных данных на карте, распространенным методом было использование агрегации точек для улучшения взаимодействия с пользователем. Это функция, которую мы хотим получить, эффект показан на следующем рисунке:

Cluster

Функция здесь реализована в проекте предыдущей статьи.

Во-вторых, реализация кода

1) представил Leaflet.markercluster

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

1560583709480

Представлен в нашем проекте map.js

// src\utils\map.js

import "leaflet/dist/leaflet.css";

import $L from "leaflet";

// 引入 leaflet.markercluster
import "leaflet.markercluster/dist/MarkerCluster.css"
import "leaflet.markercluster/dist/MarkerCluster.Default.css"
import "leaflet.markercluster";

// 解决默认 maker 无法显示的问题
import icon from "leaflet/dist/images/marker-icon.png";
import iconShadow from "leaflet/dist/images/marker-shadow.png";
let DefaultIcon = $L.icon({
  iconUrl: icon,
  shadowUrl: iconShadow
});
$L.Marker.prototype.options.icon = DefaultIcon;

......

Обратите внимание, что он должен быть введенleafletПосле импортаleaflet.markercluster, иначе объект листовки не будет найден, и при этом нужный css файл будет полностью внедрен.

2) Использованиеleaflet.markercluster

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

  1. Создайте экземпляр markerCluster. makerClusterGroup Настоящая гора — это слой;
  2. Добавьте баллы в makerClusterGroup;
  3. Загрузите makerClusterGroup в карту

(1) Создание экземпляра markerCluster

Добавьте метод для создания makerClusterGroup в map.js.

// src\utils\map.js

const createMakerCluster = () => {
  return $L.markerClusterGroup();
};

После листовки. Группровая успешные ссылки, он будет установлен на объект нашего следующего сетевого представленного петтера.

(2) Добавить точку в MAKERCLUSTERGROUP

Чтобы получить лучший эффект отображения, здесь я добавляю случайную точку координат под видимым диапазоном текущей карты и передаюlatlngДобавить кmarkerМетоды:

// src\utils\map.js

const getRandomLatLng = map => {
  let bounds = map.getBounds(),
    southWest = bounds.getSouthWest(),
    northEast = bounds.getNorthEast(),
    lngSpan = northEast.lng - southWest.lng,
    latSpan = northEast.lat - southWest.lat;

  return $L.latLng(
    southWest.lat + latSpan * Math.random(),
    southWest.lng + lngSpan * Math.random()
  );
};


const createMakerByLatlng = (latlng, options) => {
  return $L.marker(latlng, options);
};

(3) Загрузите makerClusterGroup в карту

После того, как все вышеуказанные приготовления завершены, мы можем вызвать его в map.vue, где количество добавленных случайных точек равно 10000.

// src\views\Map.3.vue

<template>
  <div class="map-container" id="map-container"></div>
</template>

<script>
export default {
  name: "mapView",
  components: {},
  data() {
    return {
      map: null,
      OSMUrl: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    };
  },
  mounted() {
    this.map = this.$utils.map.createMap("map-container", {
      maxZoom: 18
    });
      
    this.$utils.map.createTileLayer(this.map, this.OSMUrl, {});
    this.map.setView([51.505, -0.09], 13);

    let cluster = this.$utils.map.createMakerCluster();
    for (let i = 0; i < 10000; i++) {
      let latlng = this.$utils.map.getRandomLatLng(this.map);
      let maker = this.$utils.map.createMakerByLatlng(latlng);
      cluster.addLayer(maker);
    }

    this.map.addLayer(cluster);
  }
};
</script>
<style lang="less">
.map-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
</style>

текущий результат:

Cluster

При вызове map.vue объект карты вmaxZoomАтрибут обязателен, иначе будет выдано сообщение об ошибке при создании **makerClusterGroup**:

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

maxZoom = 8, при увеличении карты до максимального уровня эффект нажатия на точку агрегации следующий:

cluster1
maxZoom = 18, при максимальном масштабировании карты точка агрегации может полностью освободить все точки:

cluster2

3. Резюме

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



содержание

(1) Vue-CLI и Leaflet: начало работы — использование Leaflet в Vue-CLI

(2) Vue-CLI и Leaflet: основные операции с картой (увеличение, уменьшение, панорамирование, позиционирование и т. д.)

(3) Vue-CLI и Leaflet: добавьте маркер, полилинию, многоугольник

(4) VUE-CLI и листовка: добавьте подсказки и всплывающее окно

(5) Vue-CLI и Leaflet: точечное рисование

(6) Vue-CLI и Leaflet: рисование линий

(7) Vue-CLI и Leaflet: рисование поверхности

(8) Vue-CLI и брошюра: загрузка картографического сервиса Esri ArcGIS

(9) Vue-CLI и Leaflet: реализация основных функций управления слоями

(10) Vue-CLI AND Leaflet: запрос атрибутов AGS и запрос карты точек

(Xi) Vue-CLI и Leaflet: точечная полимеризация Leaflet.markercluster

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

Категории