效果图如下：
<!DOCTYPE html>
<html><head><title>轨迹</title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!-- 引入样式 --><!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> --><link rel="stylesheet" href="../../lib/element-ui@2.13.0/index.css" /><style>html,body,#map {height: 100%;padding: 0;margin: 0;}.menuBar {position: absolute;text-align: center;top: 10px;margin: 0 50px;padding: 5px;border-radius: 3px;z-index: 999;color: #ffffff;background-color: rgba(0, 168, 0, 1);}.timeslider {position: absolute;z-index: 999;width: 100%;height: 100px;background: lightseagreen;bottom: 0px;display: flex;align-items: center;justify-content: center;}.block {width: 80%;}.timeslider .slider-demo-block {display: flex;align-items: center;}.slider-demo-block .el-slider {margin-top: 0;margin-left: 12px;}.el-slider__marks-text {position: absolute;-webkit-transform: translateX(-50%);transform: translateX(-50%);font-size: 14px;color: #fff;margin-top: 15px;}</style><script src="../../lib/vue@2.6.11/vue.js"></script><!-- <script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script> --><!-- 引入组件库 --><!-- <script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script> --><script src="../../lib/element-ui@2.13.0/index.js"></script><script src="../../js/prjconfig.js" maptype="leaflet"></script><!-- 引入插件 --><script src="../../lib/leaflet/plugins/leaflet.polylineDecorator.js"></script><script src="../../lib/leaflet/plugins/Leaflet.AnimatedMarker.js"></script>
</head><body><div id="map"></div><div class="menuBar"><input type="button" value="开始" onclick="startClick()" /><input type="button" value="暂停" onclick="pauseClick()" /><input type="button" value="加速" onclick="speetUp()" /><input type="button" value="减速" onclick="speetDown()" /><input type="button" value="停止" onclick="stopClick()" /></div><div id="app" class="timeslider"><div class="block"><el-slider v-model="value" :max="120" :step="10" :marks="marks" :show-tooltip="false" @change="change"></el-slider></div></div><script>//'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'var map = L.map("map", {crs: L.CRS.EPSG4326, //L.CRS.EPSG3857center: [MAPINIT.Location.lat, MAPINIT.Location.lon], //[40.76339, 106.9477844],zoom: MAPINIT.Location.zoom,minZoom: MAPINIT.zoomsExtent[0],maxZoom: MAPINIT.zoomsExtent[1],zoomControl: true,});// 使用WMTS Key-Value加载地图服务let _getc ="http://192.168.1.212:8095/server/default/getTile/wmts?request=GetCapabilities&service=wmts&layer=yx";MAPCONFIG.MAPWMTS_IMG ="http://192.168.1.212:8095/server/vtile/getTile/wmts";let ls ="http://192.168.1.212:8095/server/vtile/getTile/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=yx&STYLE=default&TILEMATRIXSET=w&FORMAT=image/png&TILEMATRIX={z}&TILECOL={x}&TILEROW={y}&tk=''";L.tileLayer(ls, {zoomOffset: 1,}).addTo(map);map.setView(L.latLng(37.550339, 104.114129), 4); //设置缩放级别及中心点let speetX = 1; // 默认速度倍数// 加速function speetUp() {speetX = speetX * 2;animatedMarker.setSpeetX(speetX);}// 减速function speetDown() {speetX = speetX / 2;animatedMarker.setSpeetX(speetX);}// 开始function startClick() {animatedMarker.start();}// 暂停function pauseClick() {animatedMarker.pause();}// 停止function stopClick() {newLatlngs = [];animatedMarker.stop();}var routeLine;var realRouteLine;var decorator;var animatedMarker;var newLatlngs;// 初始化轨迹function initTrack(coor) {let latlngs = coor;// 小车速度var speedList = [1, 1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 4, 4, 5, 5, 4, 4, 4, 3, 2, 2, 1, 1,1,];// 轨迹线routeLine = L.polyline(latlngs, {weight: 8,}).addTo(map);// 实时轨迹线realRouteLine = L.polyline([], {weight: 8,color: "#FF9900",}).addTo(map);// 轨迹方向箭头decorator = L.polylineDecorator(routeLine, {patterns: [{repeat: 50,symbol: L.Symbol.arrowHead({pixelSize: 5,headAngle: 75,polygon: false,pathOptions: {stroke: true,weight: 2,color: "#FFFFFF",},}),},],}).addTo(map);var carIcon = L.icon({iconSize: [37, 26],iconAnchor: [19, 13],iconUrl: "../../image/car.png",});// 动态markeranimatedMarker = L.animatedMarker(routeLine.getLatLngs(), {speedList: speedList,interval: 200, // 默认为100mmicon: carIcon,playCall: updateRealLine,}).addTo(map);newLatlngs = [routeLine.getLatLngs()[0]];// 绘制已行走轨迹线（橙色那条）function updateRealLine(latlng) {newLatlngs.push(latlng);realRouteLine.setLatLngs(newLatlngs);}}// 清除polyline线function clearPolylineGroup(polyline_group) {latlngs = [];if (polyline_group) {map.removeLayer(polyline_group);}}// 清除轨迹方向箭头function clearArrow() {map.removeLayer(decorator);}// 清除markerfunction clearMarker() {map.removeLayer(animatedMarker);}// 重置清空地图上的轨迹、markerfunction resetMap() {clearPolylineGroup(routeLine);clearArrow(decorator);clearMarker(animatedMarker);}let app = new Vue({el: "#app",data: {message: "Hello Vue!",value: 0,marks: {0: "2023-01",10: "2023-02",20: "2023-03",30: "2023-04",40: "2023-05",50: "2023-06",60: "2023-07",70: "2023-08",80: "2023-09",90: "2023-10",100: "2023-11",110: "2023-12",},latlngs: [[39.898457, 116.391844],[39.898595, 116.377947],[39.898341, 116.368001],[39.898063, 116.357144],[39.899095, 116.351934],[39.905871, 116.35067],[39.922329, 116.3498],[39.931017, 116.349671],[39.939104, 116.349225],[39.942233, 116.34991],[39.947263, 116.366892],[39.947568, 116.387537],[39.947764, 116.401988],[39.947929, 116.410824],[39.947558, 116.42674],[39.9397, 116.427338],[39.932404, 116.427919],[39.923109, 116.428377],[39.907094, 116.429583],[39.906858, 116.41404],[39.906622, 116.405321],[39.906324, 116.394954],[39.906308, 116.391264],[39.916611, 116.390748],],},mounted() {this.getMonth();initTrack(this.latlngs);},methods: {change(e) {let step = e.toString();// console.log(Object.keys(this.marks));if (Object.keys(this.marks).indexOf(step) > -1) {console.log(this.marks[step]);}// console.log(this.value);if (this.value == 20) {resetMap();} else {resetMap();initTrack(this.latlngs);}},getMonth() {let dataArr = [];let data = new Date();let year = data.getFullYear();data.setMonth(data.getMonth() + 1, 1); //获取到当前月份,设置月份for (let i = 0; i < 12; i++) {data.setMonth(data.getMonth() - 1); //每次循环一次,月份值减1let m = data.getMonth() + 1;m = m < 10 ? "0" + m : m;dataArr.push(data.getFullYear() + "-" + m);}let list = dataArr.reverse();let obj = {};let labelArr = Object.keys(this.marks);labelArr.forEach((item, index) => {obj[item] = list[index];});this.marks = obj;},},});</script>
</body></html>
