背景
公司的项目是汽车租赁项目，技术栈主要是Vue+天地图/高德，本文用天地图的api进行编写。
如果只是简单的把汽车运动轨迹回显出来很简单，网上教程也很多，但是还要控制回显的速度就很麻，期间也尝试了很多方法，最后还是向以前的老领导咨询才完成的功能，虽说有点麻烦 但是仅供参考吧。
完成的效果就不展示出来了，毕竟公司保密项目，上具体代码吧
引入
想在Vue中使用天地图还是老一套的引入在html中（xxx中是你申请天地图的key），想在Vue中使用天地图的回显还要引入一个d3.js，也可以在项目中创建一个js文件把d3.js的代码复制下来
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=xxxx" type="text/javascript"></script>
<script src="http://cdn.bootcss.com/d3/3.5.17/d3.js " charset="utf-8"></script>
还需要引入，这俩文件是我在当前文件下创建的js，其中这俩文件的具体源码都可以在网上找到 我就不放出来了
（lbs.tianditu.gov.cn/api/js4.0/o… ） CarTrack.js的地址
（lbs.tianditu.gov.cn/api/js4.0/o… ） d3.js的地址
/**
* T.D3Overlay借助D3.js强大的可视化功能，扩展天地图已有的覆盖物类 T.Overlay，
* 使天地图表达的可视化信息，不仅仅只有地理数据展示，也可以结合更丰富的图形(柱图，饼图)来描述、展现数据。
* 注：chrome、safari、IE9及以上浏览器。
*/
import "./D3SvgOverlay.js" （这个就是在html中引入的d3.js，看实际情况有一个就可以）
/****
* 依赖于天地图的D3.js支持库，以SVG的形式对车辆行驶位置及轨迹进行实时跟踪和动态展示。
* 实现车辆沿路线运动，并有暂停等功能。
* 注：chrome、safari、IE9及以上浏览器。
* ****/
/**
* 车辆的图片，包含坐标和旋转相关方法
*/
import "./CarTrack"
接下来创建地图map对象，先创建一个init.js，在.vue中引入
export default {
init: function() {
return new Promise((resolve, reject) => {
// 如果已加载直接返回
if (typeof window.T !== 'undefined') {
resolve(window.T)
return true
}
window.onload = function() {
// eslint-disable-next-line
resolve(window.T)
}
})
}
}
import MapInit from './init.js'
mounted() {
this.initMap();
}，
methods: {
//天地图
//初始化地图
initMap() {
MapInit.init().then((T) => {
this.T = T
const imageURL = "https://t0.tianditu.gov.cn/img_c/wmts?tk=xxxx";
const lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 });
const config = { layers: [lay], name: 'TMAP_SATELLITE_MAP' };
//real_time_monitoring_map就是地图div的id
this.map = new T.Map('real_time_monitoring_map', config);
const ctrl = new T.Control.MapType();
this.map.addControl(ctrl);
this.map.centerAndZoom(new T.LngLat(117.1691894500, 36.5802466000), 8);
//创建标注工具对象
this.lineTool = new T.PolylineTool(this.map, {
showLabel: true
})
}).catch(error => {
console.log(error)
});
},
}
创建地图轨迹回显CarTrack对象，具体参数参考 lbs.tianditu.gov.cn/api/js4.0/o… 附带一个文档地址
//此数据为模拟数据
this.checkList=[
{lon:111,lat:39,locationDate:"2021-10-12"},
{lon:122,lat:39,locationDate:"2021-10-13"},
{lon:123,lat:39,locationDate:"2021-10-17"},
{lon:124,lat:39,locationDate:"2021-10-18"},
]
//轨迹回显
setCarTrack() {
this.mapCarTrack = new T.CarTrack(this.map, {
interval: 5,
speed: Number(this.mapCarTrackSpeed), //地图上运行速度
carstyle: {
display: true,
iconUrl: personnelTrajectorylUrl,
width: 30,
height: 30
},
dynamicLine: true,
polylinestyle: {color: "#2C64A7", weight: 5, opacity: 0.9},
Datas: this.checkList.map(function (obj, i) {
var coordinates = obj
var lnlat = new T.LngLat(coordinates.lon, coordinates.lat);
return lnlat;
}),
passOneNode: this.carpassOneNodeRecord
})
var dataslist = this.mapCarTrack.options.Datas;
for (var j = 0; j < this.checkList.length - 1; j++) {
var p1 = this.mapCarTrack.dataToLnglat(dataslist[j]);
var p2 = this.mapCarTrack.dataToLnglat(dataslist[j + 1]);
var d = this.mapCarTrack.map.getDistance(p1, p2);
for (var k = 0; k < Math.round(d); k++) {
this.trajectoryNodes.push(this.checkList[j].locationDate);
}
}
},
//这个方法主要目的是让轨迹到终点时候停止，方法自带方法到终点还会重新运动
carpassOneNodeRecord(lnglat, index, length) {
//this.mapCarTrack.carMarker.div.innerHTML是图片移动时候标注显示内容
var img = this.mapCarTrack.carMarker.img.outerHTML;
this.mapCarTrack.carMarker.div.style.width="150px";
var index1 = Math.round((index - 1) * this.trajectoryNodes.length / length);
if (this.trajectoryNodes.length <= index1) {
this.mapCarTrack.carMarker.div.innerHTML =
img + "<b style='color: white; background-color: #696666;'>" + this.trajectoryNodes[this.trajectoryNodes.length - 1] + "</b>";
} else {
this.mapCarTrack.carMarker.div.innerHTML =
img + "<b style='color: white; background-color: #696666;'>" + this.trajectoryNodes[index1] + "</b>";
}
if (index == length) {
this.recordstopTrack(); //暂停
}
},
//开始回放
startPlayback() {
if (this.checkList.length > 1) {
this.mapCarTrack.start();
}
},
//这个地方是动态改变运行的速度，但是有一个问题就是重新从起点开始运行（具体没找到好办法）
inputNumbertag(value) {
if (this.mapCarTrack != undefined) {
this.mapCarTrack.stop();//结束
if (this.mapCarTrackSpeed!=0){
/**
* 这个地方说一下
* 为什么要在start，stop一次，我的猜测是当前改变的是下一次运行的
* 也就是说要把当前一次的开启停止，再重新开始，再地图上重新绘制
* 地图上的体现就是，清除上一次svg，绘制一次svg清除掉，再重新绘制一次在开始
*/
this.mapCarTrack.options.speed = Number(this.mapCarTrackSpeed);
this.mapCarTrack.start();
this.mapCarTrack.stop();
this.mapCarTrack.start();
}
},
//结束
endTrack() {
if (this.mapCarTrack != undefined) {
this.mapCarTrack.clear();
this.mapCarTrack=null
this.map.clearOverLays();
}
},
//暂停
stopTrack(){
this.mapCarTrack.pause();
},
//继续
goTrack(){
if(this.checkList.length>1) {
this.mapCarTrack.start();
}
},
总结
当初也是费了好几天的时间，此篇纯属记录一下，希望老铁有更好的意见，这边方面资料我搜了下很少，可能我姿势不太对。
