ry-vue-map 0.2.1 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ry-vue-map",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "private": false,
   "main": "lib/ryui.umd.min.js",
   "description": "ry公共组件库",
@@ -32,14 +32,20 @@
     "@form-create/element-ui": "^2.5.20",
     "@turf/helpers": "^6.5.0",
     "@turf/line-intersect": "^6.5.0",
+    "@vue-office/docx": "^0.2.4",
+    "@vue-office/excel": "^0.2.4",
+    "@vue-office/pdf": "^0.2.4",
+    "@vue/composition-api": "^1.7.1",
     "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.8",
     "vue": "~2.6.14",
+    "vue-demi": "^0.13.11",
     "vue-router": "~3.5.2",
     "vue-server-renderer": "^2.6.14",
     "vuedraggable": "~2.24.3",
@@ -52,7 +58,6 @@
     "@vue/cli-plugin-router": "~4.4.6",
     "@vue/cli-plugin-vuex": "~4.4.6",
     "@vue/cli-service": "~4.4.6",
-    "@vue/composition-api": "~1.2.2",
     "babel-eslint": "~10.1.0",
     "compression-webpack-plugin": "~6.1.1",
     "eslint": "~6.8.0",

package/src/components/index.js

@@ -8,10 +8,12 @@ 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 RyStaticMap from './maps/ryStaticMap/index';
 // 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,RyStaticMap];
 
 // 定义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/models/ryMapTool/mapTool.js

@@ -1,5 +1,12 @@
 export default class MapToolDto {
 
+ 
+   //是否显示地图中的
+   isHideAreaAndKM = {
+    type:Boolean,
+    default:false,
+  };
+
   //切换地图控件top值
   switchMapPosTop = {
     type:Number,

package/src/components/maps/models/ryStaticMap/map.js

@@ -0,0 +1,36 @@
+export default class MapDto {
+  constructor() {
+  
+
+     this.isSwitchMapTool = {
+     type: Boolean,
+     default:  true,
+   };
+
+    this.isRyMapTool = {
+      type: Boolean,
+      default: false,
+    };
+
+    this.isRight = {
+      type: Boolean,
+      default: false,
+    };
+
+    this.bindMapClick = {
+      type: Boolean,
+      default: false,
+    }
+
+
+    // 初始化编辑多边形
+    this.initModifyPolygon = {
+      type: [String, Object],
+      default: () => null,
+    };
+
+
+  }
+
+  
+}

package/src/components/maps/models/ryStaticMap/view.js

@@ -0,0 +1,66 @@
+const viewOptions = {
+  projection: 'EPSG:4326',
+  center: [116.40769, 39.89945],
+  zoom: 18
+}
+
+export default class MapDto {
+  constructor(opt) {
+
+    // 默认缩放率
+    this.zoom = {
+      type: Number,
+      default: 10,
+    };
+
+    // 最大缩放率
+    this.maxZoom = {
+      type: Number,
+      default: 28,
+    };
+
+    // 最小缩放率
+    this.minZoom = {
+      type: Number,
+      default: 1,
+    };
+
+    // 默认中心点数组
+    this.center = {
+      type: Array,
+      default: () => [2575, 1450],
+    };
+
+    // 二维数组 [[],[]] 根据多个中心点数组进行定位 fit  适合用于 多边形   marker  折线等
+    this.bbox = {
+      type: Array,
+      default: () => [],
+    };
+
+    this.url = {
+      type: String,
+      default: () => null,
+    };
+
+   this.imageSize={
+    type: Array,
+    default: () => [0, 0, 7247, 3562],
+   }
+  this.imageExtent={
+    type: Array,
+    default: () =>[500, 400, 5000, 2700],
+  }
+    // this.viewOptions = {
+    //   type: Object,
+    //   default: () => {
+    //     return {
+    //       projection: 'EPSG:4326',
+    //       center: [116.40769, 39.89945],
+    //       zoom: 18,
+    //       minZoom:1,
+    //       maxZoom:18
+    //     };
+    //   }
+    // }
+  }
+}

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

@@ -11,7 +11,7 @@
           stroke: 'rgba(23, 168, 162, 0.56)',
           width: 3,
           // id:'ceshi',
-          text:'快'
+          text:'块'
         };
   import {
      CheckPoint,
@@ -70,7 +70,7 @@
         checkPointArr: new Map(),
         currentArr: Array(),
         fpModelArr: [],
-        featurePolygon: new FeaturePolygon(this.gpsType),
+        featurePolygon:null,
         multiPolygonMap: new Map(),
         // model: new multiPolygonGeoJsonModel(),
         scan: new GrahamScan(),
@@ -80,6 +80,7 @@
     beforeDestroy() {
       this.clear();
     },
+	
     watch: {
       modelArr(data) {
         if (this.map) {
@@ -93,6 +94,7 @@
       }
     },
     created(){
+			this.featurePolygon = new FeaturePolygon(this.gpsType);
       this.clear();
       this.init();
     },

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;
 
@@ -282,7 +283,8 @@
 							m,
 							oversteSetValue: m >= this.m ? true : false,
 							x,
-							y
+							y,
+							e
 						});
 
 						if (m >= this.m) {
@@ -295,7 +297,8 @@
 						m,
 						oversteSetValue: false,
 						x,
-						y
+						y,
+						e
 					});
 				}
 				if (isMoveend) {

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

@@ -90,9 +90,9 @@
       isCrossHair(val) {
         this.isCrossHair = val;
       },
-      gpsType(val){
-        if(this.lastType == val) return;
-        this.gpsType=val;
+      gpsType(val){
+        if(this.lastType == val) return;
+        this.gpsType=val;
         this.lastType=val;
          if(this.drawPolygon){
            this.drawPolygon.type=val;
@@ -104,7 +104,7 @@
     data() {
       return {
         drawPolygon: null,
-        isEdit:true,
+        isEdit:true,
         lastType:-1,
       };
     },
@@ -122,7 +122,7 @@
           bbox
         } = this._serializeGeoJson();
         this.onDelete();
-        this.drawPolygon = this.lMap.onCreatePolygon(() => {});
+        this.drawPolygon = this.lMap.onCreatePolygon(() => {},this.isHideAreaAndKM);
         this.lastType=this.gpsType;
         this.drawPolygon.type= this.gpsType;
         this.drawPolygon.initCoordinates(coordinates);
@@ -159,7 +159,7 @@
       onCreatePolygon() {
         if (this.lMap) {
           // this.drawPolygon=null;
-          this.drawPolygon = this.lMap.onCreatePolygon(() => {});
+          this.drawPolygon = this.lMap.onCreatePolygon(() => {},this.isHideAreaAndKM);
            this.lastType=this.gpsType;
           this.drawPolygon.type=this.gpsType;
           this.$emit('loadDrawPolygonEvent', this);