ry-vue-map 0.2.7 → 0.2.9

package/src/views/map/index.vue

@@ -1,96 +1,99 @@
 <template>
 	<div class="map-style">
 
-		<ry-map projection="EPSG:4326" :zoom="15" :minZoom="1" :maxZoom="maxZoom" :center="center"  @load="load($event)"
+		<ry-map projection="EPSG:4326" :zoom="15" :minZoom="1" :maxZoom="maxZoom" :center="center" @load="load($event)"
 			:isCrossHair="isRyMapTool" :isRight="true" :isRyMapTool="true" @drawSuccess="drawSuccess"
 			@drawError="drawError" :isShowRangingTool="true" :isShowDrawTool="isRyMapTool" :bindMapClick="true"
 			@mapClick="mapClick($event)" @crossHairClick="crossHairClick($event)" :bindMapMoveend="true"
 			:isSwitchMapRight='true' :switchMapPosTop='60' :switchMapPosLeftOrRight="20" :switchMapHeight="40" 　
 			:switchMapDefaultTypeOrLayer="[1,2]" @mapMoveend="mapMoveend($event)"
-			@loadDrawPolygonEvent="loadDrawPolygonEvent($event)"
+			@loadDrawPolygonEvent="loadDrawPolygonEvent($event)" 
 			@changeSwitchMap="changeSwitchMap($event)"  :isShowSwitchMap="true"
 			>
-			<!--    <template slot="maptool">
-        <button>ry</button>
-      </template> -->
-			<!--  :hideAdd="true"
-      :hidePoint="true"
-      :hideCancel="true"
-      :hideDelete="true"
-      :hideSave="true"
-      :hideLine="true"
-      :hideArea="true" -->
-			<!--  :layerType="2"
-	  :mapType="1" -->
+		<!-- [121.91057586669922,29.146669387817383,121.91226196289062,29.14839744567871]
+		https://rydemo.ryaims.com:9443/ryfiles/22/795698e5e3934681831ffee55fbf04e2.png	
+
+		https://rydemo.ryaims.com:9443/ryfiles/40/83c66a74b08d43318ad9acc43de580ff.png
+		[121.91577911376953,29.15501594543457,121.91645050048828,29.155576705932617] -->
+		
 			<template #marker="{mapDto}">
-				<!-- <RyKMLs :map="mapDto.map" :gpsType="gpsType" :modelArr="kmls" ></RyKMLs> -->
-				<RyKML :map="mapDto.map" :gpsType="gpsType" :model="model" ></RyKML>
-				<!-- <ry-polygon  :map="mapDto.map" :isShow="true" :polygonColor="colors" :model="polygonModel" :clear="isClear"  @onLoad="onLoad($event)"></ry-polygon> -->
-			<!-- 	<ry-polygon :isFit="false" :gpsType="gpsType" :map="mapDto.map" :model="polygonModel"></ry-polygon> -->
-			<!-- 	<ry-polygon-geo :isFit="true" :gpsType="gpsType"  :map="mapDto.map" :model="polygonModel6" > </ry-polygon-geo> -->
-				<!--   <ry-polygon :isFit="true" :isShowAll="isShowAll" :map="mapDto.map" :isShow="true"  :model="polygonModel"   @onLoad="onLoad($event)"></ry-polygon> -->
+				     
+                     <!-- <ry-lines
+                     :map="mapDto.map"  			
+                     :startMarkerDto ="startMarkerDto" 
+				     :endMarkerDto="endMarkerDto" 
+					 :moveMarkerDto="moveMarkerDto"
+                     :isLineFit="true"	
+                     :linenIsert="lineData1"  
+                     :gpsType="gpsType"
+					 :lineAppend="lineAppend"
+				     :isShowPlayback="isShowPaly"
+					 :clearLiens="clearLiens"
+					 @trackPlayEvent="trackPlayEvent($event)"
+                     ></ry-lines> -->
+					 <RyStaticLayers
+					  :map="mapDto.map"  
+					  :modelArr="modelArr"
+					  :gpsType="gpsType"
+					  :clear="clearLiens"
+					  :isShowAll="isStop"
+					  :isShow="isShowObj"
+					 >
 
+					 </RyStaticLayers>
+					  <RyStaticLayer
+					  :map="mapDto.map"  
+					  :model="imgObj"
+					  :gpsType="gpsType"
+					  :clear="clearLiens"
+				       :isShow="isStop"
+					 >
+
+					 </RyStaticLayer>
 			</template>
+			
 
 		</ry-map>
-
-
-		<button @click="onClick()">测试</button>
-		<button @click="onClick2()">测试2</button>
-		<button @click="onClick3()">测试3</button>
+	 <!-- :isPlayback="!isShowPaly" -->
+		<button @click="onClick()">清除轨迹</button>
+		<button @click="onClick2()">暂停轨迹回放</button>
+		<button @click="onClick3()">开始轨迹回放</button>
 		
 		<aside class="aside-style">
 		  <el-button 
-		      class="ele-text-primary" v-show="isShowPaly"  style="padding:10px;" @click.stop="onShowPaly(false)">
+		      class="ele-text-primary"   style="padding:10px;" @click.stop="onShowPaly(true)">
 		      轨迹回放 </el-button>
 		
 		   <el-button 
-		      class="ele-text-primary" v-show="!isShowPaly" style="padding:10px; color: red;" @click.stop="onShowPaly(true)">
-		      结束轨迹回放 </el-button>
+		      class="ele-text-primary"  style="padding:10px; color: red;" @click.stop="onShowPaly(false)">
+		      结束轨迹回放
+		   </el-button>
 		  </aside>
 	</div>
 </template>
 
 <script>
 	import dayjs from 'dayjs'
-	import RyMap from '@/components/maps/ryMap/src/index.vue';
-	import RyMapTool from '@/components/maps/ryMapTool/src/index.vue';
-	import RyPolygon from '@/components/maps/ryPolygon/src/index.vue';
-	import RyPolygons from '@/components/maps/ryPolygons/src/index.vue';
-	import  RyClustersMarker from '@/components/maps/ryClustersMarker/src/index.vue';
-	import RyPolygonGeo from '@/components/maps/ryPolygonGeo/src/index.vue';
-	import RyKMLs  from '@/components/maps/ryKMLs/src/index.vue';
-    import RyKML  from '@/components/maps/ryKML/src/index.vue';
+	import RyMap from '@/components/maps/ryMap/src/index.vue'
+	import RyMapTool from '@/components/maps/ryMapTool/src/index.vue'
+	import RyPolygon from '@/components/maps/ryPolygon/src/index.vue'
+	import RyPolygons from '@/components/maps/ryPolygons/src/index.vue'
+	import  RyClustersMarker from '@/components/maps/ryClustersMarker/src/index.vue'
+	import RyPolygonGeo from '@/components/maps/ryPolygonGeo/src/index.vue'
+	import RyLines from '@/components/maps/ryLines/src/index.vue'
+	import RyStaticLayers from '@/components/maps/ryStaticLayers/src/index.vue'
+	import RyStaticLayer from '@/components/maps/ryStaticLayer/src/index.vue'
+	import gJson from './3301'
+	import gJson2 from "./331123"
+	import gJson10 from "./330681"
 	import {
 		createPolygonBoundary,
 		GPS
-	} from "ry-map";
-
-	const  kmls=[
-{
-  "id": 4,
-  "url": "https://rydemo.ryaims.com:9443/ryfiles/31/a6ab6654b9f14a7c84af7289dda6636c.kml",
-  "gcj02Url": "https://rydemo.ryaims.com:9443/ryfiles/59/817d2f7752e54c9daa48dc1738871917.kml",
-  "bbox": [
-    121.91140167,
-    29.14645833,
-    121.920475,
-    29.16052167
-  ],
-},
-{
-  "id": 3,
-  "url": "https://rydemo.ryaims.com:9443/ryfiles/46/8c1e06765e0543cc9002b255fe41f372.kml",
-  "gcj02Url": "https://rydemo.ryaims.com:9443/ryfiles/80/2607c27c8da1408b8d8f4a9d6487eed1.kml",
-  "bbox": [
-    121.4692,
-    29.759945,
-    121.47069167,
-    29.761625
-  ],
-}
-];
+	} from "ry-map"
+	import lineDataArr from './lineData.js'
 
+	
+	
 	export default {
 		components: {
 			RyMap,
@@ -99,8 +102,9 @@
 			RyPolygons,
 			RyClustersMarker,
 			RyPolygonGeo,
-			RyKMLs,
-			RyKML
+			RyLines,
+			RyStaticLayers,
+			RyStaticLayer
 		},
 		data() {
 			return {
@@ -111,7 +115,24 @@
 				isClear: false,
 				geoJson: null,
 				colors: [],
-				center: [ 121.482227,28.5327395],
+				modelArr:[{
+					id:'ceshi1',
+					bbox:[121.91057586669922,29.146669387817383,121.91226196289062,29.14839744567871],
+		            url:'https://rydemo.ryaims.com:9443/ryfiles/22/795698e5e3934681831ffee55fbf04e2.png',
+				},
+				{
+					id:'ceshi2',
+					bbox:[121.91577911376953,29.15501594543457,121.91645050048828,29.155576705932617],
+		            url:'https://rydemo.ryaims.com:9443/ryfiles/40/83c66a74b08d43318ad9acc43de580ff.png',
+				}
+				],
+				modelArr2: [
+					{id:'ceshi1', x:120.15535003220648,y:30.179378795342608},
+					{id:'ceshi2',x:120.16369976775891,y:30.1967116895034},
+				    {id:'ceshi3',x:120.156817,y:30.1753985} ,
+					{id:'ceshi4',x:120.1538245,y:30.183076} ,
+					],
+				center: [  120.2687149,29.8142052],
 				polygonColors: [],
 				remove: 'ceshi1',
 				removes: [],
@@ -127,8 +148,6 @@
 				}],
 				inserts: [],
 				isShowAll: false,
-				// isShow:true,
-				polygonModel: null,
 				mapTool: null,
 				isCheckPoint: null,
 				gpsType: 1,
@@ -137,7 +156,9 @@
 			    src:require("@/assets/1.png"),
 				lineData1:null,
 				lineData2:null,
-				clearLiens:false,
+	
+		    	// startMarkerDto:null,
+			    // endMarkerDto:null,
 				startMarkerDto: {
 	            url:require('@/assets/startpoint.png'),
 	 			height:23,
@@ -150,46 +171,307 @@
 					offset:[0, -8],
 					width:16
 				}, 
+				moveMarkerDto:{
+					url:require('@/assets/moveMarker.png'),
+					height:16,
+					offset:[0, -8],
+					width:16
+				}, 
 				lineAppend:[],
-				isShowPaly:true,
+				isShowPaly:false,
 				layerArr:[2,2],
-				kmls,
-				model:{
-  "id": 3,
-  "url": "https://rydemo.ryaims.com:9443/ryfiles/46/8c1e06765e0543cc9002b255fe41f372.kml",
-  "gcj02Url": "https://rydemo.ryaims.com:9443/ryfiles/80/2607c27c8da1408b8d8f4a9d6487eed1.kml",
-  "bbox": [
-    121.4692,
-    29.759945,
-    121.47069167,
-    29.761625
-  ],
-}
+				clearLiens:false,
+				isStop:false,
+				isShowObj:null,
+				imgObj:{
+					id:'ceshi1',
+					bbox:[121.91057586669922,29.146669387817383,121.91226196289062,29.14839744567871],
+		            url:'https://rydemo.ryaims.com:9443/ryfiles/22/795698e5e3934681831ffee55fbf04e2.png',
+				},
 			}
 		},
 		created() {
-//            this.model={
-//   "id": 3,
-//   "url": "https://rydemo.ryaims.com:9443/ryfiles/46/8c1e06765e0543cc9002b255fe41f372.kml",
-//   "gcj02Url": "https://rydemo.ryaims.com:9443/ryfiles/80/2607c27c8da1408b8d8f4a9d6487eed1.kml",
-//   "bbox": [
-//     121.4692,
-//     29.759945,
-//     121.47069167,
-//     29.761625
-//   ],
-// };
-		   
- 
+
+			const obj = {
+				  isAppend:false,
+				  color: 'green',
+				  playbackColor:'#000',
+				  width: 2,
+				  pointArr: [],
+				  creaTime:[],
+				  zIndex: 1,
+				}
+			
+			const obj2 = {
+				  isAppend:false,
+				  color: 'red',
+				  playbackColor:'orange',
+				  width: 2,
+				  pointArr: [],
+				  creaTime:[],
+				  zIndex: 1,
+				}
+				
+				
+				const obj3 = {
+						  isAppend:false,
+					  color: 'blue',
+					  playbackColor:'cadetblue',
+					  width: 2,
+					  pointArr: [],
+					  creaTime:[],
+					  zIndex: 1,
+					}
+					
+					const obj4 = {
+						  isAppend:false,
+						  playbackColor:'azure',
+						  color: 'yellow',
+						  width: 2,
+						  pointArr: [],
+						  creaTime:[],
+						  zIndex: 1,
+						}
+						
+						const obj5 = {
+							  isAppend:false,
+							  playbackColor:'brown',
+							  color: 'purple',
+							  width: 2,
+							  pointArr: [],
+							  creaTime:[],
+							  zIndex: 1,
+							}
+							
+							const obj6 = {
+								  isAppend:false,
+								  playbackColor: '#00ffff',
+								  color: 'black',
+								  width: 2,
+								  pointArr: [],
+								  creaTime:[],
+								  zIndex: 1,
+								}
+
+   //          console.log(lineDataArr);
+			
+			lineDataArr[0].forEach(r=> {
+			          obj.pointArr.push([r.lng,r.lat])
+					  obj.creaTime.push(r.creaTime)
+			})
+            
+			 this.lineData1=obj
+			// const len2=obj.pointArr.length;
+			// let i2=0;
+		 //    let setId =	setInterval(r=> {
+			//    this.lineAppend=obj.pointArr[i2];
+			// 	i2+=1;
+			// 	if(i2 >=len2){
+			// 		clearInterval(setId);
+			// 	}
+			// },1000);
+
+			
+			lineDataArr[1].forEach(r=> {
+			          obj2.pointArr.push([r.lng,r.lat])
+					  obj2.creaTime.push(r.creaTime)
+			})
+
+			
+			
+			lineDataArr[2].forEach(r=> {
+			          obj3.pointArr.push([r.lng,r.lat])
+					  obj3.creaTime.push(r.creaTime)
+			})
+			
+			lineDataArr[3].forEach(r=> {
+			          obj4.pointArr.push([r.lng,r.lat])
+					  obj4.creaTime.push(r.creaTime)
+			})
+			
+			lineDataArr[4].forEach(r=> {
+			          obj5.pointArr.push([r.lng,r.lat])
+					  obj5.creaTime.push(r.creaTime)
+			})
+			
+			lineDataArr[5].forEach(r=> {
+			          obj6.pointArr.push([r.lng,r.lat])
+					  obj6.creaTime.push(r.creaTime)
+			})
+			
+			
+			
+			
+			
+			setTimeout(r=> {
+				this.lineData1=obj2
+			},3000)
+			
+			setTimeout(r=> {
+				this.lineData1=obj3			
+			},4000)
+			
+
+           	setTimeout(r=> {
+				this.lineData1=obj4			
+			},5000)
+
+			setTimeout(r=> {
+				this.lineData1=obj5			
+			},6000)
+			
+
+		
+			setTimeout(r=> {
+			 this.lineData1=obj6	
+	
+			},7000)
+
+
+			// obj6.forEach(r=> {
+				
+			// });
+	// let i=0;
+	//  setTimeout(r=> {
+ //              let intId =	setInterval(r=> {
+ //              		 this.lineAppend= obj3.pointArr[i];
+	// 				 console.log(this.lineAppend);
+ //              		 i+=1;
+ //              		 if(i==obj3.pointArr.length){
+ //              			  clearInterval(intId);
+ //              		 }
+ //              	},2000);		 
+	//  },3000);
+
+			
+			// setTimeout(r=> {
+			// 	this.lineData1=null;			
+			// },10000);
+			
+			
+			// setTimeout(r=> {
+			// 	// this.lineData1=null;
+			// 	this.clearLiens=true;
+			// },10000);
+	
+			// amworkdatalist.push({
+			//   X,
+			//   Y,
+			//   isNJOpt: isWorking,
+			//   creaTime: toDateString(new Date(item.creaTime))
+			// });
+			
+			// {
+			//   color: 'rgb(0,0,255)',
+			//   width: 2,
+			//   pointArr: [],
+			//   zIndex: 1000,
+			// }
+			
+			// console.log(polygonModel5);
+   //          console.log(lineData1);
+			// console.log(lineData2);
+			
+			// setTimeout(r=> {this.colors=['red','#000']},3000);
+			//   setTimeout(r=> {this.isClear=true;}, 5000);
+			setTimeout(r => {
+				// this.modelArr= [polygonModel3,polygonModel4];
+				// this.polygonColorObj={
+				//   id:'ceshi4',
+				//   colorArr:['red','#000']
+				// };
+
+				// this.polygonColors.push({
+				//    id:'ceshi1',
+				//    colorArr:['red','#000']
+				// });
+
+				//  this.polygonColors.push({
+				//     id:'ceshi2',
+				//     colorArr:['red','#000']
+				//  });
+
+				//  this.polygonColors.push({
+				//     id:'ceshi3',
+				//     colorArr:['red','#000']
+				//  });
+				// this.insert=polygonModel1;
+
+				// this.isFit=true;
+
+				// this.range='ceshi3';
+				// this.ranges=['ceshi2','ceshi1'];
+				// :initModifyPolygon="geo"
+				// this.inserts=[polygonModel2, polygonModel3];
+			}, 8000)
+			setTimeout(r => {
+				// this.polygonModel={
+				//   fillColor: '#000',
+				//   stroke: 'red',
+				//   width: 1,
+				//   text: '测试',
+				//   coordinates: geometry.coordinates,
+				//   id: 'ceshi',
+				// };
+				// this.restFit = true;
+				// this.modelArr=[];
+				//  this.isShowAll=false;
+				// this.showPolygons
+
+				// this.showPolygon={
+				//   id:'ceshi2',
+				//   isShow:false
+				// }
+			}, 7000)
+			// setTimeout(r=> {
+			//   this.polygonModel={
+			//     fillColor: '#000',
+			//     stroke: '#fff',
+			//     width: 4,
+			//     text:'测试2',
+			//     coordinates: [
+			//       [
+			//         [121.03623185250073, 29.247091764239528],
+			//         [121.03525048300928, 29.24522364753245],
+			//         [121.03576144393304, 29.244964111834967],
+			//         [121.03598042717134, 29.245156060100488],
+			//         [121.03797020112704, 29.24484786136949],
+			//         [121.03804589913334, 29.244920855919766],
+			//         [121.03816214959882, 29.244964111834967],
+			//         [121.03859908998896, 29.245047209773205],
+			//         [121.03870182296805, 29.245344594473835],
+			//         [121.03883429416969, 29.245955584817516],
+			//         [121.03876670673772, 29.24603128272069],
+			//         [121.0388072591969, 29.246155643657374],
+			//         [121.03868830548166, 29.246174568158953],
+			//         [121.03868830548166, 29.246225934545365],
+			//         [121.03834496140979, 29.24628270805009],
+			//         [121.03827467031554, 29.246350295482053],
+			//         [121.03814760602596, 29.24639895841244],
+			//         [121.03822600728203, 29.246569278720354],
+			//         [121.03623185250073, 29.247091764239528]
+			//       ]
+			//     ],
+			//     id: 'ceshi',
+			//   }
+			// },6000);
 		},
 		methods: {
+			trackPlayEvent(obj){
+				console.log(obj)
+			},
 			onShowPaly(b) {
-			  this.isShowPaly = b;
-			
+			  this.isShowPaly = b
 			},
 			load(obj) {
-				this.lMap = obj.mapServices;
-				this.map = obj.map;
+				this.lMap = obj.mapServices
+				this.map = obj.map
+				// console.log(obj);
+				// let g10 = GPS.convertGCJ02(gJson2);
+				// convertWGS84
+				// convertWGS84,convertGCJ02
+				//    const geo = createPolygonBoundary(g5);
+				// this.map.addLayer(geo );
 			},
 			drawSuccess(obj) {
 				this.polygonModel = {
@@ -199,7 +481,7 @@
 					text: '',
 					geo: obj.geoJson,
 					id: 'ceshi',
-				};
+				}
 			},
 			drawError(obj) {},
 			mapClick(e) {
@@ -207,13 +489,14 @@
 			},
 			onLoad(e) {},
 			crossHairClick(e) {
-
+				// console.log(e);
 			},
 			mapMoveend(e) {
-
+				// alert(1);
+				// console.log(e);
 			},
 			loadDrawPolygonEvent(e) {
-				this.mapTool = e;
+				this.mapTool = e
 			},
 			clusterCallback({
 				id,
@@ -223,30 +506,39 @@
 					this.showPolygon = {
 						id,
 						isShow
-					};
+					}
 					this.isCheckPoint = {
 						id,
 						isShow
-					};
-				}, 50);
+					}
+				}, 50)
 			},
 			changeSwitchMap(obj) {
 				if (obj.mapType == 2) {
-					this.gpsType = 0;
-					return;
+					this.gpsType = 0
+					return
 				}
-				this.gpsType = obj.mapType;
+				this.gpsType = obj.mapType
 			},
 			onClick() {
-				this.isRyMapTool = !this.isRyMapTool;
+				this.clearLiens=true;
 			},
-			onClick2() {
-				this.maxZoom = 28;
+				onClick2() {
+					// this.isShowObj={
+					// 	id:'ceshi1',
+					// 	show:true,
+					// }
+				this.isStop=true;
+				// alert(this.isStop);
+		
 			},
 			onClick3() {
-				this.maxZoom = 10;
+					// this.isShowObj={
+					// 	id:'ceshi1',
+					// 	show:false,
+					// }
+				 this.isStop=false;
 			},
-			
 		}
 	};
 </script>