ry-vue-map 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ry-vue-map",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "private": false,
   "main": "lib/ryui.umd.min.js",
   "description": "ry公共组件库",
@@ -35,10 +35,11 @@
     "axios": "~0.21.1",
     "core-js": "~3.15.2",
     "countup.js": "~2.0.7",
+    "dayjs": "^1.11.7",
     "element-ui": "~2.15.6",
     "nprogress": "~0.2.0",
     "ol": "^6.14.1",
-    "ry-map": "^0.3.2",
+    "ry-map": "^0.3.3",
     "vue": "~2.6.14",
     "vue-router": "~3.5.2",
     "vue-server-renderer": "^2.6.14",

package/src/components/index.js

@@ -8,10 +8,11 @@ import RyClusters from './maps/ryClusters';
 import RyClustersMarker from './maps/ryClustersMarker';
 import RyPolygonGeo from './maps/ryPolygonGeo';
 import RyVectorMap from './maps/ryVectorMap';
+import RyLines from './maps/ryLines';
 // import "./fonts/iconfont.css";
 
 // 组件列表
-const components = [ RyMap,RyCrossHair,RyMapTool, RyPolygon,RyPolygons,RyClusters, RyPolygonGeo, RyClustersMarker,RyVectorMap];
+const components = [ RyMap,RyCrossHair,RyMapTool, RyPolygon,RyPolygons,RyClusters, RyPolygonGeo, RyClustersMarker,RyVectorMap,RyLines];
 
 // 定义install
 const install = (Vue, options) => {

package/src/components/maps/models/ryLines/ryLines.js

@@ -0,0 +1,73 @@
+import Base from './../base/base';
+
+const _lineDto = {
+	color: 'red',
+	width: 2,
+	zIndex: 1,
+};
+
+export default class LineDto extends Base {
+
+	// 折线数据
+	model = {
+		type: Object,
+		default: () => null,
+	};
+
+	// 批量插入数据
+	linenIsert = {
+		type: Object,
+		default: () => null,
+	};
+
+	// 是否根据bbox 设为中心点
+	isLineFit = {
+		type: Boolean,
+		default: true,
+	};
+
+	// 追加点
+	lineAppend = {
+		type: Array,
+		default: () => [],
+	};
+
+	startMarkerDto = {
+		type: Object,
+		default: () => null,
+	};
+
+	// 结束marker数据结构
+
+	endMarkerDto = {
+		type: Object,
+		default: () => null
+	};
+
+	// 轨迹回放中心点数据结构
+
+	moveMarkerDto = {
+		type: Object,
+		default: () => null
+	};
+
+
+	clearLiens = {
+		type: Boolean,
+		default: false,
+	};
+
+
+	endMarkerPoint = {
+		type: Array,
+		default: () => []
+	};
+
+
+
+	lineDto = {
+		type: Object,
+		default: () => _lineDto
+	}
+
+}

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

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

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

@@ -0,0 +1,226 @@
+<template>
+</template>
+
+<script>
+	import {
+		Polyline,
+		LMarker,
+		getCenterPoint,
+		fitNew,
+		getLngAndLatMaxMin,
+		GPS,
+		AM,
+	} from 'ry-map';
+	import Dto from './../../models/ryLines/ryLines.js';
+	export default {
+		name: 'RyLines',
+		props: {
+			...new Dto(),
+		},
+		data() {
+			return {
+				lines: null,
+				checkPoint: null,
+				bbox: [],
+				bboxGCJ02: [],
+				lastType: -1,
+				lastLinesDto: null,
+				moveMarker: null,
+				endMarker: null,
+				startMarker: null,
+				pineArr: [],
+				lastLineX: 0,
+				lastLineY: 0,
+				cachePointArr: new Array(),
+				drawingEnd: false,
+				isFist: true,
+				lastColor: null,
+				am: new AM()
+			};
+		},
+		watch: {
+			model(val) {
+				this.init();
+			},
+			linenIsert(val) {
+				if (!this.map || !val) return;
+				this._insertLineAndMarker(val);
+			},
+			gpsType(val) {
+
+			},
+			clearLiens(val) {
+				if (val) {
+					this.clearLine();
+				}
+			},
+			lineAppend(val) {
+				if (val.length > 0 && this.map) {
+					this.appendCoordinate(val);
+					this.setMarkerPoint(this.endMarker, val);
+				}
+			}
+		},
+		created() {
+			this.init();
+		},
+		methods: {
+			init() {
+				if (!this.map) return;
+				this.clearLine();
+				if (!this.model) return;
+				this.lastType = this.gpsType;
+				this._insertLineAndMarker(this.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);
+					const line = this.createPolyline(val);
+					const len = arr.length - 1;
+					this.setMarkerPoint(this.endMarker, arr[len]);
+					this.restLastData(arr);
+					this.pineArr.push(line);
+				 return;
+				}
+				arr.forEach(r => {
+					this.appendCoordinate(r);
+				});
+				const len = arr.length - 1;
+				this.setMarkerPoint(this.endMarker, arr[len]);
+				this.restLastData(arr);
+			},
+			async calculateLineBBOX(arr) {
+				return await new Promise(r => {
+					arr.forEach(r => {
+						this.am.getLngAndLatMaxMin({
+							X: r[0],
+							Y: r[1]
+						});
+					});
+					const amGpsArr = this.am.getLngLats();
+					fitNew(this.map, [
+						[amGpsArr[0], amGpsArr[1]],
+						[amGpsArr[2], amGpsArr[3]]
+					]);
+					r();
+				});
+			},
+			initMarker(arr) {
+
+				if (!this.startMarkerDto && !this.endMarkerDto) return;
+				if (!this.startMarker && !this.endMarker) {
+					this.startMarker = this.createStartMarker(this.startMarkerDto, arr);
+					this.endMarker = this.createStartMarker(this.endMarkerDto);
+				}
+			},
+			setMarkerPoint(marker, points) {
+				if (marker && points.length > 1) {
+					marker.setPosition(points, this.gpsType);
+				}
+			},
+			restLastData(arr) {
+				if (arr.length > 0) {
+					const [x, y] = arr[arr.length - 1];
+					this.lastLineX = x;
+					this.lastLineY = y;
+				}
+			},
+			_insertPoint(val) {
+				if (this.lastLineX > 0 && this.lastLineY > 0 && val) {
+					val.pointArr.unshift([this.lastLineX, this.lastLineY]);
+				}
+			},
+			createPolyline(polylineModel = {
+				color: 'rgb(0,0,255)',
+				width: 2,
+				pointArr: [],
+				zIndex: 1000,
+			}) {
+				return new Polyline({
+					...polylineModel,
+					type: this.gpsType
+				}, this.map);
+			},
+
+			createStartMarker({
+				offset,
+				url,
+				width,
+				height
+			}, points = []) {
+				const marker = new LMarker(url, width, height);
+				marker.setOffset(offset);
+				if (points.length) {
+					marker.setPosition(points, this.gpsType);
+				}
+				this.map.addOverlay(marker.getMarker());
+				return marker;
+			},
+
+
+			getLngLatGCJ02(pointArr) {
+				const arr = [];
+				pointArr.forEach(r => {
+					const {
+						lon,
+						lat
+					} = GPS.gcj_encrypt(r[0], r[1]);
+					arr.push([lon, lat]);
+				});
+				return arr;
+			},
+
+			removeLines() {
+				this.pineArr.forEach(val => {
+					val.removePolyline();
+				});
+				this.pineArr = [];
+			},
+			removeLineMarker() {
+				if (!this.map) return;
+				if (this.endMarker) {
+					this.map.removeOverlay(this.endMarker.getMarker());
+				}
+				if (this.startMarker) {
+					this.map.removeOverlay(this.startMarker.getMarker());
+				}
+				if (this.moveMarker) {
+					this.map.removeOverlay(this.moveMarker.getMarker());
+				}
+				this.moveMarker = null;
+				this.endMarker = null;
+				this.startMarker = null;
+			},
+			clearLine() {
+				this.removeLines();
+				this.removeLineMarker();
+				this.cachePointArr = [];
+				this.lastColor = null;
+				this.lastLineX = 0;
+				this.lastLineY = 0;
+				this.am = null;
+				this.am = new AM();
+			},
+			appendCoordinate(coordinate = []) {
+				if (!coordinate.length) return;
+				if (!this.pineArr.length) {
+                       this._insertLineAndMarker({...this.lineDto,pointArr:[coordinate],isAppend: false});
+				};
+				const line = this.pineArr[this.pineArr.length - 1];
+				line.appendCoordinate(coordinate);
+			},
+			selectGPSAll(type) {
+
+			},
+		}
+	}
+</script>
+
+<style>
+</style>

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

@@ -171,6 +171,7 @@
 					type: this.mapType,
 					layerType: this.layerType,
 					viewOptions: this.getViewOptions(),
+					
 					callback: (map,layers) => {
 						this.map = map;
 

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

@@ -7,7 +7,7 @@
     CheckPoint,
     getCenterPoint,
     fitNew,
-    getLngAndLatMaxMin,
+    getLngAndLatMaxMin,
     GPS,
   } from 'ry-map';
   import Dto from './../../models/ryPolygons/ryPolygons.js';
@@ -19,12 +19,12 @@
     data() {
       return {
         bbox: [],
-        bboxMap: new Map(),
-        bboxGCJ02:[],
+        bboxMap: new Map(),
+        bboxGCJ02:[],
         bboxMapGCJ02: new Map(),
         polygonMap: new Map(),
-        checkPointMap: new Map(),
-        isCreate:true,
+        checkPointMap: new Map(),
+        isCreate:true,
         lastType:-1,
       };
     },
@@ -124,11 +124,11 @@
         }
       },
       gpsType(val){
-         if(this.lastType == val) return;
-         this.gpsType=val;
+         if(this.lastType == val) return;
+         this.gpsType=val;
          this.lastType=val;
          this.selectGPSAll(this.gpsType);
-      },
+      },
 
     },
     created() {
@@ -181,16 +181,16 @@
           this.polygonMap.set(val.id, polygon);
         }
       },
-      selectGPSAll(type){
+      selectGPSAll(type){
 
-        this.polygonMap.forEach(val=> {
-             val.selectGPS(type);
-        });
-
-        this.checkPointMap.forEach(val => {
-             val.selectGPS(type);
+        this.polygonMap.forEach(val=> {
+             val.selectGPS(type);
         });
-      },
+
+        this.checkPointMap.forEach(val => {
+             val.selectGPS(type);
+        });
+      },
 
       initCheckPoint(val, center) {
         if (!this.checkPointMap.has(val.id) && val.text) {
@@ -202,11 +202,11 @@
         if (!this.bboxMap.has(id)) {
           this.bbox.push(bbox);
           this.bboxMap.set(id, bbox);
-        }
-        if(!this.bboxMapGCJ02.has(id)){
-          const _bboxGCJ02 =this.convertBBoxGCJ02(bbox);
-          this.bboxGCJ02.push(_bboxGCJ02);
-          this.bboxMapGCJ02.set(id,_bboxGCJ02);
+        }
+        if(!this.bboxMapGCJ02.has(id)){
+          const _bboxGCJ02 =this.convertBBoxGCJ02(bbox);
+          this.bboxGCJ02.push(_bboxGCJ02);
+          this.bboxMapGCJ02.set(id,_bboxGCJ02);
         }
       },
       setFit() {
@@ -289,8 +289,8 @@
         this.checkPointMap.clear();
         this.polygonMap.clear();
         this.bboxMap.clear();
-        this.bbox = [];
-        this.bboxGCJ02=[];
+        this.bbox = [];
+        this.bboxGCJ02=[];
         this.bboxMapGCJ02.clear();
       },
 
@@ -374,13 +374,13 @@
         }
       },
       restBBOXArr() {
-        this.bbox = [];
+        this.bbox = [];
         this.bboxGCJ02=[];
         this.bboxMap.forEach(val => {
           this.bbox.push(val);
-        });
-        this.bboxMapGCJ02.forEach(val => {
-           this.bboxGCJ02.push(val);
+        });
+        this.bboxMapGCJ02.forEach(val => {
+           this.bboxGCJ02.push(val);
         });
       },
       removePolygonsAndCheckPoints(ids) {
@@ -409,23 +409,23 @@
 
         if (this.bboxMap.has(id)) {
           this.bboxMap.delete(id);
-        }
-
-        if (this.bboxMapGCJ02.has(id)) {
-          this.bboxMapGCJ02.delete(id);
+        }
+
+        if (this.bboxMapGCJ02.has(id)) {
+          this.bboxMapGCJ02.delete(id);
         }
       },
       _ranges(ids) {
         const arr = [];
-        ids.forEach(val => {
+        ids.forEach(val => {
 
           if (this.bboxMap.has(val) && this.gpsType!=1) {
             const bbox = this.bboxMap.get(val);
             arr.push(bbox);
-          }else if (this.bboxMapGCJ02.has(val) && this.gpsType==1){
-            const bbox = this.bboxMapGCJ02.get(val);
-            arr.push(bbox);
-          }
+          }else if (this.bboxMapGCJ02.has(val) && this.gpsType==1){
+            const bbox = this.bboxMapGCJ02.get(val);
+            arr.push(bbox);
+          }
 
         });
         if (arr.length) {
@@ -437,9 +437,9 @@
         if (this.bboxMap.has(id)  && this.gpsType!=1) {
           const bbox = this.bboxMap.get(id);
           fitNew(this.map, [bbox]);
-        }else if(this.bboxMapGCJ02.has(id) && this.gpsType==1){
-          const bbox = this.bboxMapGCJ02.get(id);
-          fitNew(this.map, [bbox]);
+        }else if(this.bboxMapGCJ02.has(id) && this.gpsType==1){
+          const bbox = this.bboxMapGCJ02.get(id);
+          fitNew(this.map, [bbox]);
         }
       },
       _insert(val, isLoad) {
@@ -463,7 +463,7 @@
         }
       },
       // 批量插入多边形
-      _inserts(arr) {
+      _inserts(arr) {
         this.lastType=this.gpsType;
         arr.forEach(val => {
           this._insert(val, false);
@@ -476,26 +476,26 @@
         this.$emit('onLoad', {
           polygonMap: this.polygonMap,
           checkPointMap: this.checkPointMap,
-          bboxMap: this.bboxMap,
+          bboxMap: this.bboxMap,
           bboxMapGCJ02:this.bboxMapGCJ02
         });
       },
       _restFit() {
-        let bbox = [];
-        if(this.gpsType !=1){
-           this.bboxMap.forEach((val, key) => {
-             if (this.isShowPolygons.findIndex(r => r.id == key) === -1) {
-               bbox.push(this.bboxMap.get(key));
-             }
-           });
-        }else if(this.gpsType ==1){
-          this.bboxMapGCJ02.forEach((val, key) => {
-            if (this.isShowPolygons.findIndex(r => r.id == key) === -1) {
-              bbox.push(this.bboxMapGCJ02.get(key));
-            }
-          });
-        }
-
+        let bbox = [];
+        if(this.gpsType !=1){
+           this.bboxMap.forEach((val, key) => {
+             if (this.isShowPolygons.findIndex(r => r.id == key) === -1) {
+               bbox.push(this.bboxMap.get(key));
+             }
+           });
+        }else if(this.gpsType ==1){
+          this.bboxMapGCJ02.forEach((val, key) => {
+            if (this.isShowPolygons.findIndex(r => r.id == key) === -1) {
+              bbox.push(this.bboxMapGCJ02.get(key));
+            }
+          });
+        }
+
 
         if (bbox.length) {
           if(bbox.length > 1){
@@ -504,17 +504,17 @@
              this.setFitFist(bbox[0]);
           }
         }
-      },
-      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;
-      },
+      },
+      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;
+      },
 
     },
   }

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

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