Vue route trajectory playback and aggregation function implementation
Gitee address https://gitee.com/suixishix/leaflet-map.git
Vue downloads leaflet and leaflet.animatedmarker plugin
npm install leaflet npm i -save leaflet.animatedmarker
Introduction, in project main.js
//Import leaflet css js import 'leaflet/dist/leaflet.css' import * as L from 'leaflet' //Mount Vue.L Vue.L = Vue.prototype.$L = L Introduce leaflet.animatedmarker on the page that needs to be used import 'leaflet.animatedmarker/src/AnimatedMarker';
1. Initialize the map
//HTML
<template>
<div>
<button @click="Get">ss</button>
<div id="map" style="margin:0 auto;width: 100%;height: 100vh"></div>
</div>
</template>
//script
//initialization
initmap: function () {<!-- -->
// layers
let baseLayer = L. tileLayer(
"http://t1.tianditu.com/cia_c/wmts?layer=cia & amp;style=default & amp;tilematrixset=c & amp;Service=WMTS & amp;Request=GetTile & amp;Version=1.0. 0 & amp;Format=tiles & amp;TileMatrix={z} & amp;TileCol={x} & amp;TileRow={y} & amp;tk=cda0933a3f64de1ae589eedeb0cb9010",
{<!-- -->
maxNativeZoom: 17,
maxZoom: 23,
tileSize: 256,
zoomOffset: 1,
}
)
var tiandituimg = L. tileLayer(
"http://t1.tianditu.com/img_c/wmts?layer=img & amp;style=default & amp;tilematrixset=c & amp;Service=WMTS & amp;Request=GetTile & amp;Version=1.0. 0 & amp;Format=tiles & amp;TileMatrix={z} & amp;TileCol={x} & amp;TileRow={y} & amp;tk=cda0933a3f64de1ae589eedeb0cb9010",
{<!-- -->
maxNativeZoom: 17,
maxZoom: 23,
tileSize: 256,
zoomOffset: 1,
}
)
this.map = L.map("map", {<!-- -->
center: ["28.240356445312","109.41284179688"],
zoom: 6.5,
maxZoom: 20,
minZoom: 5,
attributionControl: false, // Remove the leaflet logo in the lower right corner
zoomControl: false,
///Edit plugin
editable: true,
crs: L.CRS.EPSG4326,
});
baseLayer.addTo(this.map).setZIndex(10);
tiandituimg.addTo(this.map)
},
full code
<template>
<div>
<button @click="Get">ss</button>
<div id="map" style="margin:0 auto;width: 100%;height: 100vh"></div>
</div>
</template>
<script>
import L from 'leaflet'
import 'leaflet.animatedmarker/src/AnimatedMarker';
export default {<!-- -->
name: 'gis-population-density',
data () {<!-- -->
return {<!-- -->
latlngs: [["28.240356445312","109.41284179688"],["28.2403561125","109.312841733"]],
map: null
}
},
mounted () {<!-- -->
this.initmap()
// this. Get()
this. GetLine()
},
methods: {<!-- -->
//Click to trigger the click event to start track playback
Get(){<!-- -->
let car = require('@/assets/uav.png')
var carIcon = L.icon({<!-- -->
iconUrl: car, //picture
iconSize: [60,60],//size
iconAnchor: [30, 30],
popupAnchor: [0, 0]
});
// key code
let animatedMarker = L.animatedMarker(this.latlngs, {<!-- -->
icon: carIcon,
interval: 1000,//frequency
}).addTo(this.map)
},
initmap: function () {<!-- -->
// layers
let baseLayer = L. tileLayer(
"http://t1.tianditu.com/cia_c/wmts?layer=cia & amp;style=default & amp;tilematrixset=c & amp;Service=WMTS & amp;Request=GetTile & amp;Version=1.0. 0 & amp;Format=tiles & amp;TileMatrix={z} & amp;TileCol={x} & amp;TileRow={y} & amp;tk=6c6c18e4ec555ea8f0976ec71960021f",
{<!-- -->
maxNativeZoom: 17,
maxZoom: 23,
tileSize: 256,
zoomOffset: 1,
}
)
var tiandituimg = L. tileLayer(
"http://t1.tianditu.com/img_c/wmts?layer=img & amp;style=default & amp;tilematrixset=c & amp;Service=WMTS & amp;Request=GetTile & amp;Version=1.0. 0 & amp;Format=tiles & amp;TileMatrix={z} & amp;TileCol={x} & amp;TileRow={y} & amp;tk=6c6c18e4ec555ea8f0976ec71960021f",
{<!-- -->
maxNativeZoom: 17,
maxZoom: 23,
tileSize: 256,
zoomOffset: 1,
}
)
this.map = L.map("map", {<!-- -->
center: ["28.240356445312","109.41284179688"],
zoom: 6.5,
maxZoom: 20,
minZoom: 5,
attributionControl: false, // Remove the leaflet logo in the lower right corner
zoomControl: false,
///Edit plugin
editable: true,
crs: L.CRS.EPSG4326,
});
baseLayer.addTo(this.map).setZIndex(10);
tiandituimg.addTo(this.map)
},
GetLine(){<!-- -->
let polyline = L.polyline(this.latlngs, {<!-- -->
color: '#00CED1',
})
polyline. addTo(this. map)
for (var i = 0; i<=this.latlngs.length;i ++ ) {<!-- -->
let lng = this.latlngs[i][1]
let lat = this.latlngs[i][0]
this.addbillboard(lng, lat, require('@/assets/sign113.png'), 80, 80, `<div style="border-radius: 5px;background-color: #0b88e9ba;padding: 3px ;text-align: center;" class='leaflet-fly'>Aerial survey point ${<!-- -->i + 1}</div>`, 55, 20, 28, 45, " leaflet-marker",name)
}
},
/**
* Add marker image + text
* @param {*} lng longitude
* @param {*} lat latitude
* @param {*} iconurl image address
* @param {*} iconwidth image width
* @param {*} iconheight image height
* @param {*} label needs to display annotations, pass a div configurable style
* @param {*} labelwidth The maximum width of the label
* @param {*} labelheight The maximum height of the label
* @param {*} labeloffsetx label left and right offset
* @param {*} labeloffsety label offset up and down
* @param {*} classname The class of the div passed over
* @param feature
*/
addbillboard(lng, lat, iconurl, iconwidth, iconheight, label, labelwidth, labelheight, labeloffsetx, labeloffsety, classname,feature) {<!-- -->
//Display the picture separately and bind the bubble content displayed on click bubble (can be an html or dom or separate text)
let marker = L.marker([lat, lng], {<!-- -->
icon: L.icon({<!-- -->
iconUrl: iconurl,
iconSize: [iconwidth, iconheight],
}),
feature: feature
}).addTo(this.map).bindPopup('bubble display')
marker.on('click', (e) => {<!-- -->
// image click event
let feature = e.target.options.feature
// debugger
})
//display text
L.marker([lat, lng], {<!-- -->
icon: L.divIcon({<!-- -->
html: label,
className: classname,
iconSize: [labelwidth, labelheight],
iconAnchor: [labeloffsetx, labeloffsety]
})
}).addTo(this.map)
}
}
}
</script>
<style>
#map {<!-- -->
width: 100%;
height: calc(100vh);
z-index: 1;
}
.leaflet-label {<!-- -->
border-radius: 5px;
background-color: #0b88e9ba;
padding: 3px;
text-align: center;
}
.leaflet-marker {<!-- -->
color: antiquewhite;
}
.sideMap{<!-- -->
position: absolute;
top: 20px;
left: 20px;
z-index: 9999;
}
</style>
2. Leaflet aggregation function
install plugin
Create leaflet-markercluster under the assets folder Import the css and js files of leaflet-markercluster
Import on component page
//About these files, please download them in my resources
import '@/assets/JS/leaflet-markercluster/leaflet.markercluster-src' import '@/assets/JS/leaflet-markercluster/MarkerCluster.Default.css' import '@/assets/JS/leaflet-markercluster/MarkerCluster.css'
Define mock data
data() {<!-- -->
return {<!-- -->
//Key code to mount the method
markers : L.markerClusterGroup(),
map: "",
querygroup: null,
// mock data
list:[{<!-- -->lng:112.9,lat:28.68},{<!-- -->lng:112.8,lat:28.68},{<!-- -->lng:112.7,lat :28.68},{<!-- -->lng:112.6,lat:28.68},{<!-- -->lng:112.5,lat:28.68}]
};
},
define method
addbillboard(lng, lat, iconurl, iconwidth, iconheight, label, labelwidth, labelheight, labeloffsetx, labeloffsety, classname,markers) {<!-- -->
//title is the bubble content
var title = `aaa`;
var marker = L.marker([lat, lng], {<!-- -->
icon: L.icon({<!-- -->
iconUrl: iconurl,
iconSize: [iconwidth, iconheight],
})
});
// bubble box
marker. bindPopup(title);
//Key code //Add point marker to markerCluserGroup
this.markers.addLayer(marker);
},
Complete Aggregation Code Code
<template>
<div>
<div id="map"></div>
</div>
</template>
<script>
import '@/assets/JS/leaflet-markercluster/leaflet.markercluster-src'
import '@/assets/JS/leaflet-markercluster/MarkerCluster.Default.css'
import '@/assets/JS/leaflet-markercluster/MarkerCluster.css'
export default {<!-- -->
data() {<!-- -->
return {<!-- -->
markers : L.markerClusterGroup(),
map: "",
querygroup: null,
list:[{<!-- -->lng:112.9,lat:28.68},{<!-- -->lng:112.8,lat:28.68},{<!-- -->lng:112.7,lat :28.68},{<!-- -->lng:112.6,lat:28.68},{<!-- -->lng:112.5,lat:28.68}]
};
},
mounted() {<!-- -->
this.initDate();
for (var i of this.list){<!-- -->
this.addbillboard(i.lng, i.lat, require('@/assets/sign113.png'), 80, 80, `<div style="border-radius: 5px;background-color: #0b88e9ba ;padding: 3px;text-align: center;" class='leaflet-label'>marker</div>`, 45, 20, 22, 45, "leaflet-marker",'fracture ')
}
this.map.addLayer(this.markers);
},
methods: {<!-- -->
initDate() {<!-- -->
this.map = L.map("map", {<!-- -->
center: [27.68, 112],
zoom: 6.5,
maxZoom: 20,
minZoom: 5,
attributionControl: false, // Remove the leaflet logo in the lower right corner
zoomControl: false,
///Edit plugin
editable: true,
crs: L.CRS.EPSG4326,
});
var tiandituimg = L. tileLayer(
"http://t1.tianditu.com/img_c/wmts?layer=img & amp;style=default & amp;tilematrixset=c & amp;Service=WMTS & amp;Request=GetTile & amp;Version=1.0. 0 & amp;Format=tiles & amp;TileMatrix={z} & amp;TileCol={x} & amp;TileRow={y} & amp;tk=6c6c18e4ec555ea8f0976ec71960021f",
{<!-- -->
maxNativeZoom: 17,
maxZoom: 23,
tileSize: 256,
zoomOffset: 1,
}
).addTo(this.map);
var tiandiucia = L. tileLayer(
"http://t1.tianditu.com/cia_c/wmts?layer=cia & amp;style=default & amp;tilematrixset=c & amp;Service=WMTS & amp;Request=GetTile & amp;Version=1.0. 0 & amp;Format=tiles & amp;TileMatrix={z} & amp;TileCol={x} & amp;TileRow={y} & amp;tk=6c6c18e4ec555ea8f0976ec71960021f",
{<!-- -->
maxNativeZoom: 17,
maxZoom: 23,
tileSize: 256,
zoomOffset: 1,
}
).addTo(this.map).setZIndex(10);
this.querygroup = L.layerGroup().addTo(this.map)
},
/**
* Add marker image + text
* @param {*} lng longitude
* @param {*} lat latitude
* @param {*} iconurl image address
* @param {*} iconwidth image width
* @param {*} iconheight image height
* @param {*} label needs to display annotations, pass a div configurable style
* @param {*} labelwidth The maximum width of the label
* @param {*} labelheight The maximum height of the label
* @param {*} labeloffsetx label left and right offset
* @param {*} labeloffsety label offset up and down
* @param {*} classname The class of the div passed over
* @param feature
*/
addbillboard(lng, lat, iconurl, iconwidth, iconheight, label, labelwidth, labelheight, labeloffsetx, labeloffsety, classname) {<!-- -->
// title is the display content of the bubble
var title = `aaa`;
var marker = L.marker([lat, lng], {<!-- -->
icon: L.icon({<!-- -->
iconUrl: iconurl,
iconSize: [iconwidth, iconheight],
})
});
// bubble box
marker. bindPopup(title);
// //Add point markers to markerCluserGroup
this.markers.addLayer(marker);
},
}
};
</script>
<style scoped>
#map {<!-- -->
width: 100%;
height: calc(100vh);
z-index: 1;
}
.leaflet-label {<!-- -->
border-radius: 5px;
background-color: #0b88e9ba;
padding: 3px;
text-align: center;
}
.leaflet-marker {<!-- -->
color: antiquewhite;
}
.sideMap{<!-- -->
position: absolute;
top: 20px;
left: 20px;
z-index: 9999;
}
</style>
/script>
 *****Note: This article uses the EPSG:4326 coordinate system