原瓦片图轨迹回放实现代码
<div ref="mapBox" :style="{ position: 'fixed', top: (isTrack ? '100px' : '99999px'), width: '1920px', zIndex: 20 }">
<div id="centerMap" style="height: 800px; position: relative;">
<div class="close" @click="close">关闭</div>
</div>
</div>
//引入js
import L from 'leaflet'
import 'leaflet-canvas-marker'
import 'leaflet/dist/leaflet.css'
//瓦片地图获取数据
seeTrack(row) {
const self = this
let param = {
userId: row.userId,
};
this.$axios
.get(BASE_URL + "/statisticsMy/getUserTrack", {
params: param,
})
.then((res) => {
this.center = res.data.result.centerList;
this.coordinates = res.data.result.resultList;
this.pointList = res.data.result.resultList;
if (this.pointList.length) {
this.$nextTick(() => {
this.map = L.map('centerMap', {
center: [self.center[1], self.center[0]],
zoom: 13
})
L.tileLayer('https://线上部署图片路径/mapImg/{z}/{x}/{y}.png', {
minZoom: 5,
maxZoom: 15
}).addTo(this.map)
layerGroup = L.canvasIconLayer({}).addTo(this.map)
layerGroup.addOnClickListener(function (e, data) {
// self.handleClick(data[0].data.options.data[3] || 0)
})
let newIcon = '';
let newPonitList = []
if (row.biz) {
if (row.biz == "巡警") {
newIcon = policeman;
}
if (row.biz == "环卫") {
newIcon = environmental;
}
if (row.biz == "市政") {
newIcon = government;
}
if (row.biz == "外卖员" && row.name != "陈东磊") {
newIcon = take_out;
} else if (row.biz == "外卖员" && row.name == "陈东磊") {
newIcon = take_out_down;
}
if (row.biz == "其他" || row.biz == "全部") {
newIcon = rest;
}
} else {
newIcon = rest
}
Object.values(self.pointList).forEach(item => {
newPonitList.push([
item[1], item[0]
])
// console.log('22222222', item)
let storeIcon = item[2] == 0
? store01
: item[2] == 1
? store02
: item[2] == 2
? store03
: item[2] == 3
? store04
: store05
marker = L.marker([item[1], item[0]], {
icon: L.icon({
iconUrl: storeIcon,
iconSize: [24, 34],
iconAnchor: [8, 12.5]
}),
data: item
})
layerGroup.addLayer(marker)
})
let marker5 = L.Marker.movingMarker(
newPonitList,
10000, {
autostart: true,
loop: true,
icon: L.icon({
iconUrl: newIcon,
iconSize: [44, 54],
iconAnchor: [22, 27]
}),
}).addTo(this.map)
marker5.addStation(1, 2000)
marker5.addStation(2, 2000)
marker5.addStation(3, 2000)
marker5.addStation(4, 2000)
L.polyline(newPonitList, {
color: '#999999'
}).addTo(this.map)
})
} else {
this.map = L.map('centerMap', {
center: [24.328789, 109.434002],
zoom: 13
})
L.tileLayer('https://线上部署图片路径/mapImg/{z}/{x}/{y}.png', {
minZoom: 5,
maxZoom: 15
}).addTo(this.map)
}
this.isTrack = true;
});
},
close() {
this.isTrack = false;
// 瓦片地图清除地图实例
if (marker) { layerGroup.removeLayer(marker) }
this.map.off()
this.map.remove()
},
//接口/statisticsMy/getUserTrack返回的res
{
"data": {
"success": true,
"message": "",
"code": 200,
"result": {
"resultList": [
[
109.39425,
24.278527,
12,
"1815702125918621700"
],
[
109.39425,
24.278527,
12,
"1815702125918621700"
],
[
109.39425,
24.278527,
12,
"1815702125918621700"
],
[
109.413627,
24.292133,
12,
"1815702125838929922"
],
[
109.413627,
24.292133,
12,
"1815702125838929922"
],
[
109.413627,
24.292133,
12,
"1815702125838929922"
],
[
109.413627,
24.292133,
12,
"1815702125838929922"
],
[
109.413627,
24.292133,
12,
"1815702125838929922"
],
[
109.39425,
24.278527,
12,
"1815702125918621700"
],
[
109.39425,
24.278527,
12,
"1815702125918621700"
],
[
109.39425,
24.278527,
12,
"1815702125918621700"
],
[
109.39425,
24.278527,
12,
"1815702125918621700"
]
],
"centerList": [
109.40232324535405,
24.284196465201465
]
},
"timestamp": 1722496852662
},
}
高德地图实现轨迹回放;大体逻辑一致,具体api更换
<!-- 高德地图轨迹 -->
<div ref="mapBox" :style="{ position: 'fixed', top: (isTrack ? '100px' : '99999px'), width: '1920px', zIndex: 20 }">
<div id="centerMap" style="height: 800px; position: relative;"></div>
<div class="close" @click="close">关闭</div>
</div>
// 高德地图轨迹形式
seeTrack(row) {
const self = this;
let param = {
userId: row.userId,
};
this.$axios
.get(BASE_URL + "/statisticsMy/getUserTrack", {
params: param,
})
.then((res) => {
this.center = res.data.result.centerList;
this.coordinates = res.data.result.resultList;
this.pointList = res.data.result.resultList;
if (this.pointList.length) {
this.$nextTick(() => {
//首先要在地图实例化之前添加AMap.MoveAnimation加载动画插件
AMap.plugin('AMap.MoveAnimation', function () {
// Initialize map only if not already done
if (!self.map) {
//实例化地图
self.map = new AMap.Map("centerMap", {
resizeEnable: true,//缩放
center: [self.center[0], self.center[1]],
zoom: 13,
});
}
//定义移动icon
let newIcon = '';
let newPonitList = [];
if (row.biz) {
if (row.biz == "巡警") {
newIcon = policeman;
} else if (row.biz == "环卫") {
newIcon = environmental;
} else if (row.biz == "市政") {
newIcon = government;
} else if (row.biz == "外卖员" && row.name != "陈东磊") {
newIcon = take_out;
} else if (row.biz == "外卖员" && row.name == "陈东磊") {
newIcon = take_out_down;
} else if (row.biz == "其他" || row.biz == "全部") {
newIcon = rest;
}
} else {
newIcon = rest;
}
//遍历数据在地图中添加marker标记点
Object.values(self.pointList).forEach(item => {
newPonitList.push([item[0], item[1]]);
let icons = [store01, store02, store03, store04, store05];
let storeIcon = icons[item[2]] || store05;
// Check if map is initialized before adding markers
if (self.map) {
new AMap.Marker({
map: self.map,
position: [item[0], item[1]],
icon: storeIcon,//icon图标
offset: [-12, -30],//偏移量
});
}
});
//根据经纬度绘制路径线
if (self.map) {
new AMap.Polyline({
map: self.map,
path: newPonitList,
showDir: true,
strokeColor: "#28F",
strokeWeight: 6,
});
//在地图中添加移动icon
let peopleMarker = new AMap.Marker({
map: self.map,
position: newPonitList[0],
icon: new AMap.Icon({
size: new AMap.Size(44, 54),
image: newIcon,
imageSize: new AMap.Size(44, 54)
}),
offset: [-22, -27],
});
//执行IIFE让移动图标自动执行
(function startAnimation() {
peopleMarker.moveAlong(newPonitList, {
duration: 4000,//标记沿路径移动的总时长
autoRotation: false,//设置是否根据路径自动调整标记的旋转角度
circlable: true,//
});
})();
}
});
});
}
this.isTrack = true;
});
},
close() {
this.isTrack = false;
// 高德地图清除地图实例
if (this.map) {
this.map.clearMap(); // 清除地图上的所有图层和标记
this.map = null;
}
},
高德轨迹回放参考
轨迹回放-点标记-示例中心-JS API 2.0 示例 | 高德地图API (amap.com)
补充一下查询到的移动图标的属性api
moveAlong
方法的属性
duration
- 作用: 设置标记沿路径移动的总时长,单位为毫秒。
- 默认值: 路径点之间的距离乘以 10 的时间(如果未指定)。
- 示例:
duration: 500
表示移动将花费 500 毫秒。
autoRotation
- 作用: 设置是否根据路径自动调整标记的旋转角度,使其沿着路径的方向移动。
- 默认值:
false
。- 示例:
autoRotation: true
表示标记会自动旋转以跟随路径方向。
circlable
- 作用: 是否循环移动。设置为
true
时,标记在到达路径终点后会重新回到起点,继续移动。- 默认值:
false
。- 示例:
circlable: true
表示标记会沿着路径不断循环移动。
delay
- 作用: 设置延迟时间,单位为毫秒。标记将在指定时间后开始移动。
- 默认值:
0
。- 示例:
delay: 1000
表示标记会在 1 秒后开始移动。
pathIndex
- 作用: 设置从路径数组的哪个索引位置开始移动。
- 默认值:
0
。- 示例:
pathIndex: 2
表示标记将从路径的第 3 个点开始移动。
durationFactor
- 作用: 设置一个影响时长的系数,如果设为
0.5
,则移动的时长将缩短为原来的一半。- 示例:
durationFactor: 0.5
将缩短移动时间。