介绍一个基于高德地图JSAPI轨迹展示案例；
说明：
1、定时接口取数据刷新轨迹；
2、轨迹坐标数量较大；
3、轨迹点位信息需要展示，如时间、速度、多少点位；
4、避免地图重新渲染，只刷新坐标；
使用：
一、引入高德地图资源包；
我将该资源引用在index页面里面
二、引用高德地图相关插件；
import AMapfrom 'AMap' // 引入高德地图
import AMapUIfrom 'AMapUI' // 引入高德地图
我使用的是vue-cli3，所以需要在vue-config.js进行一些基础配置
const webpack = require('webpack')
module.exports = {
configureWebpack: {
externals: {
'AMap': 'AMap', // 高德地图配置
'AMapUI': 'AMapUI' // 高德地图配置
}
}
}
三、创建地图
this.map = new AMap.Map('container', {
zoom: 4,
mapStyle: 'amap://styles/fresh',
viewMode: '3D'//使用3D视图
});
四、地图渲染；
AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function (PathSimplifier, $) {
if (!PathSimplifier.supportCanvas) {
// alert('当前环境不支持 Canvas！');
return;
}
if(window.pathSimplifierIns) {
pathSimplifierIns.setData([]);
}
var pathSimplifierIns = new PathSimplifier({
zIndex: 100,
map: that.map, //所属的地图实例
getPath: function (pathData, pathIndex) {
return pathData.path;
},
autoSetFitView:false,
getHoverTitle: function (pathData, pathIndex, pointIndex) {
if (pointIndex >= 0) {
return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length+'，速度：'+pathData.tracks[pointIndex].speed+'m/s，时间：'+pathData.tracks[pointIndex].returnTime;
}
return pathData.name + '，点数量' + pathData.path.length;
},
renderOptions: {
renderAllPointsIfNumberBelow: 1000, //绘制路线节点，如不需要可设置为-1
pathLineStyle: {
dirArrowStyle: true
},
keyPointStyle:{
radius:3,//点的半径
},
keyPointOnSelectedPathLineStyle:{
radius:3,//点的半径
},
getPathStyle: function (pathItem, zoom) {
return {
pathLineStyle: {
strokeStyle: color,
lineWidth: lineWidth
},
pathLineSelectedStyle: {
lineWidth: lineWidth
},
pathNavigatorStyle: {
fillStyle: color
}
};
}
}
});
//将轨迹渲染至模板
//window.pathSimplifierIns = pathSimplifierIns;
let numnew = 0;
that.phoneHistory = [];
that.$nextTick(() => {
let setinter = () =>{
that.pathData = [];
that.map.remove(that.markerList);//清除上一次的点标记
that.markerList = [];//点标记数组
that.$axios({
url: "api/task/getTrackList?taskId=" + infoid,
method: "get",
data: {
taskId: infoid
},
xhrFields: {
withCredentials: true
},
}).then((res) => {
//登录检测
if (res.data.code != 0) {
this.logout(this,res.data.code);
// return that.$message({
// message: res.data.message,
// type: 'warning'
// });
}
that.missionData = [];
for (let item of res.data.data) {
that.phoneHistory.push({
id:item.outUser.id,
call:item.call
});
let mypath = [];
for (let i in item.tracks){
mypath.push([item.tracks[i].longitude,item.tracks[i].latitude]);
}
that.missionData.push({
data:item.outUser,
name:item.outUser.name?item.outUser.name:item.outUser.id,
id:item.outUser.id,
path:mypath,
tracks:item.tracks,
speed:item.tracks[item.tracks.length-1].speed
});
}
that.phonecheck();
}).catch((error) => {
//console.log(error) //请求失败返回的数据
});
//循环将选中的轨迹添加到实例中
for (let item in that.missionData) {
let id = that.missionData[item].id;
for (let i in that.personData) {
if (id == that.personData[i]) {
that.pathData.push(that.missionData[item]);
//创建点标记
that.markerList.push(new AMap.Marker({
text: that.missionData[item].name,
icon: "https://60.165.53.176:8090/001.png",//点标记的图片缺省值为高德默认图片
offset: new AMap.Pixel(-18, -18),
position: that.missionData[item].path[that.missionData[item].path.length - 1],//经纬度
title: that.missionData[item].path[that.missionData[item].path.length - 1],
// animation:'AMAP_ANIMATION_BOUNCE',
label: {
offset: new AMap.Pixel(-20, -24),//修改label相对于maker的位置
content: that.missionData[item].name
}
}));
if(setmap){
that.$nextTick(() => {
that.map.setFitView();
setmap = false;
})
}
}
}
}
//将点标记获取的数组渲染到相应位置
that.map.add(that.markerList);
//将轨迹渲染至模板
pathSimplifierIns.setData(that.pathData);
numnew++;
if(numnew>1){
clearInterval(that.pathInter)
if(setmaptwo){
that.map.setFitView();
setmaptwo = false;
}
that.pathInter = setInterval(setinter,10000)
}
}
that.pathInter = setInterval(setinter,1000)
})
});
此处定时器一开始时间间隔较短，后间隔较长。渲染轨迹只调用pathSimplifierIns.setData(that.pathData)；不可以重复加载地图组件；
网友评论