|
|
@@ -0,0 +1,230 @@
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ lineArr: [],
|
|
|
+ // 巡航轨迹
|
|
|
+ AMap: null,
|
|
|
+ map: null,
|
|
|
+ PathSimplifier: null,
|
|
|
+ beforeInit: true,
|
|
|
+ isPlay: true,
|
|
|
+ sliderVal: 0, // 进度条
|
|
|
+ times: 1, // 倍速
|
|
|
+ maxSpeed: 40, // 最高倍速
|
|
|
+ navgtrSpeed: 1000, // 速度
|
|
|
+ isMinSpeed: true,
|
|
|
+ isMaxSpeed: false,
|
|
|
+ navgtr: null,
|
|
|
+ pathSimplifierIns: null,
|
|
|
+ actualList: [],
|
|
|
+ defaultRenderOptions: {
|
|
|
+ renderAllPointsIfNumberBelow: -1, // 描绘路径点，如不需要设为-1
|
|
|
+ pathTolerance: 2,
|
|
|
+ keyPointTolerance: 0,
|
|
|
+ pathLineStyle: {
|
|
|
+ lineWidth: 6,
|
|
|
+ strokeStyle: '#409eff',
|
|
|
+ borderWidth: 1,
|
|
|
+ borderStyle: '#eeeeee',
|
|
|
+ dirArrowStyle: false
|
|
|
+ },
|
|
|
+ pathLineHoverStyle: {
|
|
|
+ lineWidth: 6,
|
|
|
+ strokeStyle: '#ff0000',
|
|
|
+ borderWidth: 1,
|
|
|
+ borderStyle: '#cccccc',
|
|
|
+ dirArrowStyle: false
|
|
|
+ },
|
|
|
+ dirArrowStyle: {
|
|
|
+ stepSpace: 30,
|
|
|
+ strokeStyle: '#ffffff',
|
|
|
+ lineWidth: 2
|
|
|
+ },
|
|
|
+ pathLineSelectedStyle: {
|
|
|
+ lineWidth: 6,
|
|
|
+ strokeStyle: '#409eff',
|
|
|
+ borderWidth: 1,
|
|
|
+ borderStyle: '#cccccc',
|
|
|
+ dirArrowStyle: true
|
|
|
+ },
|
|
|
+ keyPointStyle: {
|
|
|
+ radius: 0,
|
|
|
+ fillStyle: 'rgba(8, 126, 196, 1)',
|
|
|
+ lineWidth: 1,
|
|
|
+ strokeStyle: '#eeeeee'
|
|
|
+ },
|
|
|
+ keyPointHoverStyle: {
|
|
|
+ radius: 0,
|
|
|
+ fillStyle: 'rgba(0, 0, 0, 0)',
|
|
|
+ lineWidth: 2,
|
|
|
+ strokeStyle: '#ffa500'
|
|
|
+ },
|
|
|
+ keyPointOnSelectedPathLineStyle: {
|
|
|
+ radius: 0,
|
|
|
+ fillStyle: 'rgba(8, 126, 196, 1)',
|
|
|
+ lineWidth: 2,
|
|
|
+ strokeStyle: '#eeeeee'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ isCursorAtPathEnd: false,
|
|
|
+ palyStayus: 0, //0->未开始 1->行驶中 2->暂停
|
|
|
+ value: 0, // 进度条初始化
|
|
|
+
|
|
|
+ // signMarker: null,
|
|
|
+ currentPoint: null,
|
|
|
+
|
|
|
+ timeValue: '',
|
|
|
+ trackData: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initLineArr() {
|
|
|
+ let _this = this;
|
|
|
+ let that = this;
|
|
|
+
|
|
|
+ AMapUI.load(['ui/misc/PathSimplifier'], PathSimplifier => {
|
|
|
+ if (!PathSimplifier.supportCanvas) {
|
|
|
+ alert('当前环境不支持 Canvas！');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 如果已存在巡航轨迹，则删除
|
|
|
+ if (window.pathSimplifierIns && that.pathSimplifierIns) {
|
|
|
+ //通过该方法清空上次传入的轨迹
|
|
|
+ that.pathSimplifierIns.setData([]);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 初始化坐标点
|
|
|
+ if (_this.lineArr.length > 0) {
|
|
|
+ that.actualList = _this.lineArr;
|
|
|
+
|
|
|
+ //创建一个巡航轨迹路线
|
|
|
+ that.pathSimplifierIns = new PathSimplifier({
|
|
|
+ zIndex: 100, //地图层级，
|
|
|
+ map: this.map, //所属的地图实例
|
|
|
+ //巡航路线轨迹列表
|
|
|
+ getPath: (pathData, pathIndex) => {
|
|
|
+ return pathData.path;
|
|
|
+ },
|
|
|
+ //hover每一个轨迹点，展示内容
|
|
|
+ getHoverTitle: function (pathData, pathIndex, pointIndex) {
|
|
|
+ return '';
|
|
|
+ },
|
|
|
+ //自定义样式，可设置巡航器样式，巡航轨迹样式，巡航轨迹点击、hover等不同状态下的样式，不设置则用默认样式，详情请参考api文档 renderOptions:{}
|
|
|
+ //绘制路线节点
|
|
|
+ renderOptions: that.defaultRenderOptions
|
|
|
+ });
|
|
|
+ window.pathSimplifierIns = that.pathSimplifierIns;
|
|
|
+ //设置数据
|
|
|
+ that.pathSimplifierIns.setData([
|
|
|
+ {
|
|
|
+ name: '轨迹路线',
|
|
|
+ path: that.actualList
|
|
|
+ }
|
|
|
+ ]);
|
|
|
+ that.pathSimplifierIns.setSelectedPathIndex(0);
|
|
|
+
|
|
|
+ function onload() {
|
|
|
+ that.pathSimplifierIns.renderLater();
|
|
|
+ }
|
|
|
+
|
|
|
+ function onerror(e) {
|
|
|
+ console.log('图片加载失败！');
|
|
|
+ }
|
|
|
+
|
|
|
+ //对第一条线路（即索引 0）创建一个巡航器
|
|
|
+ let image = PathSimplifier.Render.Canvas.getImageContent('https://webapi.amap.com/images/car.png', onload, onerror);
|
|
|
+ that.navgtr = that.pathSimplifierIns.createPathNavigator(0, {
|
|
|
+ loop: false, //循环播放
|
|
|
+ speed: that.navgtrSpeed, //巡航速度，单位千米/小时
|
|
|
+ pathNavigatorStyle: {
|
|
|
+ width: 20,
|
|
|
+ height: 30,
|
|
|
+ //使用图片
|
|
|
+ content: image, // 自定义巡航样式
|
|
|
+ strokeStyle: null,
|
|
|
+ fillStyle: null,
|
|
|
+ //经过路径的样式
|
|
|
+ pathLinePassedStyle: {
|
|
|
+ lineWidth: 6,
|
|
|
+ strokeStyle: '#69f81e',
|
|
|
+ dirArrowStyle: {
|
|
|
+ stepSpace: 15,
|
|
|
+ strokeStyle: '#FFF'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ that.navgtr.on('start resume', function () {
|
|
|
+ that.navgtr._startTime = Date.now();
|
|
|
+ that.navgtr._startDist = this.getMovedDistance();
|
|
|
+ });
|
|
|
+ that.navgtr.on('stop pause', function () {
|
|
|
+ that.navgtr._movedTime = Date.now() - that.navgtr._startTime;
|
|
|
+ that.navgtr._movedDist = this.getMovedDistance() - that.navgtr._startDist;
|
|
|
+ });
|
|
|
+ that.navgtr.on('move', function (data, position) {
|
|
|
+ that.isCursorAtPathEnd = false;
|
|
|
+ let idx = position.dataItem.pointIndex; //走到了第几个点
|
|
|
+ let tail = position.tail; //至下一个节点的比例位置
|
|
|
+ let totalIdx = idx + tail;
|
|
|
+ let len = position.dataItem.pathData.path.length - 1;
|
|
|
+ // 设置当前点位
|
|
|
+ that.currentPoint = that.actualList[idx];
|
|
|
+ if (idx < len - 1) {
|
|
|
+ that.navgtr.setSpeed(that.navgtrSpeed * that.times);
|
|
|
+ }
|
|
|
+ // 进度条实时展示tail
|
|
|
+ !that.isOnSlider && (that.sliderVal = (totalIdx / len) * 100);
|
|
|
+
|
|
|
+ // 如果到头了，回到初始状态
|
|
|
+ if (that.navgtr.isCursorAtPathEnd()) {
|
|
|
+ that.isCursorAtPathEnd = true;
|
|
|
+ that.initPlayBox();
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 加载完成
|
|
|
+ that.beforeInit = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ initPlayBox() {
|
|
|
+ // 暂停
|
|
|
+ this.navgControl('pause');
|
|
|
+ this.playIcon = 'start';
|
|
|
+ this.isPlay = true; // 播放图标
|
|
|
+ this.palyStayus = 0; // 继续状态
|
|
|
+ },
|
|
|
+ // 控制播放按钮
|
|
|
+ navgControl(type) {
|
|
|
+ if (!this.navgtr || !type) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (type === 'start' || type === 'resume') {
|
|
|
+ this.isPlay = false;
|
|
|
+ this.palyStayus = 2;
|
|
|
+ // 如果已经到了终点，重新定位坐标
|
|
|
+ if (this.isCursorAtPathEnd && this.actualList.length > 0) {
|
|
|
+ this.map.setCenter(this.actualList[0]);
|
|
|
+
|
|
|
+ }
|
|
|
+ } else if (type === 'pause') {
|
|
|
+ this.isPlay = true;
|
|
|
+ this.palyStayus = 1;
|
|
|
+ }
|
|
|
+ this.navgtr[type]();
|
|
|
+ this.map.setFitView();
|
|
|
+ },
|
|
|
+ // carReLocate() {
|
|
|
+ // // 鼠标从滑动条抬起时，重新定位
|
|
|
+ // if (this.currentPoint) {
|
|
|
+ // let timeout = setTimeout(() => {
|
|
|
+ // clearTimeout(timeout)
|
|
|
+ // this.map.setCenter(this.currentPoint)
|
|
|
+ // }, 0)
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ }
|
|
|
+};
|
Shannon_mu