vue3+ts天地图引入及小车轨迹动画-优快云博客

1. vue天地图的引入

在index.html中加上下面几句话

	<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- 其他 meta 标签 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- 天地图 API（替换为你的密钥） -->
    <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/d3/d3.min.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>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

2. 小车轨迹动画

<template>
  <div class="map-container">
    <!-- 地图容器 -->
    <div id="mapDiv" class="map-box"></div>
    <!-- 控制按钮 -->
    <div class="control-buttons">
      <button @click="handleStart">开始</button>
      <button @click="handlePause">暂停</button>
      <button @click="handleStop">停止</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, Ref } from 'vue';

// 声明天地图全局类型（避免 TS 类型报错）
declare global {
  interface Window {
    T: any; // 天地图核心对象
  }
}

// 组件状态
const map: Ref<any> = ref(null); // 地图实例
const drivingRoute: Ref<any> = ref(null); // 驾车路线实例
const carTrack: Ref<any> = ref(null); // 轨迹运动实例
const zoom = 13; // 地图缩放级别

// 图标资源
const startIcon = "http://lbs.tianditu.gov.cn/images/bus/start.png";
const endIcon = "http://lbs.tianditu.gov.cn/images/bus/end.png";

// 初始化地图
const initMap = () => {
  // 创建地图实例（绑定到 id 为 mapDiv 的容器）
  map.value = new window.T.Map('mapDiv');
  // 设置地图中心点和缩放级别（北京区域示例坐标）
  map.value.centerAndZoom(
    new window.T.LngLat(116.40069, 39.89945),
    zoom
  );
};

// 初始化驾车路线服务
const initDrivingRoute = () => {
  const config = {
    policy: 0, // 驾车策略（0：默认最短路径）
    onSearchComplete: handleRouteResult // 路线搜索完成回调
  };
  drivingRoute.value = new window.T.DrivingRoute(map.value, config);
};

// 搜索驾车路线
const searchRoute = () => {
  // 清除地图已有覆盖物（避免重复绘制）
  map.value.clearOverLays();
  
  // 起点和终点坐标（可自定义）
  const startPoint = new window.T.LngLat(116.354060, 39.905650);
  const endPoint = new window.T.LngLat(116.428130, 39.903550);
  
  // 发起路线搜索
  drivingRoute.value.search(startPoint, endPoint);
};

// 处理路线搜索结果
const handleRouteResult = (result: any) => {
  // 添加起点和终点标注
  addStartEndMarkers(result);
  
  // 获取路线方案（取第一条路线）
  const routeCount = result.getNumPlans();
  if (routeCount > 0) {
    const firstRoute = result.getPlan(0); // 第一条路线方案
    const pathPoints = firstRoute.getPath(); // 路线的经纬度点数组
    
    // 创建轨迹运动实例
    createCarTrack(pathPoints);
  }
};

// 添加起点和终点标注
const addStartEndMarkers = (result: any) => {
  // 起点标注
  const startMarker = new window.T.Marker(result.getStart(), {
    icon: new window.T.Icon({
      iconUrl: startIcon,
      iconSize: new window.T.Point(44, 34), // 图标大小
      iconAnchor: new window.T.Point(12, 31) // 图标锚点（定位点）
    })
  });
  map.value.addOverLay(startMarker);
  
  // 终点标注
  const endMarker = new window.T.Marker(result.getEnd(), {
    icon: new window.T.Icon({
      iconUrl: endIcon,
      iconSize: new window.T.Point(44, 34),
      iconAnchor: new window.T.Point(12, 31)
    })
  });
  map.value.addOverLay(endMarker);
};

// 创建轨迹运动实例
const createCarTrack = (pathPoints: any[]) => {
  carTrack.value = new window.T.CarTrack(map.value, {
    interval: 20, // 运动帧间隔（ms），值越小越平滑
    speed: 10, // 运动速度（数值越大越快）
    dynamicLine: true, // 路线随运动动态显示
    Datas: pathPoints, // 轨迹路径点数组
    polylinestyle: { // 路线样式
      color: "#2C64A7",
      width: 5,
      opacity: 0.9
    }
  });
};

// 控制按钮事件
const handleStart = () => carTrack.value?.start();
const handlePause = () => carTrack.value?.pause();
const handleStop = () => carTrack.value?.stop();

// 组件挂载时初始化
onMounted(() => {
  // 确保天地图 API 已加载（需在 index.html 中引入）
  if (window.T) {
    initMap();
    initDrivingRoute();
    searchRoute();
  } else {
    console.error("天地图 API 未加载，请检查引入是否正确");
  }
});
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.map-box {
  flex: 1;
  width: 100%;
}

.control-buttons {
  padding: 10px;
  background: #fff;
  display: flex;
  gap: 10px;
}

button {
  padding: 6px 12px;
  cursor: pointer;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
}

button:hover {
  background: #096dd9;
}
</style>