rendering

preface

If there are too many markers on the map, the information will not be intuitive and the picture will not be beautiful (too dense). Therefore, it is necessary to use point aggregation to merge adjacent markers. (Another day of salted fish)

At present, this effect is achieved by using Leaflet with PruneCluster. The API on the official website is actually quite detailed, but it took a while for my English to pass the test and there is little information on the Internet. Portal: github.com/SINTEF-9012…

Code,

Leaflet code integration is put on Github, portal: github.com/SaltedFishH…

Download and import

npm install exports-loader prunecluster import { PruneCluster, PruneClusterForLeaflet } from "exports-loader? PruneCluster,PruneClusterForLeaflet! prunecluster/dist/PruneCluster.js";Copy the code
  • SetInterval () = setInterval(); setInterval() = setInterval();
setInterval(()=> {
    leafletView.ProcessView();
}, 500);
Copy the code
  • The click event of the marker to be triggered needs to use PrepareLeafletMarker, and the independent information of the marker itself should be configured and transmitted externally, otherwise every rendering map will be covered by the last configuration
/ / the information such as configured in the data markers in leafletView. PrepareLeafletMarker = function (leafletMarker, data) {}Copy the code
  • Mark the dot click event because every zoom will add up, delete it
leafletMarker.off('click')
Copy the code

Detailed code

<template> <div> <div id="myMap" class="map-box"></div> </div> </template> <script> import L from "leaflet"; import Provider from "@/components/chinatmsproviders"; require("leaflet/dist/leaflet.css"); // Import PruneCluster import {PruneCluster, PruneClusterForLeaflet} from "exports-loader? PruneCluster,PruneClusterForLeaflet! prunecluster/dist/PruneCluster.js"; Export default {data() {return {mapKey: "", // Your key marker: [], mapData: [], mapData: [{name: "marker 1", tips: "This is Marker 1", LAT: 30.16, LNG: 120.53}, {name:" Marker 2", TIPS: "This is marker 2", LAT: 30.4, LNG: 120.26}, {name:" marker 3", TIPS: "This is Marker 3", LAT: 30.04, LNG: 120.41}, {name:" Marker 4", TIPS: "This is marker 4", LAT: 30.03, LNG: 120.85}, {name:" marker 5", TIPS: "This is Marker 5", LAT: 30.18, LNG: 120.45}, {name:" Marker 6", TIPS: "This is marker 6", LAT: 30.46, LNG: 120.24}, {name:" marker 7", TIPS: "This is Marker 7", LAT: 30.45, LNG: 120.24}, {name:" Marker 8", TIPS: "This is marker 8", LAT: 30.44, LNG: 120.24}, {name:" marker 9", TIPS: "This is Marker 9", LAT: 30.43, LNG: 120.24}, {name:" Marker 10", TIPS: "This is marker 10", LAT: 30.42, LNG: 120.24}, {name:" marker 11", TIPS: "This is marker 11", LAT: 30.45, LNG: 120.25}, {name:" marker 12", TIPS: "This is marker 12", LAT: 30.46, LNG: 120.25}, MAP: null, leafletView: null, }; }, mounted() { Provider(L); // Mount the plugin this.getmap (); }, methods: {/ / remove tags delMarker () {this. LeafletView. RemoveMarkers () / / all empty, GetMap () {let myCenter = new l.latlng (30.16, 120.53); // let map = l.map("myMap", {center: myCenter, zoom: 9}); L.tileLayer.chinaProvider("TianDiTu.Normal.Map", { maxZoom: 18, minZoom: 5, key: this.mapKey }).addTo(map); L.tileLayer.chinaProvider("TianDiTu.Normal.Annotion", { maxZoom: 18, minZoom: 5, key: this.mapKey }).addTo(map); this.map = map this.getPointer(map); }, getPointer(map) { let _this = this; / / / / prevent conflict to empty points if (Array. IsArray (enclosing mapMarker) && enclosing mapMarker. Length > 0) {this. LeafletView. RemoveMarkers (); This. MapMarker = []} // Add map layer let leafletView = new PruneClusterForLeaflet() // Add distance and margin, Mapdata. map((res,index)=>{// Set the marker position let marker = new prunecluster. marker (res.lat,res.lng); // Set the marker position let marker = new prunecluster. marker (res.lat,res.lng); // If the edit point is changed dynamically, marker. Data is assigned. The last incoming data will be taken in PrepareLeafletMarker to cover all market.data.info = res market.data.icon = L.icon({// marker configuration - see iconUrl on leaflet official website for details: require('.. /assets/icon.png'), // require iconSize: [20,25],}) /* // if iconfont marker.data.icon = l.divicon ({HTML: '<i class="iconfont icon-zuobiao"></i>', className: ` point - tips ` / / you can customize the marker class name}) * / / / add tag point click event leafletView PrepareLeafletMarker = function (leafletMarker, LeafletMarker data) {/ / marked points. SetIcon (data) icon) leafletMarker. BindTooltip (data. Info. Name, {direction: 'right',}) // Cancel the click event to prevent multiple loading. LeafletMarker. On ('click', function(e){console.log(' I clicked '); }); }; / / register markers in leafletView. RegisterMarker (marker). This.mapmarker.push (marker)}) // Save the marker before making changes! SetInterval (()=> {leafletview.processView (); }, 500); // Add the map layer map.addlayer (leafletView); // Save the map layer configuration this.leafletView = leafletView}}}; </script> <style> @import '.. /.. /static/style/LeafletStyleSheet.css'; .delete-btns{ z-index: 9999; position: absolute; bottom: 100px; left: 200px; } </style>Copy the code