vue2-天地图-单行轨迹单个标注点沿直线的轨迹运动

public/index.html引入head标签里面

<script

  type="text/javascript"

  src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥"

></script>

<script src="http://lbs.tianditu.gov.cn/js/lib/jquery/jquery-1.7.2.min.js"></script>

<script src="http://cdn.bootcss.com/d3/3.5.17/d3.js " charset="utf-8"></script>

<script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/D3SvgOverlay.js"></script>

<script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/CarTrack.js"></script>

index.vue文件

<template>
  <div>
    <div id="mapDiv"></div>
    <p>本例演示单个标注点沿直线的轨迹运动</p>
    <div>
      <input type="button" value="开始" @click="_CarTrack.start()" />
      <input type="button" value="暂停" @click="_CarTrack.pause()" />
      <input type="button" value="结束" @click="_CarTrack.stop()" />
    </div>
  </div>
</template>

<script>
export default {
  name: "CarTrackExample",
  data() {
    return {
      map: null,
      drivingRoute: null,
      zoom: 13,
      _CarTrack: null,
      startIcon: "http://lbs.tianditu.gov.cn/images/bus/start.png",
      endIcon: "http://lbs.tianditu.gov.cn/images/bus/end.png",
    };
  },
  mounted() {
    this.onLoad();
  },
  methods: {
    onLoad() {
      this.map = new T.Map("mapDiv");
      this.map.centerAndZoom(new T.LngLat(116.40069, 39.89945), this.zoom);
      this.drivingRoute = new T.DrivingRoute(this.map, {
        policy: 0,
        onSearchComplete: this.searchResult,
      });
      this.searchDrivingRoute();
    },
    searchDrivingRoute() {
      this.map.clearOverLays();
      const startLngLat = new T.LngLat(116.35406, 39.90565);
      const endLngLat = new T.LngLat(116.42813, 39.90355);
      this.drivingRoute.search(startLngLat, endLngLat);
    },
    createRoute(lnglats) {
      this._CarTrack = new T.CarTrack(this.map, {
        interval: 20,
        speed: 10,
        dynamicLine: true,
        Datas: lnglats,
        polylinestyle: { color: "#2C64A7", width: 5, opacity: 0.9 },
      });
    },
    createStartMarker(result) {
      const startMarker = new T.Marker(result.getStart(), {
        icon: new T.Icon({
          iconUrl: this.startIcon,
          iconSize: new T.Point(44, 34),
          iconAnchor: new T.Point(12, 31),
        }),
      });
      this.map.addOverLay(startMarker);
      const endMarker = new T.Marker(result.getEnd(), {
        icon: new T.Icon({
          iconUrl: this.endIcon,
          iconSize: new T.Point(44, 34),
          iconAnchor: new T.Point(12, 31),
        }),
      });
      this.map.addOverLay(endMarker);
    },
    searchResult(result) {
      this.createStartMarker(result);
      const routes = result.getNumPlans();
      for (let i = 0; i < routes; i++) {
        const plan = result.getPlan(i);
        this.createRoute(plan.getPath());
      }
    },
  },
};
</script>

<style scoped>
body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "微软雅黑";
}
#mapDiv {
  height: 400px;
  width: 100%;
}
input,
p {
  margin-top: 10px;
  margin-left: 5px;
  font-size: 14px;
}
</style>