ry-vue-map 0.4.7 → 0.4.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ry-vue-map",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "private": false,
   "main": "lib/ryui.umd.min.js",
   "description": "ry公共组件库",

package/src/components/maps/ryLines/src/index.vue

@@ -7,7 +7,7 @@
 					<button class="button-stop" @click.stop="onStopTrajectory()" v-else></button>
 				</el-col>
 				<el-col style="margin-left: 30px;" :xs="13" :sm="19" :md="19" :lg="19" :xl="23">
-					<el-slider v-model="index" :marks="marks" show-tooltip :step="1" :min="0" :max="cacheArr.length"
+					<el-slider v-model="index" :marks="marks" show-tooltip :step="1" :min="0" :max="cacheArr.length - 1"
 						@change="sliderChange" :format-tooltip="formatTooltip"></el-slider>
 				</el-col>
 			</el-row>
@@ -15,7 +15,7 @@
 				<el-col>
 					<section class="control-panel">
 						<span>播放倍速：</span>
-		                <span :class="{ active: selectActive[0] }" @click.stop="onPlaySpeed(0, 200)">0.5x</span>
+						<span :class="{ active: selectActive[0] }" @click.stop="onPlaySpeed(0, 200)">0.5x</span>
 						<span :class="{ active: selectActive[1] }" @click.stop="onPlaySpeed(1, 100)">正常</span>
 						<span :class="{ active: selectActive[2] }" @click.stop="onPlaySpeed(2, 50)">1.5x</span>
 						<span :class="{ active: selectActive[3] }" @click.stop="onPlaySpeed(3, 5)">2.0x</span>
@@ -72,10 +72,10 @@
 				intervalId: null,
 				selectActive: [false, true, false, false],
 				marks: {
-					
+
 				},
 				marks2: {
-					
+
 				},
 				// 轨迹回放
 				isPlayback: false,
@@ -105,20 +105,21 @@
 			},
 			lineAppend(val) {
 				if (val.length > 0 && this.map) {
+					console.log('lineAppend==============');
 					this.appendCoordinate(val);
 					this.setMarkerPoint(this.endMarker, val);
 				}
 			},
-			isShowPlayback(val){
-				if(!val){
-                  this.endPlaybackLines();
-				  this.index=0;
-				  this.resetPyalPanel();
-				  return;
+			isShowPlayback(val) {
+				if (!val) {
+					this.endPlaybackLines();
+					this.index = 0;
+					this.resetPyalPanel();
+					return;
 				}
 				delete this.marks2[this.len];
-				this.marks=this.marks2;
-            
+				this.marks = this.marks2;
+
 			}
 			// isPlayback(val){
 			// 	if(val){
@@ -161,34 +162,37 @@
 						playbackColor,
 						pointArr
 					} = model;
-					if(!pointArr) return;
+					if (!pointArr) return;
 					const len = pointArr.length;
 					if (!pointArr.length) return;
 					this.len += len;
 					this.cacheArr.push(...model.pointArr);
-					this.cacheColors.set(this.len,playbackColor);
+					this.cacheColors.set(this.len, playbackColor);
 					this.cacheLenArr.push(len);
-	                this.marks2[this.len]='';
+					this.marks2[this.len] = '';
 					this.cacheScales.push(this.len);
-		            this.cacheModelArr.set(this.len,model);
+					this.cacheModelArr.set(this.len, model);
 				}
 			},
 			_insertLineAndMarker(val) {
 				const arr = val.pointArr;
 				if (this.isLineFit) {
-				
+
 					this.calculateLineBBOX(arr);
 				}
 				this.initMarker(arr[0]);
 				if (!val.isAppend) {
 
-					this._insertPoint(val,[this.lastLineX,this.lastLineY]);
+					this._insertPoint(val, [this.lastLineX, this.lastLineY]);
 					const line = this.createPolyline(val);
 					const len = arr.length - 1;
 					this.setMarkerPoint(this.endMarker, arr[len]);
-				 	const  {x,y} = this.restLastData(arr);
-					this.lastLineX=x;
-					this.lastLineY=y;
+					const {
+						x,
+						y
+					} = this.restLastData(arr);
+					this.lastLineX = x;
+					this.lastLineY = y;
 					this.pineArr.push(line);
 					return;
 				}
@@ -200,14 +204,17 @@
 				this.restLastData(arr);
 			},
 			_insertLineAndMarker2(val) {
-				    this._insertPoint(val,[this.lastLineX2,this.lastLineY2]);
-			    	const arr = val.pointArr;
-					const line = this.createPolyline(val);
-			   		const  {x,y} = this.restLastData(arr);
-				    this.lastLineX2=x;
-					this.lastLineY2=y;
-					this.cacheLines.push(line);
-					return;
+				this._insertPoint(val, [this.lastLineX2, this.lastLineY2]);
+				const arr = val.pointArr;
+				const line = this.createPolyline(val);
+				const {
+					x,
+					y
+				} = this.restLastData(arr);
+				this.lastLineX2 = x;
+				this.lastLineY2 = y;
+				this.cacheLines.push(line);
+				return;
 			},
 			async calculateLineBBOX(arr) {
 				return await new Promise(r => {
@@ -218,13 +225,13 @@
 						});
 					});
 
-					let amGpsArr =[];
-					if(this.gpsType){
+					let amGpsArr = [];
+					if (this.gpsType) {
 						amGpsArr = this.am.getLngLatGCJ02();
-					}else{
-						amGpsArr =this.am.getLngLats();
+					} else {
+						amGpsArr = this.am.getLngLats();
 					}
-						
+
 					fitNew(this.map, [
 						[amGpsArr[0], amGpsArr[1]],
 						[amGpsArr[2], amGpsArr[3]]
@@ -247,11 +254,14 @@
 			restLastData(arr) {
 				if (arr.length > 0) {
 					const [x, y] = arr[arr.length - 1];
-					return {x,y};
+					return {
+						x,
+						y
+					};
 				}
 			},
-			_insertPoint(val,points) {
-				const [x,y]=points;
+			_insertPoint(val, points) {
+				const [x, y] = points;
 				if (x > 0 && y > 0 && val) {
 					val.pointArr.unshift(points);
 				}
@@ -327,8 +337,8 @@
 				this.lastLineY = 0;
 				this.am = null;
 				this.am = new AM();
-				this.marks={};
-				this.marks2={};
+				this.marks = {};
+				this.marks2 = {};
 				this._clearInterval();
 				this.clearCacheLines();
 			},
@@ -339,14 +349,14 @@
 			},
 			clearCacheLines() {
 				this.endPlaybackLines();
-				this.cacheLenArr=[];
+				this.cacheLenArr = [];
 				this.cacheArr = [];
 				this.cacheColors.clear();
 				this.cacheModelArr.clear();
 				this.len = 0;
-				this.cacheScales=[];
-				this.index=0;
-	
+				this.cacheScales = [];
+				this.index = 0;
+
 			},
 			endPlaybackLines() {
 				this._clearInterval();
@@ -363,8 +373,8 @@
 				this.moveMarker = null;
 				// this.index = 0;
 				// this.lastColor = null;
-				this.lastLineX2=0;
-				this.lastLineY2=0;
+				this.lastLineX2 = 0;
+				this.lastLineY2 = 0;
 			},
 			stopPlaybackLines(val) {
 				this.isPlayback = false;
@@ -375,7 +385,7 @@
 				}
 				this.trackPlayback();
 			},
-			createTrackLineAndMarker(index = 0,index2=0) {
+			createTrackLineAndMarker(index = 0, index2 = 0) {
 				const key = index;
 				const {
 					playbackColor,
@@ -384,7 +394,7 @@
 				} = this.cacheModelArr.get(key);
 
 				const line = this.createPolyline({
-					color:playbackColor,
+					color: playbackColor,
 					isAppend: false,
 					width,
 					pointArr: [],
@@ -398,38 +408,56 @@
 			},
 			trackPlayback() {
 				if (!this.cacheLines.length) {
-					this.createTrackLineAndMarker(this.cacheScales[0],0);
+					this.createTrackLineAndMarker(this.cacheScales[0], 0);
 				}
 				this.intervalId = setInterval(r => {
-					
+
 					if (this.index >= this.len - 1 || !this.isPlayback) {
+
+						const line = this.cacheLines[this.cacheLines.length - 1];
+						const points = this.cacheArr[this.index];
+						this.setMarkerPoint(this.moveMarker, points);
+						line.appendCoordinate(points, this.gpsType);
+						this.$emit('trackPlayEvent', {
+							index: this.index,
+							points
+						});
+
 						this._clearInterval();
-						this.index=0;
+						this.index = 0;
 						this.isStop = false;
-						this.$emit('trackPlayEvent',{index:this.index,points:this.cacheArr[0] });
+						this.$emit('trackPlayEvent', {
+							index: this.index,
+							points: this.cacheArr[0]
+						});
 						return;
-					}   
-					const key=this.getKey(this.index);
+					}
+					const key = this.getKey(this.index);
 					if (this.cacheColors.has(key) && !this.cacheLineMaps.has(key)) {
 						if (!this.cacheLineMaps.has(key)) {
-								this.createTrackLineAndMarker(key,this.index);
-								const line = this.cacheLines[this.cacheLines.length - 1];
-								this.cacheLineMaps.set(key,line);
-								const _index=this.index - 1 == -1 ? 0 : this.index-1;
-								line.appendCoordinate(this.cacheArr[_index], this.gpsType);
-								// this.$emit('trackPlayEvent',{index:this.index, points:this.cacheArr[_index] });
+							this.createTrackLineAndMarker(key, this.index);
+							const line = this.cacheLines[this.cacheLines.length - 1];
+							this.cacheLineMaps.set(key, line);
+							const _index = this.index - 1 == -1 ? 0 : this.index - 1;
+							line.appendCoordinate(this.cacheArr[_index], this.gpsType);
+							// this.$emit('trackPlayEvent',{index:this.index, points:this.cacheArr[_index] });
 						}
 					}
 					const line = this.cacheLines[this.cacheLines.length - 1];
 					const points = this.cacheArr[this.index];
 					this.setMarkerPoint(this.moveMarker, points);
 					line.appendCoordinate(points, this.gpsType);
-					this.$emit('trackPlayEvent',{index:this.index,points});
+					this.$emit('trackPlayEvent', {
+						index: this.index,
+						points
+					});
 					this.index += 1;
 				}, this.playSpeed);
 			},
 			appendCoordinate(coordinate = []) {
+					console.log('appendCoordinat===', coordinate.length, coordinate,'gpstype===',this.gpsType);
 				if (!coordinate.length) return;
+	
 				if (!this.pineArr.length) {
 					this._insertLineAndMarker({
 						...this.lineDto,
@@ -438,96 +466,107 @@
 					});
 				};
 				const line = this.pineArr[this.pineArr.length - 1];
+				console.log(line);
 				line.appendCoordinate(coordinate, this.gpsType);
 			},
 			formatTooltip(val) {
 				return val / 100;
 			},
-            getKeys(val){
-			  
-				const arr =[];       
-                for(let i=0;i< this.cacheScales.length;i++)
-				{
-                    if(val >= this.cacheScales[i]){
-                      arr.push(this.cacheScales[i]);
-					  continue;
+			getKeys(val) {
+
+				const arr = [];
+				for (let i = 0; i < this.cacheScales.length; i++) {
+					if (val >= this.cacheScales[i]) {
+						arr.push(this.cacheScales[i]);
+						continue;
 					}
 					arr.push(this.cacheScales[i]);
-					break ;
+					break;
 				}
 
 				return arr;
 			},
-			getKey(val){
-	
-                for(let i=0;i< this.cacheScales.length;i++)
-				{
-					const key=this.cacheScales[i];
-					if(val <= key){
-                      return key;
+			getKey(val) {
+
+				for (let i = 0; i < this.cacheScales.length; i++) {
+					const key = this.cacheScales[i];
+					if (val <= key) {
+						return key;
 					}
 				}
 				return 0;
 			},
-			createLineModels(keys,points,step){
-				const arr =[];
-				const _points=[...points];
-				if(keys.length <=1 ){
-					const key=keys[0];
-					const {width,zIndex}=this.cacheModelArr.get(key);
-				    arr.push({
-					isAppend:false,
-					color:this.cacheColors.get(key),
-					width,
-					zIndex,
-				    pointArr:_points.splice(0,step)
-				  });
+			createLineModels(keys, points, step) {
+				const arr = [];
+				const _points = [...points];
+				if (keys.length <= 1) {
+
+					const key = keys[0];
+					const {
+						width,
+						zIndex
+					} = this.cacheModelArr.get(key);
+					arr.push({
+						isAppend: false,
+						color: this.cacheColors.get(key),
+						width,
+						zIndex,
+						pointArr: _points.splice(0, step + 1)
+					});
 					return arr;
 				}
-				
-				for(let i=0;i< keys.length;i++){
-			 
-				 const key=keys[i];
-				  const {width,zIndex}=this.cacheModelArr.get(key);
-				  const pointArr=_points.splice(0,this.cacheLenArr[i]);
-				  if(pointArr.length){
-					const  model ={
-					color:this.cacheColors.get(key),
-					width,
-					zIndex,
-				    pointArr
-				   };
-                   arr.push(model);
-					// if( i > 1 &&i <keys.length-1){
-				    //  	 this._insertPoint(model,points[key-1]);	
-					// }
-                 
-				  }
+
+				for (let i = 0; i < keys.length; i++) {
+					const key = keys[i];
+					const {
+						width,
+						zIndex
+					} = this.cacheModelArr.get(key);
+					const pointArr = _points.splice(0, this.cacheLenArr[i]);
+					if (pointArr.length) {
+						const model = {
+							color: this.cacheColors.get(key),
+							width,
+							zIndex,
+							pointArr
+						};
+						arr.push(model);
+						// if( i > 1 &&i <keys.length-1){
+						//  	 this._insertPoint(model,points[key-1]);	
+						// }
+
+					}
 				}
-                return arr;
+				return arr;
 			},
 			sliderChange(val) {
-              this.endPlaybackLines();
-			  if (val === 0) {
-				  this.$emit('trackPlayEvent',{index:val,points:this.cacheArr[0] });
-				  return;
-			  }
-			  const points= this.cacheArr.slice(0,val);
-			  const arr =    this.createLineModels(this.getKeys(val),points,val);
-			  arr.forEach(r=> this._insertLineAndMarker2(r,false));
-			  if(points.length){
-				this.$emit('trackPlayEvent',{index:val,points:points[points.length-1] });
-			  }
-			  if (this.moveMarkerDto && !this.moveMarker && points.length) {
-					this.moveMarker = this.createStartMarker(this.moveMarkerDto, points[points.length-1]);
+				this.endPlaybackLines();
+				if (val === 0) {
+					this.$emit('trackPlayEvent', {
+						index: val,
+						points: this.cacheArr[0]
+					});
+					return;
+				}
+				const points = this.cacheArr.slice(0, val + 1);
+				const arr = this.createLineModels(this.getKeys(val), points, val);
+				arr.forEach(r => this._insertLineAndMarker2(r, false));
+				if (points.length) {
+					this.$emit('trackPlayEvent', {
+						index: val,
+						points: points[points.length - 1]
+					});
+				}
+				if (this.moveMarkerDto && !this.moveMarker && points.length) {
+					this.moveMarker = this.createStartMarker(this.moveMarkerDto, points[points.length - 1]);
 					return;
-			  }
-			
+				}
+
 			},
-			onPlayTrajectory() {			
-			    if (!this.isStop) {
-					if(this.index==0){
-					this.endPlaybackLines();
+			onPlayTrajectory() {
+				if (!this.isStop) {
+					if (this.index == 0) {
+						this.endPlaybackLines();
 					}
 				}
 				this.isPlayback = true;
@@ -556,7 +595,7 @@
 					r.selectGPS(type);
 				});
 				this.endPlaybackLines();
-                this.index=0;
+				this.index = 0;
 				if (this.startMarker) {
 					this.startMarker.selectGPS(type);
 				}