车辆轨迹组件

示例

//注册时引入车辆轨迹插件
Vue.use(VueTianditu, {
  v: "4.0",
  tk: "your map token",
  plugins: ["CarTrack"]
});

<template>
  <div class="mapDiv">
    <tdt-map :center="center" :zoom="zoom">
      <tdt-cartrack ref="tdtCartrack" :Datas="tracks" :interval="5" :speed="10"></tdt-cartrack>
    </tdt-map>
    <button @click="getData">获取数据</button>
    <button @click="ctrlTrack('start')">开始</button>
    <button @click="ctrlTrack('pause')">暂停</button>
    <button @click="ctrlTrack('stop')">停止</button>
    <button @click="ctrlTrack('clear')">清空</button>
  </div>
</template>

<script>
const tracks = [
  [113.282417, 23.112452],
  [113.282422, 23.112878],
  [113.28279, 23.113568],
  [113.283307, 23.113864],
  [113.283307, 23.113864],
  [113.283717, 23.114324],
  [113.283913, 23.114592],
  [113.283913, 23.114592],
  [113.283913, 23.114592],
  [113.28914, 23.137385],
  [113.291526, 23.137098],
  [113.29414, 23.137017],
  [113.296902, 23.137084],
  [113.24633, 23.142696],
  [113.244502, 23.14353],
  [113.251482, 23.140548],
  [113.25275, 23.140262],
  [113.254188, 23.139822],
  [113.252869, 23.140541],
  [113.250713, 23.141234],
  [113.249815, 23.141546],
  [113.25071, 23.141067],
  [113.252108, 23.140466]
];

export default {
  name: "ex-cartrack",
  data() {
    return {
      center: [113.280637, 23.125178],
      zoom: 11,
      tracks: []
    };
  },
  methods: {
    getData() {
      this.tracks = tracks;
    },
    ctrlTrack(type) {
      this.$refs.tdtCartrack[type]();
      if (type === "clear") {
        this.tracks = [];
      }
    }
  }
};
</script>

<style scoped>
.mapDiv {
  width: 100%;
  height: 300px;
}
</style>

• CarTrack.js 无法在 github 的 https 连接下加载，但实际仍可参考以上示例使用

属性

属性	类型	默认值	说明
interval	Number	1000	从当前节点到下一节点的时间间隔。
speed	Number	0	一个时间间隔移动的距离，单位是米。 注：speed 为 0 时，按照 Datas 数组中每个元素的坐标移动。
dynamicLine	Boolean	false	为 true 时轨迹线随车移动而变化。 false 时，车辆运动轨迹提前画好且无动态变化。
Datas	Array	[]	数据来源。
carstyle	object	{ display:true, iconUrl:"car.png", width:52, height:26 }	车辆样式。
polylinestyle	object	{ display:true, color:"red", width:"3", opacity:0.8 }	车辆轨迹线样式。
startOnInit	Boolean	false	初始化完成后车辆立刻开始移动

事件

事件	参数	描述
passOneNode	{ lnglat, index, length }	车辆移动一次时触发的事件 lnglat：经过的坐标 index：节点序号。 length:总节点数量。

方法

方法	返回值	说明
start()	无	车辆开始或者继续移动。
stop()	无	车辆停止移动。
pause()	无	车辆暂停移动。
clear()	无	清除所有绘制的元素，并注销相关地图事件。