uniapp 天地图 引入多js文件写法；附天地图车辆轨迹

展示：车辆轨迹

在JSAPI中： 

引入多js文件：

用uniapp的写法：

uniapp写法参考：
 

<template>
  <view class="container">
    <!-- 地图容器 -->
    <view id="mapDiv" style="width: 100%; height: 400px;"></view>

    <!-- 控制按钮 -->
    <view>
      <button @click="startTrack">开始</button>
      <button @click="pauseTrack">暂停</button>
      <button @click="stopTrack">结束</button>
    </view>
  </view>
</template>

<script>
	import config from '@/config.js'
export default {
  data() {
    return {
      map: null, // 地图实例
      carTrack: null, // 车辆轨迹实例
      tileLayer: null, // 瓦片层
      datas: [], // 用于存储轨迹数据
    };
  },
  onReady() {
    // 页面加载完成后初始化地图
    this.initMap();
  },
  methods: {
    // 初始化地图
    initMap() {
      // 动态引入天地图和相关脚本
      const script = document.createElement('script');
      script.src = "http://api.tianditu.gov.cn/api?v=4.0&tk="+config.tiandimap_key; // 替换为你的天地图密钥
      script.onload = () => {
        this.loadCarTrackScripts();
      };
      document.body.appendChild(script);
    },

    // 引入车辆轨迹相关的脚本
    loadCarTrackScripts() {
      const carTrackScript = document.createElement('script');
      carTrackScript.src = "http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/CarTrack.js";
      carTrackScript.onload = () => {
        this.loadD3Scripts();
      };
      document.body.appendChild(carTrackScript);
    },
	
	// 引入2
	loadD3Scripts() {
	  const d3Script = document.createElement('script');
	  d3Script.src = "http://lbs.tianditu.gov.cn/js/lib/d3/d3.min.js";
	  d3Script.onload = () => {
	    this.loadSvgScripts() ;
	  };
	  document.body.appendChild(d3Script);
	},
	
	// 引入3
	loadSvgScripts() {
	  const svgScript = document.createElement('script');
	  svgScript.src = "http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/D3SvgOverlay.js";
	  svgScript.onload = () => {
	    this.loadPointScripts();
	  };
	  document.body.appendChild(svgScript);
	},
	
	// 引入4
	loadPointScripts() {
	  const pointScript = document.createElement('script');
	  pointScript.src = "http://lbs.tianditu.gov.cn/api/js4.0/opensource/data/point.js";
	  pointScript.onload = () => {
	    this.createMap();
	  };
	  document.body.appendChild(pointScript);
	},
	
	

    // 创建地图实例
    createMap() {
      // 创建天地图的瓦片图层
      this.tileLayer = new T.TileLayer("http://t4.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk="+config.tiandimap_key);

      // 创建地图实例并设置初始位置
      this.map = new T.Map("mapDiv", { layers: [this.tileLayer] });
      this.map.centerAndZoom(new T.LngLat(116.318090, 39.920270), 13);

      // 模拟轨迹数据（请根据实际情况获取）
      this.datas = this.getTrackData();

      // 创建车辆轨迹实例
      this.carTrack = new T.CarTrack(this.map, {
        interval: 5,
        speed: 4,
        dynamicLine: true,
        polylinestyle: { color: "#2C64A7", weight: 5, opacity: 0.9 },
        Datas: this.datas.map(obj => new T.LngLat(obj[0], obj[1]))
      });
    },

    // 模拟轨迹数据（实际应用中可以替换为动态获取的数据）
    getTrackData() {
      return [
        [116.318090, 39.920270],
        [116.319090, 39.921270],
        [116.320090, 39.922270],
        [116.321090, 39.923270],
        [116.322090, 39.924270]
      ];
    },

    // 开始轨迹
    startTrack() {
      if (this.carTrack) {
        this.carTrack.start();
      }
    },

    // 暂停轨迹
    pauseTrack() {
      if (this.carTrack) {
        this.carTrack.pause();
      }
    },

    // 结束轨迹
    stopTrack() {
      if (this.carTrack) {
        this.carTrack.stop();
      }
    }
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}

#mapDiv {
  width: 100%;
  height: 400px;
}

button {
  margin: 10px;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
}
</style>