|
@@ -37,6 +37,7 @@ import { deepClone, hexToRgba, initDrag } from '@/utils';
|
|
|
import { createBox } from 'ol/interaction/Draw';
|
|
|
import * as turf from '@turf/turf';
|
|
|
import { nanoid } from 'nanoid';
|
|
|
+import carImg from '@/assets/images/car.png';
|
|
|
|
|
|
const tk = 'a8df87f1695d224d2679aa805c1268d9';
|
|
|
const commonUrl = import.meta.env.VITE_APP_BASE_API2 + 'api/oneShare/proxyHandler/gd/';
|
|
@@ -86,6 +87,10 @@ export class olMap {
|
|
|
// 显示信息框
|
|
|
private infoWindow;
|
|
|
private select;
|
|
|
+ // 车辆轨迹
|
|
|
+ private carLayer;
|
|
|
+ private carFeature;
|
|
|
+ private traceFeature;
|
|
|
|
|
|
constructor(options) {
|
|
|
this.options = options;
|
|
@@ -927,6 +932,95 @@ export class olMap {
|
|
|
this.drawVector.getSource().addFeature(feature);
|
|
|
return feature;
|
|
|
}
|
|
|
+ trackPlayback(lineArr) {
|
|
|
+ if (!!this.carFeature) {
|
|
|
+ this.carLayer.getSource().removeFeature(this.carFeature);
|
|
|
+ }
|
|
|
+ if (!!this.traceFeature) {
|
|
|
+ this.carLayer.getSource().removeFeature(this.traceFeature);
|
|
|
+ }
|
|
|
+ const getAngle = (point1, point2) => {
|
|
|
+ let arc = 0;
|
|
|
+ if (point2 && point2.length && point1 && point1.length) {
|
|
|
+ if ((point2[0] - point1[0] >= 0 && point2[1] - point1[1] >= 0) || (point2[0] - point1[0] < 0 && point2[1] - point1[1] > 0)) {
|
|
|
+ arc = Math.atan((point2[0] - point1[0]) / (point2[1] - point1[1]));
|
|
|
+ } else if ((point2[0] - point1[0] > 0 && point2[1] - point1[1] < 0) || (point2[0] - point1[0] < 0 && point2[1] - point1[1] < 0)) {
|
|
|
+ arc = Math.PI + Math.atan((point2[0] - point1[0]) / (point2[1] - point1[1]));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return arc;
|
|
|
+ };
|
|
|
+ let lastTime = Date.now();
|
|
|
+ const source = new VectorSource();
|
|
|
+ let distance = 0;
|
|
|
+ const angle = getAngle(lineArr[0], lineArr[1]);
|
|
|
+ const speed = 500;
|
|
|
+ let animationFlag = false;
|
|
|
+ this.carFeature = new Feature({
|
|
|
+ geometry: new Point(lineArr[0])
|
|
|
+ });
|
|
|
+ const icon = new Icon({
|
|
|
+ crossOrigin: 'anonymous',
|
|
|
+ src: carImg,
|
|
|
+ width: 26,
|
|
|
+ height: 52,
|
|
|
+ rotation: angle
|
|
|
+ });
|
|
|
+ this.carFeature.setStyle(
|
|
|
+ new Style({
|
|
|
+ image: icon
|
|
|
+ })
|
|
|
+ );
|
|
|
+ this.traceFeature = new Feature({
|
|
|
+ geometry: new LineString(lineArr)
|
|
|
+ });
|
|
|
+ let route = new LineString(lineArr);
|
|
|
+ this.carLayer = new VectorLayer({
|
|
|
+ source: source,
|
|
|
+ style: new Style({
|
|
|
+ stroke: new Stroke({
|
|
|
+ color: 'rgb(37,232,142)',
|
|
|
+ width: 5
|
|
|
+ })
|
|
|
+ })
|
|
|
+ });
|
|
|
+ this.carLayer.getSource().addFeatures([this.carFeature, this.traceFeature]);
|
|
|
+ const move = (e) => {
|
|
|
+ const time = e.frameState.time;
|
|
|
+ // 时间戳差(毫秒)
|
|
|
+ const elapsedTime = time - lastTime;
|
|
|
+ // 距离(其实是比例的概念)
|
|
|
+ distance = distance + (speed * elapsedTime) / 1e6;
|
|
|
+ if (distance >= 1) {
|
|
|
+ distance = 0;
|
|
|
+ animationFlag = false;
|
|
|
+ stopAnimation();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 保存当前时间
|
|
|
+ lastTime = time;
|
|
|
+ // 上次坐标
|
|
|
+ const lastCoord = this.carFeature.getGeometry().getCoordinates();
|
|
|
+ // 获取新位置的坐标点
|
|
|
+ const curCoord = route.getCoordinateAt(distance);
|
|
|
+ // 设置新坐标
|
|
|
+ this.carFeature.getGeometry().setCoordinates(curCoord);
|
|
|
+ this.map.getView().setCenter(curCoord);
|
|
|
+ // 设置角度
|
|
|
+ this.carFeature.getStyle().getImage().setRotation(getAngle(lastCoord, curCoord));
|
|
|
+ // 调用地图渲染
|
|
|
+ this.map.render();
|
|
|
+ };
|
|
|
+
|
|
|
+ const stopAnimation = () => {
|
|
|
+ this.carLayer.un('postrender', move);
|
|
|
+ };
|
|
|
+ this.map.addLayer(this.carLayer);
|
|
|
+ this.carLayer.on('postrender', move);
|
|
|
+ // 触发地图渲染
|
|
|
+ const geo = this.carFeature.getGeometry().clone();
|
|
|
+ this.carFeature.setGeometry(geo);
|
|
|
+ }
|
|
|
getVectorLayer() {
|
|
|
return this.vectorLayer;
|
|
|
}
|