vue3使用高德地圖進行軌跡繪制及播放代碼示例

更新時間：2024年11月25日 08:44:45 作者：qq_54551471

這篇文章主要介紹了如何定義地圖容器及操作按鈕,使用高德地圖API進行軌跡繪制及播放的方法,并強調了界面樣式的重要性,高德地圖API的使用需要注冊獲取key,并且設置了地圖容器的大小,需要的朋友可以參考下

1、定義地圖容器及操作按鈕

 <div class="gaode-map">
    <div id="container"></div>
    <div class="option-btn">
      <el-button @click="handleStartDraw">開始繪制</el-button>
      <el-button @click="handleSave">保存路徑</el-button>
      <el-button @click="handleMove">開始動畫</el-button>
      <el-button @click="handlePause" v-if="!showStatus && start">暫停動畫</el-button>
      <el-button @click="handleResume" v-if="showStatus && start">繼續(xù)動畫</el-button>
      <el-button @click="handleStop" v-if="start">停止動畫</el-button>
    </div>
  </div>

2、引入高德地圖，軌跡繪制及播放方法實現(xiàn)

<script setup>

import AMapLoader from '@amap/amap-jsapi-loader';
import {ref,onMounted,nextTick} from "vue";
const path = ref([]);
const current_position = ref([]);

let AMap = ref(null)
let map = ref(null)
let search = ref('')
let polyline = ref(null)
let marker = ref(null)
let polyLineList = ref(null)
let markerMove = ref(null)
let lineArr = ref([])
let passedPolyline = ref(null)
let showStatus = ref(false)
let speedIn = ref(3000)

let start = ref(false)

let initMap = async () => {
  // window._AMapSecurityConfig = {
  //     securityJsCode: '', // 申請的高德Key相對應的密鑰
  // }
  AMap.value = await AMapLoader.load({
    key:"", // 申請好的Web端開發(fā)者Key，首次調用 load 時必填
    version:"2.0", // 指定要加載的 JSAPI 的版本，缺省時默認為 1.4.15
    // plugins:[''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
  map.value = new AMap.value.Map("container",{  // 設置地圖容器id
    viewMode:"3D",    // 是否為3D地圖模式
    zoom:13,           // 初始化地圖級別
    // center:[113.808299,34.791787], // 初始化地圖中心點位置，不設置的時候默認展示當前位置
  });
  // 添加插件
  AMap.value.plugin(["AMap.ToolBar", "AMap.Scale","AMap.MoveAnimation", "AMap.HawkEye","AMap.Geolocation","AMap.MapType","AMap.MouseTool"],  () => {
      //異步同時加載多個插件
      // 添加地圖插件
      // map.value.addControl(new AMap.value.ToolBar()); // 工具條控件;范圍選擇控件
      // map.value.addControl(new AMap.value.Scale()); // 顯示當前地圖中心的比例尺
      // map.value.addControl(new AMap.value.HawkEye()); // 顯示縮略圖
      // map.value.addControl(new AMap.value.Geolocation()); // 定位當前位置
      // map.value.addControl(new AMap.value.MapType()); // 實現(xiàn)默認圖層與衛(wèi)星圖,實時交通圖層之間切換

      // // 以下是鼠標工具插件
      // const mouseTool = new AMap.value.MouseTool(map.value);
      // mouseTool.rule();// 用戶手動繪制折線圖,測量距離
      // mouseTool.measureArea(); // 測量面積
  });
}

onMounted(()=>{
  initMap()
})

let mapClick = () => {
  // 單擊
  map.value.on('click',(e) => {
    current_position.value = [e.lnglat.lng,e.lnglat.lat];
    path.value.push([e.lnglat.lng,e.lnglat.lat]);
    addPolyLine();
  })
}

// 開始繪制
let handleStartDraw = () => {
  mapClick()
}
// 數(shù)據(jù)保存
let handleSave = () => {
  // console.log(polyLineList.value);
  if(polyLineList.value == null){
    return ElMessage({
      showClose: true,
      message: '請先點擊開始繪制進行路徑繪制',
      type: 'warning',
    })
  }
  for (let i = 0; i < polyLineList.value.length; i++) {
    let obj = [polyLineList.value[i].lng,polyLineList.value[i].lat]
    lineArr.value[i] = obj
  }
  AMap.value.plugin('AMap.MoveAnimation', () => {
      start.value = true
      marker.value = new AMap.value.Marker({
          map: map.value,
          // position: [116.478935,39.997761],
          icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png", // 可自定義圖標
          offset: new AMap.value.Pixel(-13, -26),
      });
      // 軌跡運動的線
      passedPolyline.value = new AMap.value.Polyline({
        map: map.value,
        strokeColor: "#AF5",  //線顏色
        strokeWeight: 10,      //線寬
      });
      // 點標記的運動
      marker.value.on('moving',  (e) => {
        // console.log("e",e);
        passedPolyline.value.setPath(e.passedPath);
        map.value.setCenter(e.target.getPosition(),true)
      });

      map.value.setFitView();
  });
}

// 開始動畫
let handleMove = () => {
  if(!start.value){
    ElMessage({
      showClose: true,
      message: '請先保存路徑',
      type: 'warning',
    })
    return
  }
  // JSAPI2.0 使用覆蓋物動畫必須先加載動畫插件
  marker.value.moveAlong(lineArr.value, {
    // 每一段的時長
    duration: speedIn,//可根據(jù)實際采集時間間隔設置
    // JSAPI2.0 是否延道路自動設置角度在 moveAlong 里設置
    autoRotation: true,
  });
}
// 暫停
let handlePause = () => {
  showStatus.value = true
  marker.value.pauseMove();
}
// 停止
let handleStop = () => {
  showStatus.value = false
  marker.value.stopMove();
}
// 繼續(xù)
let handleResume = () => {
  showStatus.value = false
  marker.value.resumeMove();
}
let addPolyLine = () => {
  // console.log("-=->",AMap.value);
  polyline.value = new AMap.value.Polyline({
    map: map.value,
    path: path.value,
    // isOutline: true,
    // outlineColor: "#ffeeff",
    borderWeight: 1,
    strokeColor: "#3366FF",
    // strokeOpacity: 1,
    // strokeWeight: 5,
    // // 折線樣式還支持 'dashed'
    // strokeStyle: "solid",
    // strokeStyle是dashed時有效
    // strokeDasharray: [10, 5],
    // lineJoin: "round",
    // lineCap: "round",
    // zIndex: 50,
  });
  polyLineList.value = polyline.value.getPath()
  map.value.add([polyline.value]);  
}

</script>

3、界面樣式

<style lang="scss" scoped>
.gaode-map{
  width: 100%;
  height: 100%;
  position: relative;
  #container{
    width: 100%;
    height: 100%;
  }
  .option-btn{
    position: absolute;
    top: 50px;
    right: 50px;
    // border: 1px solid blue;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    .el-button{
      display: flex;
      margin-left: 0px;
    }
  }
}
</style>

注意：使用高德地圖沒有key，或者未設置高德地圖容器的大小時，高德地圖不會顯示

高德地圖API：軌跡回放-點標記-示例中心-JS API 2.0 示例 | 高德地圖API (amap.com)（需要自己注冊獲取key）

軌跡繪制及播放使用高德地圖的API，若有不足之處時幫忙指正