<template>
<div style="position: relative">
<div style="position: absolute; right: 10px; top: 10px; z-index: 1">
<el-button @click="silderInput">開始回放</el-button>
<el-button @click="pauseAnimation">暫停回放</el-button>
<el-button @click="resumeAnimation">繼續回放</el-button>
<el-slider v-model="sliderVal" :step="1" @input="sliderChange" @change="silderInput" :max="lineArr.length - 1"
:min="0"></el-slider>
</div>
<div style="position: absolute; left: 50px; bottom: 30px;z-index: 1; width: 95%; height: 20px; "></div>
<div id="amapcontainer" style="width: 100%; height: 880px"></div>
</div>
</template>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
securityJsCode: "金鑰",
};
data() {
return {
map: null, // 高德地圖例項
int: null,
lineArr: [
[108.478935, 34.997761],
[108.478934, 34.997825],
[108.478912, 34.998549],
[108.478914, 34.998551],
[108.478914, 34.998551],
[108.478998, 34.998555],
[108.479282, 34.99856],
[108.479658, 34.998528],
[108.480151, 34.998453],
[108.480784, 34.998302],
[108.480788, 34.998305],
[108.481149, 34.998184],
[108.481573, 34.997997],
[108.481863, 34.997846],
[108.482072, 34.997718],
[108.482072, 34.997718],
[108.482072, 34.997718],
[108.482362, 34.997718],
[108.483633, 34.998935],
[108.48367, 34.998968],
[108.484648, 34.999861],
], // 軌跡
marker: null,
polyline: null,
percentage: 50, // 進度條進度
sliderVal: 0,
progressTime: 0,
markerSpeed: 100, // 初始化速度
afterData: [],//後面的資料
};
},
mounted() {
// 軌跡經緯度去重，否定有問題;
const uniqueCoordinates = this.lineArr.filter((item, index, self) => {
return self.findIndex(t => t[0] === item[0] && t[1] === item[1]) === index;
});
this.lineArr = uniqueCoordinates;
// end
//DOM初始化完成進行地圖初始化
this.initAMap();
},
methods: {
// 地圖初始化
initAMap() {
AMapLoader.load({
key: "", // 申請好的Web端開發者Key，首次呼叫 load 時必填
version: "2.0", // 指定要載入的 JSAPI 的版本，預設時預設為 1.4.15
plugins: [
"AMap.Scale",
"AMap.ToolBar",
"AMap.ControlBar",
"AMap.Geocoder",
"AMap.Marker",
"AMap.CitySearch",
"AMap.Geolocation",
"AMap.AutoComplete",
"AMap.InfoWindow",
"AMap.moveAnimation"
], // 需要使用的的外掛列表，如比例尺'AMap.Scale'等
}).then((AMap) => {
// 獲取到作為地圖容器的DOM元素，建立地圖例項
this.map = new AMap.Map("amapcontainer", {
//設定地圖容器id
resizeEnable: true,
viewMode: "3D", // 使用3D檢視
zoomEnable: true, // 地圖是否可縮放，預設值為true
dragEnable: true, // 地圖是否可透過滑鼠拖拽平移，預設為true
doubleClickZoom: true, // 地圖是否可透過雙擊滑鼠放大地圖，預設為true
zoom: 17, //初始化地圖級別
center: [108.347428, 34.90923], // 初始化中心點座標 北京
// mapStyle: "amap://styles/darkblue", // 設定顏色底層
});
this.marker = new AMap.Marker({
position: [108.478935, 34.997761],
icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
offset: new AMap.Pixel(-13, -26),
});
this.map.add(this.marker);
// 所有路線軌跡(初始軌跡);
this.polyline = new AMap.Polyline({
path: this.lineArr,
showDir: true,
strokeColor: "#f90", //線顏色
// strokeOpacity: 1, //線透明度
strokeWeight: 6, //線寬
// strokeStyle: "solid" //線樣式
});
this.map.add(this.polyline);
// 走過的路徑
this.passedPolyline = new AMap.Polyline({
strokeColor: "#AF5", //線顏色
strokeWeight: 6, //線寬
});
this.map.add(this.passedPolyline);
this.map.setFitView(); // 根據覆蓋物自適應展示地圖
})
.catch((e) => {
console.log(e);
});
},
// 鬆開手觸發
silderInput() {
let array = [];
if (this.afterData.length === 0) {
array = this.lineArr;
} else {
array = this.afterData
}
var that = this;
AMap.plugin("AMap.MoveAnimation", () => {
that.progressTime = that.formatSeconds(0);
that.markerSpeed = that.markerSpeed * that.speedCount;//markerSpeed的值是100;
this.marker.moveAlong(array, {
duration: 200, //可根據實際採集時間間隔設定速度
// JSAPI2.0 是否延道路自動設定角度在 moveAlong 裡設定
autoRotation: true,
});
this.marker.on("moving", (e) => {
// lat:34.998553
// lng:108.478947
let lngs = e.passedPath[e.passedPath.length - 1].lng; // 經度 當前所在的位置資訊;
let lats = e.passedPath[e.passedPath.length - 1].lat; // 緯度
let info = [];
info.push('<div style="margin-top: -10px;">');
info.push("經度 :" + lngs);
info.push("緯度 :" + lats);
let infoWindow = new AMap.InfoWindow({
content: info.join("<br/>"),
offset: new AMap.Pixel(3, -20),
});
infoWindow.open(this.map, e.target.getPosition());
var index = this.lineArr.findIndex(([lng, lat]) => lng === lngs && lat === lats);
if (index > 0) {
this.sliderVal = index;
}
});
});
},
sliderChange(val) {
let beforeData = this.lineArr.slice(0, val + 1);//包含val;
this.afterData = this.lineArr.slice(val + 1);//不包含val;因為不包含所以不能設定setPostion;
let info = [];
info.push('<div style="margin-top: -10px;">');
info.push("經度 :" + this.lineArr[val][0]);
info.push("緯度 :" + this.lineArr[val][1]);
let infoWindow = new AMap.InfoWindow({
content: info.join("<br/>"),
offset: new AMap.Pixel(3, -20),
});
infoWindow.open(this.map, new AMap.LngLat(this.lineArr[val][0], this.lineArr[val][1]));
if (val > 0) {//解決車閃爍問題;
this.marker.setPosition(new AMap.LngLat(this.lineArr[val][0], this.lineArr[val][1]));
}
if (beforeData.length > 0) {
this.passedPolyline.setPath(beforeData);//設定走過的路徑;
}
},
monitorInterval() {
this.int = setInterval(() => {
this.sliderVal += 1 * this.speedCount;
}, (TIME_VARIABLE / 100) * 100);
},
// 暫停回放
pauseAnimation() {
clearInterval(this.int);
this.marker.pauseMove();
},
// 繼續回放
resumeAnimation() {
this.marker.resumeMove();
},
formatSeconds(value) {
var secondTime = parseInt(value); // 秒
var minuteTime = 0; // 分
var hourTime = 0; // 小時
if (secondTime > 60) {
minuteTime = parseInt(secondTime / 60);
secondTime = parseInt(secondTime % 60);
if (minuteTime > 60) {
hourTime = parseInt(minuteTime / 60);
minuteTime = parseInt(minuteTime % 60);
}
}
var result =
parseInt(secondTime) < 10
? "0" + parseInt(secondTime)
: "" + parseInt(secondTime);
result =
parseInt(minuteTime) < 10
? "0" + parseInt(minuteTime) + ":" + result
: "" + parseInt(minuteTime) + ":" + result;
return result;
},
},
效果圖：
