高德地图轨迹PHP,高德地图JSAPI轨迹重复绘制

介绍一个基于高德地图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)；不可以重复加载地图组件；