ry-vue-map 0.2.8 → 0.2.9

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

@@ -1,13 +1,37 @@
 <template>
+	<div>
+		<div v-if="isShowPlayback" class="el-slider-box">
+			<el-row type="flex" justify="center">
+				<el-col :span="1">
+					<button class="button-paly" @click.stop="onPlayTrajectory()" v-if="!index || !isStop"></button>
+					<button class="button-stop" @click.stop="onStopTrajectory()" v-else></button>
+				</el-col>
+				<el-col :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"
+						@change="sliderChange" :format-tooltip="formatTooltip"></el-slider>
+				</el-col>
+			</el-row>
+			<el-row type="flex" justify="end">
+				<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[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>
+					</section>
+				</el-col>
+			</el-row>
+		</div>
+	</div>
+
 </template>
 
 <script>
 	import {
 		Polyline,
 		LMarker,
-		getCenterPoint,
 		fitNew,
-		getLngAndLatMaxMin,
 		GPS,
 		AM,
 	} from 'ry-map';
@@ -31,23 +55,48 @@
 				pineArr: [],
 				lastLineX: 0,
 				lastLineY: 0,
-				cachePointArr: new Array(),
-				drawingEnd: false,
+				lastLineX2: 0,
+				lastLineY2: 0,
+				cacheArr: new Array(),
+				cacheModelArr: new Map(),
+				cacheColors: new Map(),
+				cacheLenArr: new Array(),
+				cacheLines: new Array(),
+				cacheLineMaps: new Map(),
+				cacheScales: new Array(),
 				isFist: true,
 				lastColor: null,
-				am: new AM()
+				len: 0,
+				am: new AM(),
+				index: 0,
+				intervalId: null,
+				selectActive: [false, true, false, false],
+				marks: {
+					
+				},
+				marks2: {
+					
+				},
+				// 轨迹回放
+				isPlayback: false,
+				// 暂停轨迹回放
+				isStop: false,
+				playSpeed: 100,
 			};
 		},
 		watch: {
 			model(val) {
 				this.init();
+				if (!val) return;
+				this.insertCache(val.pointArr);
 			},
 			linenIsert(val) {
 				if (!this.map || !val) return;
+				this.insertCache(val);
 				this._insertLineAndMarker(val);
 			},
 			gpsType(val) {
-
+				this.selectGPSAll(val);
 			},
 			clearLiens(val) {
 				if (val) {
@@ -59,7 +108,33 @@
 					this.appendCoordinate(val);
 					this.setMarkerPoint(this.endMarker, val);
 				}
+			},
+			isShowPlayback(val){
+				if(!val){
+                  this.endPlaybackLines();
+				  this.index=0;
+				  this.resetPyalPanel();
+				  return;
+				}
+				delete this.marks2[this.len];
+				this.marks=this.marks2;
+            
 			}
+			// isPlayback(val){
+			// 	if(val){
+			//      this.trackPlayback();
+			//      return;
+			// 	}
+			// 	this.endPlaybackLines();
+			// },
+			// isStop(val){
+			// 	if(val){
+			// 		this._clearInterval();
+			// 		return;
+			// 	}
+			// 	this.trackPlayback();
+			// },
+
 		},
 		created() {
 			this.init();
@@ -68,25 +143,53 @@
 			init() {
 				if (!this.map) return;
 				this.clearLine();
-				if (!this.model) return;
+
+				if (!this.model && !this.linenIsert) return;
 				this.lastType = this.gpsType;
-				this._insertLineAndMarker(this.model);
+				if (this.model) {
+					this.insertCache(this.model);
+					this._insertLineAndMarker(this.model);
+				}
+				if (this.linenIsert) {
+					this.insertCache(this.linenIsert);
+					this._insertLineAndMarker(this.linenIsert);
+				}
+			},
+			insertCache(model) {
+				if (model) {
+					const {
+						playbackColor,
+						pointArr
+					} = model;
+					const len = pointArr.length;
+					if (!pointArr.length) return;
+					this.len += len;
+					this.cacheArr.push(...model.pointArr);
+					this.cacheColors.set(this.len,playbackColor);
+					this.cacheLenArr.push(len);
+	                this.marks2[this.len]='';
+					this.cacheScales.push(this.len);
+		            this.cacheModelArr.set(this.len,model);
+				}
 			},
 			_insertLineAndMarker(val) {
-				const color = val.color;
 				const arr = val.pointArr;
 				if (this.isLineFit) {
+				
 					this.calculateLineBBOX(arr);
 				}
 				this.initMarker(arr[0]);
-				if (!val.isAppend || !this.pineArr.length) {
-					this._insertPoint(val);
+				if (!val.isAppend) {
+
+					this._insertPoint(val,[this.lastLineX,this.lastLineY]);
 					const line = this.createPolyline(val);
 					const len = arr.length - 1;
 					this.setMarkerPoint(this.endMarker, arr[len]);
-					this.restLastData(arr);
+				 	const  {x,y} = this.restLastData(arr);
+					this.lastLineX=x;
+					this.lastLineY=y;
 					this.pineArr.push(line);
-				 return;
+					return;
 				}
 				arr.forEach(r => {
 					this.appendCoordinate(r);
@@ -95,6 +198,16 @@
 				this.setMarkerPoint(this.endMarker, arr[len]);
 				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;
+			},
 			async calculateLineBBOX(arr) {
 				return await new Promise(r => {
 					arr.forEach(r => {
@@ -103,7 +216,14 @@
 							Y: r[1]
 						});
 					});
-					const amGpsArr = this.am.getLngLats();
+
+					let amGpsArr =[];
+					if(this.gpsType){
+						amGpsArr = this.am.getLngLatGCJ02();
+					}else{
+						amGpsArr =this.am.getLngLats();
+					}
+						
 					fitNew(this.map, [
 						[amGpsArr[0], amGpsArr[1]],
 						[amGpsArr[2], amGpsArr[3]]
@@ -112,7 +232,6 @@
 				});
 			},
 			initMarker(arr) {
-
 				if (!this.startMarkerDto && !this.endMarkerDto) return;
 				if (!this.startMarker && !this.endMarker) {
 					this.startMarker = this.createStartMarker(this.startMarkerDto, arr);
@@ -127,20 +246,20 @@
 			restLastData(arr) {
 				if (arr.length > 0) {
 					const [x, y] = arr[arr.length - 1];
-					this.lastLineX = x;
-					this.lastLineY = y;
+					return {x,y};
 				}
 			},
-			_insertPoint(val) {
-				if (this.lastLineX > 0 && this.lastLineY > 0 && val) {
-					val.pointArr.unshift([this.lastLineX, this.lastLineY]);
+			_insertPoint(val,points) {
+				const [x,y]=points;
+				if (x > 0 && y > 0 && val) {
+					val.pointArr.unshift(points);
 				}
 			},
 			createPolyline(polylineModel = {
 				color: 'rgb(0,0,255)',
 				width: 2,
 				pointArr: [],
-				zIndex: 1000,
+				zIndex: 1,
 			}) {
 				return new Polyline({
 					...polylineModel,
@@ -198,29 +317,262 @@
 				this.startMarker = null;
 			},
 			clearLine() {
+				this.resetPyalPanel();
 				this.removeLines();
 				this.removeLineMarker();
-				this.cachePointArr = [];
+				this.cacheArr = [];
 				this.lastColor = null;
 				this.lastLineX = 0;
 				this.lastLineY = 0;
 				this.am = null;
 				this.am = new AM();
+				this.marks={};
+				this.marks2={};
+				this._clearInterval();
+				this.clearCacheLines();
+			},
+			_clearInterval() {
+				if (this.intervalId) {
+					clearInterval(this.intervalId);
+				}
+			},
+			clearCacheLines() {
+				this.endPlaybackLines();
+				this.cacheLenArr=[];
+				this.cacheArr = [];
+				this.cacheColors.clear();
+				this.cacheModelArr.clear();
+				this.len = 0;
+				this.cacheScales=[];
+				this.index=0;
+	
+			},
+			endPlaybackLines() {
+				this._clearInterval();
+				this.cacheLines.forEach(r => {
+					r.removePolyline();
+				});
+				if (this.moveMarker) {
+					this.map.removeOverlay(this.moveMarker.getMarker());
+				}
+				this.isPlayback = false;
+				this.isStop = false;
+				this.cacheLines = [];
+				this.cacheLineMaps.clear();
+				this.moveMarker = null;
+				// this.index = 0;
+				// this.lastColor = null;
+				this.lastLineX2=0;
+				this.lastLineY2=0;
+			},
+			stopPlaybackLines(val) {
+				this.isPlayback = false;
+				this.isStop = false;
+				if (val) {
+					this._clearInterval();
+					return;
+				}
+				this.trackPlayback();
+			},
+			createTrackLineAndMarker(index = 0,index2=0) {
+				const key = index;
+				const {
+					playbackColor,
+					width,
+					zIndex
+				} = this.cacheModelArr.get(key);
+
+				const line = this.createPolyline({
+					color:playbackColor,
+					isAppend: false,
+					width,
+					pointArr: [],
+					zIndex,
+				}, this.gpsType);
+				this.lastColor = playbackColor;
+				this.cacheLines.push(line);
+				if (this.moveMarkerDto && !this.moveMarker) {
+					this.moveMarker = this.createStartMarker(this.moveMarkerDto, this.cacheArr[index2]);
+				}
+			},
+			trackPlayback() {
+				if (!this.cacheLines.length) {
+	
+					this.createTrackLineAndMarker(this.cacheScales[0],0);
+				}
+				this.intervalId = setInterval(r => {
+					if (this.index >= this.len || !this.isPlayback) {
+						this._clearInterval();
+						this.index=0;
+						this.isStop = false;
+						this.$emit('trackPlayEvent',{index:this.index,points:[] });
+						return;
+					}   
+					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] });
+						}
+					}
+					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.index += 1;
+				}, this.playSpeed);
 			},
 			appendCoordinate(coordinate = []) {
 				if (!coordinate.length) return;
 				if (!this.pineArr.length) {
-                       this._insertLineAndMarker({...this.lineDto,pointArr:[coordinate],isAppend: false});
+					this._insertLineAndMarker({
+						...this.lineDto,
+						pointArr: [coordinate],
+						isAppend: false
+					});
 				};
 				const line = this.pineArr[this.pineArr.length - 1];
-				line.appendCoordinate(coordinate);
+				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;
+					}
+					arr.push(this.cacheScales[i]);
+					break ;
+				}
+
+				return arr;
+			},
+			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)
+				  });
+					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){
+					// 	// console.log(points[key-1]);
+				    //  	 this._insertPoint(model,points[key-1]);	
+					// }
+                 
+				  }
+				}
+                return arr;
+			},
+			sliderChange(val) {
+              this.endPlaybackLines();
+			  if (val === 0) {
+				  this.$emit('trackPlayEvent',{index:val,points:[] });
+				  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]);
+					return;
+			  }
+			
+			},
+			onPlayTrajectory() {			
+			    if (!this.isStop) {
+					if(this.index==0){
+					this.endPlaybackLines();
+					}
+				}
+				this.isPlayback = true;
+				this.isStop = true;
+				this.trackPlayback();
+			},
+			onStopTrajectory() {
+				this.isStop = false;
+				this._clearInterval();
+			},
+
+			onPlaySpeed(key, val) {
+				this.selectActive = this.selectActive.map(v => (v = false));
+				this.selectActive[key] = true;
+				this.playSpeed = val;
+				this.isStop = false;
+				this._clearInterval();
+
+			},
+			resetPyalPanel() {
+				this.selectActive = [false, true, false, false, false];
+				this.playSpeed = 100;
 			},
 			selectGPSAll(type) {
+				this.pineArr.forEach(r => {
+					r.selectGPS(type);
+				});
+				this.endPlaybackLines();
+                this.index=0;
+				if (this.startMarker) {
+					this.startMarker.selectGPS(type);
+				}
 
+				if (this.endMarker) {
+					this.endMarker.selectGPS(type);
+				}
+
+				if (this.moveMarker) {
+					this.moveMarker.selectGPS(type);
+				}
 			},
 		}
 	}
 </script>
 
-<style>
-</style>
+<style lang="scss" scoped>
+	@import "./index.scss";
+</style>

package/src/components/maps/ryStaticLayer/index.js

@@ -0,0 +1,7 @@
+import RyKMLs from './src/index';
+
+RyKMLs.install = (Vue) => {
+  Vue.install(RyKMLs.name, RyKMLs);
+};
+
+export default RyKMLs;

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

@@ -0,0 +1,154 @@
+<template>
+</template>
+
+<script>
+	import {
+		fitNew,
+		GPS,
+		staticImage as StaticImage
+	} from 'ry-map';
+	import Dto from './../../models/ryStaticLayer/index.js';
+	export default {
+		name: 'RyStaticLayers',
+		props: {
+			...new Dto(),
+		},
+		data() {
+			return {
+				bbox: [],
+				bboxGCJ02: [],
+				staticImg:null,
+				lastType: -1,
+			};
+		},
+		watch: {
+			model(val) {
+				this._remove();
+				if (!val.length) return;
+				this.init(val);
+			},
+			gpsType(val) {
+				if (this.lastType == val) return;
+				this.gpsType = val;
+				this.lastType = val;
+				this.selectGPSAll(this.gpsType);
+			},
+			clear(val) {
+				if (val) {
+					this._remove();
+				}
+			},
+			isShow(val) {
+             this._isShow(val);
+            },
+
+
+		},
+
+		created() {
+			this.lastType = this.gpsType;
+			this.init(this.model);
+		},
+
+		methods: {
+			init(model) {
+				// this._insert();
+				if (!model) return;
+	
+				this._insert(model);
+				if(this.isFit){
+					setTimeout(() => {
+					this.setFit();			
+					}, 50);
+				};
+			},
+			_insert(dto) {
+				const {
+					id,
+					url,
+					bbox,
+					zIndex,
+				} = dto;
+					const img = new StaticImage({
+							id,
+							url,
+							imageExtent:bbox,
+							zIndex,
+							type:this.gpsType
+					},
+					this.map);
+					this.staticImg=img;
+	
+		     		this.setBBOXArr(bbox);
+			},
+			setBBOXArr(bbox) {
+				this.bbox.push(bbox);
+				const _bboxGCJ02 = this.convertBBoxGCJ02(bbox);
+				this.bboxGCJ02.push(_bboxGCJ02);
+			},
+
+			setFit() {
+				if (!this.bbox.length || !this.map) return;
+				if (this.bbox.length > 1) {
+					fitNew(this.map, this.gpsType == 1 ? this.bboxGCJ02 : this.bbox);
+				
+					return;
+				}
+				this.setFitFist(this.gpsType == 1 ? this.bboxGCJ02[0] : this.bbox[0]);
+			},
+			// bbox.length =1 执行此处
+			setFitFist(bbox) {
+				const bbox2 = [bbox[0], bbox[3], bbox[2], bbox[1]];
+				const bbox3 = [bbox[2], bbox[1], bbox[0], bbox[3]];
+				fitNew(this.map, [bbox2, bbox3]);
+			},
+			convertBBoxGCJ02(bbox) {
+				const pointArr = [];
+				const {
+					lat,
+					lon
+				} = GPS.gcj_encrypt(bbox[0], bbox[1]);
+				const {
+					lon: lon2,
+					lat: lat2
+				} = GPS.gcj_encrypt(bbox[2], bbox[3]);
+				pointArr.push(lon);
+				pointArr.push(lat);
+				pointArr.push(lon2);
+				pointArr.push(lat2);
+				return pointArr;
+			},
+
+			_remove() {
+				if(this.staticImg){
+					this.staticImg.removeImageLayer();
+				}
+				this.staticImg=null;
+				this.bbox = [];
+				this.bboxGCJ02=[];
+
+			},
+
+			selectGPSAll(type) {
+				if(this.staticImg){
+				   this.staticImg.selectGPS(type);
+				}
+			},
+
+			_isShow(val) {
+             if (this.staticImg) {
+             const img = this.staticImg;
+             if (val) {
+              img.show();
+              return;
+             }
+             img.hide();
+        }
+        },
+
+		},
+	}
+</script>
+
+<style>
+</style>

package/src/components/maps/ryStaticLayers/index.js

@@ -0,0 +1,7 @@
+import RyKMLs from './src/index';
+
+RyKMLs.install = (Vue) => {
+  Vue.install(RyKMLs.name, RyKMLs);
+};
+
+export default RyKMLs;