介紹一個基于高德地圖JSAPI軌跡展示案例；
說明：
1、定時接口取數(shù)據(jù)刷新軌跡；
2、軌跡坐標數(shù)量較大；
3、軌跡點位信息需要展示，如時間、速度、多少點位；
4、避免地圖重新渲染，只刷新坐標；
使用：
一、引入高德地圖資源包；
我將該資源引用在index頁面里面
二、引用高德地圖相關(guān)插件；
import AMapfrom 'AMap' // 引入高德地圖
import AMapUIfrom 'AMapUI' // 引入高德地圖
我使用的是vue-cli3，所以需要在vue-config.js進行一些基礎(chǔ)配置
const webpack = require('webpack')
module.exports = {
configureWebpack: {
externals: {
'AMap': 'AMap', // 高德地圖配置
'AMapUI': 'AMapUI' // 高德地圖配置
}
}
}
三、創(chuàng)建地圖
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('當前環(huán)境不支持 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 + '，點數(shù)量' + pathData.path.length;
},
? ? ? ? renderOptions: {
? ? ? ? ? ? renderAllPointsIfNumberBelow: 1000, //繪制路線節(jié)點，如不需要可設(shè)置為-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 = [];//點標記數(shù)組
? ? ? ? ? ? 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)? ? ? //請求失敗返回的數(shù)據(jù)
? ? ? ? ? ? });
? ? ? ? ? ? //循環(huán)將選中的軌跡添加到實例中
? ? ? ? ? ? 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]);
? ? ? ? ? ? ? ? ? ? ? ? //創(chuàng)建點標記
? ? ? ? ? ? ? ? ? ? ? ? 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],//經(jīng)緯度
? ? ? ? ? ? ? ? ? ? ? ? ? ? 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;
})
}
}
}
}
? ? ? ? ? ? //將點標記獲取的數(shù)組渲染到相應(yīng)位置
? ? ? ? ? ? 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)
})
});
此處定時器一開始時間間隔較短，后間隔較長。渲染軌跡只調(diào)用pathSimplifierIns.setData(that.pathData)；不可以重復(fù)加載地圖組件；
