An overview,

The fifth article received one comment. @rackar asked how to correctly introduce leaflet. markerCluster.

In fact, it is not difficult to use leaflet. markerCluster.

What is theLeaflet.markercluster ？

Those of you who have experience in geographic information system development should be familiar with MakerCluster. Before the popularity of H5 technology, in order to improve the effect of displaying massive point data on maps, the common method is to improve user experience by using point aggregation. Is the function we want to implement, the effect is shown below:

The functionality here is implemented in the project of the previous article.

Two, code implementation

1) Introduction of leaflet. markerCluster

Be sure to read the official leaflet. markerCluster documentation carefully before formalizing the code. Then, all you have to do is install the plug-in in your project. Also note the documentation below, which describes the files that must be referenced in the project.

Introduced in our project map.js

// src\utils\map.js

import "leaflet/dist/leaflet.css";

import $L from "leaflet"; // Import the leaflet. markerCluster import"leaflet.markercluster/dist/MarkerCluster.css"
import "leaflet.markercluster/dist/MarkerCluster.Default.css"
import "leaflet.markercluster"; // Resolve a problem where default maker cannot display 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; .Copy the code

Note here that the leaflet must be introduced after the introduction of leaflet. markerCluster, otherwise the Leaflet object will not be found, and the necessary CSS file will be considered as the complete introduction.

2) useleaflet.markercluster

Once the introduction is complete, then there is how to use it. See the examples on the official website for a simple way to use them.

  1. Example markerCluster. The makerClusterGroup is actually a layer;
  2. Add a point to the makerClusterGroup;
  3. Load the makerClusterGroup into the map

(1) Example markerCluster

Add a method to construct a makerClusterGroup in map.js

// src\utils\map.js

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

Copy the code

Leaflet. markerCluster will be mounted to the imported Leaftet object after it is referenced successfully.

(2) add points to makerClusterGroup

In order to get better display effect, HERE I added a method to add random coordinate points and marker through latLNG within the visual range of the current map:

// 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);
};

Copy the code

(3) load makerClusterGroup into the map

With all of the above work done, we can call map.vue and add 10000 random points

// 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>


Copy the code

Operation effect:

The maxZoom attribute in the map object is required when map.vue is called, otherwise an error will be reported when the makerClusterGroup is created:

The effect of maxZoom determines the maximum level to which the aggregation point can be enlarged. To see the difference in maxZoom size:

MaxZoom = 8, when the local map is scaled to the maximum level, click the convergence point and the effect is as follows:

MaxZoom = 18, when the local map is scaled to the maximum level, the aggregation point can release all points completely:

Third, summary

To this use leaflet. Markercluster to achieve the point aggregation function is completed. According to the information on the official website, this aggregation point also supports many functions, such as modifying the boundary style of the aggregation point, modifying the style, event response and custom style, etc., to specific use scenarios can be used according to their own needs.



directory

Vue-cli and Leaflet: Start using the Leaflet in VUe-CLI

(2) VUE-CLI and Leaflet: basic map operations (zoom in, zoom out, translation, positioning, etc.)

Vue-cli and Leaflet: Add marker, polyline, polygon

Vue-cli and Leaflet: Add tooltips and popup

Vue-cli and Leaflet: point drawing

Vue-cli and Leaflet: line drawing

(7) VuE-CLI and Leaflet: surface painting system

Vue-cli and Leaflet: Load Esri ArcGIS Map Service

(9) VUE-CLI and Leaflet: layer control implementation of basic functions

(10) VUE-CLI and Leaflet: AGS attribute query and point map query

Vue-cli and Leaflet: point aggregation leaflet. markerCluster

Please refer to my GitHub for the source code. Since the article is written at the same time as coding, the source code in GitHub may be a little confused, you can find the corresponding code according to the function. Later will be sorted out and improved.