快捷導(dǎo)航

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

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

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

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

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

2、引入高德地圖，軌跡繪制及播放方法實(shí)現(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: '', // 申請(qǐng)的高德Key相對(duì)應(yīng)的密鑰
  // }
  AMap.value = await AMapLoader.load({
    key:"", // 申請(qǐng)好的Web端開(kāi)發(fā)者Key，首次調(diào)用 load 時(shí)必填
    version:"2.0", // 指定要加載的 JSAPI 的版本，缺省時(shí)默認(rèn)為 1.4.15
    // plugins:[''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
  map.value = new AMap.value.Map("container",{  // 設(shè)置地圖容器id
    viewMode:"3D",    // 是否為3D地圖模式
    zoom:13,           // 初始化地圖級(jí)別
    // center:[113.808299,34.791787], // 初始化地圖中心點(diǎn)位置，不設(shè)置的時(shí)候默認(rèn)展示當(dāng)前位置
  });
  // 添加插件
  AMap.value.plugin(["AMap.ToolBar", "AMap.Scale","AMap.MoveAnimation", "AMap.HawkEye","AMap.Geolocation","AMap.MapType","AMap.MouseTool"],  () => {
      //異步同時(shí)加載多個(gè)插件
      // 添加地圖插件
      // map.value.addControl(new AMap.value.ToolBar()); // 工具條控件;范圍選擇控件
      // map.value.addControl(new AMap.value.Scale()); // 顯示當(dāng)前地圖中心的比例尺
      // map.value.addControl(new AMap.value.HawkEye()); // 顯示縮略圖
      // map.value.addControl(new AMap.value.Geolocation()); // 定位當(dāng)前位置
      // map.value.addControl(new AMap.value.MapType()); // 實(shí)現(xiàn)默認(rèn)圖層與衛(wèi)星圖,實(shí)時(shí)交通圖層之間切換

      // // 以下是鼠標(biāo)工具插件
      // const mouseTool = new AMap.value.MouseTool(map.value);
      // mouseTool.rule();// 用戶(hù)手動(dòng)繪制折線(xiàn)圖,測(cè)量距離
      // mouseTool.measureArea(); // 測(cè)量面積
  });
}

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();
  })
}

// 開(kāi)始繪制
let handleStartDraw = () => {
  mapClick()
}
// 數(shù)據(jù)保存
let handleSave = () => {
  // console.log(polyLineList.value);
  if(polyLineList.value == null){
    return ElMessage({
      showClose: true,
      message: '請(qǐng)先點(diǎn)擊開(kāi)始繪制進(jìn)行路徑繪制',
      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", // 可自定義圖標(biāo)
          offset: new AMap.value.Pixel(-13, -26),
      });
      // 軌跡運(yùn)動(dòng)的線(xiàn)
      passedPolyline.value = new AMap.value.Polyline({
        map: map.value,
        strokeColor: "#AF5",  //線(xiàn)顏色
        strokeWeight: 10,      //線(xiàn)寬
      });
      // 點(diǎn)標(biāo)記的運(yùn)動(dòng)
      marker.value.on('moving',  (e) => {
        // console.log("e",e);
        passedPolyline.value.setPath(e.passedPath);
        map.value.setCenter(e.target.getPosition(),true)
      });

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

// 開(kāi)始動(dòng)畫(huà)
let handleMove = () => {
  if(!start.value){
    ElMessage({
      showClose: true,
      message: '請(qǐng)先保存路徑',
      type: 'warning',
    })
    return
  }
  // JSAPI2.0 使用覆蓋物動(dòng)畫(huà)必須先加載動(dòng)畫(huà)插件
  marker.value.moveAlong(lineArr.value, {
    // 每一段的時(shí)長(zhǎng)
    duration: speedIn,//可根據(jù)實(shí)際采集時(shí)間間隔設(shè)置
    // JSAPI2.0 是否延道路自動(dòng)設(shè)置角度在 moveAlong 里設(shè)置
    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,
    // // 折線(xiàn)樣式還支持 'dashed'
    // strokeStyle: "solid",
    // strokeStyle是dashed時(shí)有效
    // 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>

注意：使用高德地圖沒(méi)有key，或者未設(shè)置高德地圖容器的大小時(shí)，高德地圖不會(huì)顯示

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

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