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">继续动画</el-button>
<el-button @click="handleStop" v-if="start">停止动画</el-button>
</div>
</div>
2、引入高德地图,轨迹绘制及播放方法实现
<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端开发者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()); // 实现默认图层与卫星图,实时交通图层之间切换
// // 以下是鼠标工具插件
// 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()
}
// 数据保存
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,//可根据实际采集时间间隔设置
// JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
autoRotation: true,
});
}
// 暂停
let handlePause = () => {
showStatus.value = true
marker.value.pauseMove();
}
// 停止
let handleStop = () => {
showStatus.value = false
marker.value.stopMove();
}
// 继续
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,若有不足之处时帮忙指正,谢谢