ry-vue-map 0.2.2 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ry-vue-map",
-  "version": "0.2.2",
+  "version": "0.2.5",
   "private": false,
   "main": "lib/ryui.umd.min.js",
   "description": "ry公共组件库",
@@ -32,6 +32,10 @@
     "@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",
@@ -39,8 +43,9 @@
     "element-ui": "~2.15.6",
     "nprogress": "~0.2.0",
     "ol": "^6.14.1",
-    "ry-map": "^0.3.3",
+    "ry-map": "^0.4.1",
     "vue": "~2.6.14",
+    "vue-demi": "^0.13.11",
     "vue-router": "~3.5.2",
     "vue-server-renderer": "^2.6.14",
     "vuedraggable": "~2.24.3",
@@ -53,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

@@ -9,10 +9,14 @@ 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 RyOfflineMap from './maps/ryOfflineMap/index';
+import RyKMLs from './maps/ryKMLs/index';
+import RyKML from './maps/ryKML/index';
 // import "./fonts/iconfont.css";
 
 // 组件列表
-const components = [ RyMap,RyCrossHair,RyMapTool, RyPolygon,RyPolygons,RyClusters, RyPolygonGeo, RyClustersMarker,RyVectorMap,RyLines];
+const components = [RyMap,RyCrossHair,RyMapTool, RyPolygon,RyPolygons,RyClusters, RyPolygonGeo, RyClustersMarker,RyVectorMap,RyLines,RyStaticMap,RyOfflineMap,RyKMLs,RyKML];
 
 // 定义install
 const install = (Vue, options) => {

package/src/components/maps/models/ryKML/index.js

@@ -0,0 +1,29 @@
+
+import Base from '../base/base';
+
+export default class RyKMLDto extends Base {
+  // 多边形
+  model = {
+    type: Object,
+    default: () => null,
+  };
+
+  // 显示或隐藏
+  isShow = {
+    type: Boolean,
+    default: true,
+  };
+  
+  // 清除多边形以及标记
+  clear = {
+    type: Boolean,
+    default: false,
+  };
+
+  // 是否根据bbox 设为中心点
+  isFit = {
+    type: Boolean,
+    default: true,
+  };
+
+}

package/src/components/maps/models/ryKMLs/index.js

@@ -0,0 +1,41 @@
+
+import Base from '../base/base';
+
+export default class RyKMLDto extends Base {
+  // 多边形
+  modelArr = {
+    type: Array,
+    default: () => [],
+  };
+  // 插入
+  insert = {
+    type: Object,
+    default: () => null,
+  };
+
+  // 批量插入
+  inserts = {
+    type: Array,
+    default: () => [],
+  };
+
+  // 显示或隐藏所有所有
+  isShowAll = {
+    type: Boolean,
+    default: true,
+  };
+
+  
+  // 清除多边形以及标记
+  clear = {
+    type: Boolean,
+    default: false,
+  };
+
+  // 是否根据bbox 设为中心点
+  isFit = {
+    type: Boolean,
+    default: true,
+  };
+
+}

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/ryOfflineMap/map.js

@@ -0,0 +1,140 @@
+export default class MapDto {
+  constructor() {
+    this.mapType = {
+      type: Number,
+      default: 0,
+    };
+
+    this.layerType = {
+      type: Number,
+      default:2 ,
+    };
+
+
+     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.bindMapMoveend = {
+      type: Boolean,
+      default: false,
+    }
+
+    this.isDisabledSwitchMapTabEvent={
+			type: Boolean,
+			default: false,
+		};
+    
+    // 初始化编辑多边形
+    this.initModifyPolygon = {
+      type: [String, Object],
+      default: () => null,
+    };
+
+    // 地图中心点计算中心点距离 默认 单位m
+    this.m = {
+      type: Number,
+      default: () => 3000,
+    };
+
+    //切换地图的默认瓦片和类型
+    this.switchMapDefaultTypeOrLayer = {
+      type: Array,
+      default: ()=> null
+    }
+
+    //地图类型以及瓦片的数据结构
+    this.mapTypeAndLayer = {
+      type: Array,
+      default: () => [
+        {
+          id:0,
+          icon: 'el-icon--tianditu',
+          activeIcon: 'el-icon--tianditu-copy',
+          name: '天地图',
+          layer: [
+            {
+              id:0,
+              name:'地图'
+            },
+            {
+              id:1,
+              name:'卫星'
+            },
+            {
+              id:2,
+              name:'卫星组合'
+            }
+          ]
+        },
+        {
+          id:1,
+          icon: 'el-icon--gaode',
+          activeIcon: 'el-icon--gaode-copy',
+          name: '高德地图',
+          layer: [
+            {
+              id:0,
+              name:'地图'
+            },
+            {
+              id:1,
+              name:'卫星'
+            },
+            {
+              id:2,
+              name:'卫星组合'
+            }
+          ]
+        },
+        {
+          id:2,
+          icon: 'el-icon--Bing',
+          activeIcon: 'el-icon--Bing-copy',
+          name: 'Bing地图',
+          layer: [
+            {
+              id:1,
+              name:'卫星'
+            },
+            {
+              id:2,
+              name:'卫星组合'
+            }
+          ]
+        }
+      ]
+    }
+  }
+  isShowSwitchMap={
+  	type: Boolean,
+  	default: true,
+  }
+  
+   urls={
+  	type:  Array,
+  	default: ()=> [],
+   }
+
+    boundaryModel={
+    type: Object,
+  	default: ()=> null,
+   }
+
+}

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

@@ -0,0 +1,62 @@
+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: 18,
+    };
+
+    // 最小缩放率
+    this.minZoom = {
+      type: Number,
+      default: 1,
+    };
+
+    // 默认中心点数组
+    this.center = {
+      type: Array,
+      default: () => [116.40769, 39.89945],
+    };
+
+    // 投影方式
+
+    this.projection = {
+      type: String,
+      default: 'EPSG:4326',
+    };
+
+    // 二维数组 [[],[]] 根据多个中心点数组进行定位 fit  适合用于 多边形   marker  折线等
+    this.bbox = {
+      type: Array,
+      default: () => [],
+    };
+
+
+
+    // this.viewOptions = {
+    //   type: Object,
+    //   default: () => {
+    //     return {
+    //       projection: 'EPSG:4326',
+    //       center: [116.40769, 39.89945],
+    //       zoom: 18,
+    //       minZoom:1,
+    //       maxZoom:18
+    //     };
+    //   }
+    // }
+  }
+}

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/ryKML/index.js

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

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

@@ -0,0 +1,174 @@
+<template>
+</template>
+
+<script>
+	import {
+		fitNew,
+		GPS,
+		LKML,
+	} from 'ry-map';
+	import Dto from './../../models/ryKML/index.js';
+	export default {
+		name: 'RyKMLs',
+		props: {
+			...new Dto(),
+		},
+		data() {
+			return {
+				bbox: [],
+				bboxGCJ02: [],
+				kml: null,
+				lastType: -1,
+				url:null,
+				gcj02Url:null,
+			};
+		},
+		watch: {
+			model(val) {
+				this._remove();
+				if (!val.length) return;
+				this.model = val;
+				this.init(val);
+			},
+			clear(val) {
+				if (val) {
+					this._remove();
+				}
+			},
+			isShow(val) {
+				if (val) {
+					this.showAll();
+					return;
+				}
+				this.hideAll();
+			},
+		    gpsType(val) {
+				if (this.lastType == val) return;
+				this.gpsType = val;
+				this.lastType = val;
+				this.selectGPSAll(this.gpsType);
+			},
+
+		},
+
+		created() {
+			this.lastType = this.gpsType;
+			if(!this.model) return;
+			this.init(this.model);
+		},
+
+		methods: {
+			init(model) {
+				this._insert(model);
+				if(this.isFit){
+					setTimeout(() => {
+					this.setFit();			
+					}, 50);
+				}
+			
+			},
+			_insert(dto) {
+				const {
+					id,
+					url,
+					bbox,
+					is,
+					stroke,
+					fillColor,
+					zIndex,
+					width,
+					extractStyles,
+					gcj02Url
+				} = dto;
+				const lkml = new LKML({
+							id,
+							url: this.gpsType == 1 ? gcj02Url : url,
+							bbox,
+							is,
+							stroke,
+							fillColor,
+							zIndex,
+							width,
+						},
+						this.map,
+						extractStyles);
+					this.kml=lkml;
+					this.url=url;
+					this.gcj02Url=gcj02Url;
+				this.setBBOXArr(bbox);
+			},
+			setBBOXArr(bbox) {
+					this.bbox=bbox;
+			     	const _bboxGCJ02 = this.convertBBoxGCJ02(bbox);
+					this.bboxGCJ02=_bboxGCJ02;
+			},
+			setUrl(url) {
+	
+				if (this.kml) {
+				
+					this.kml.setUrl(url);
+				}
+			},
+			setFit() {
+			
+				if (!this.bbox.length || !this.map) return;
+				this.setFitFist(this.gpsType == 1 ? this.bboxGCJ02 : this.bbox);
+			},
+			// 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.kml) return;
+				this.kml.removeKML();
+				this.bbox = [];
+				this.bboxGCJ02 = [];
+				this.url=null;
+				this.gcj02Url=null;
+			},
+
+			selectGPSAll(type) {
+				const url = type == 1 ? this.gcj02Url : this.url;
+			    this.setUrl(url);
+			},
+
+			show() {
+				if(!this.kml) return;
+				this.kml.show();
+					if(this.isFit){
+					setTimeout(() => {
+					this.setFit();			
+					}, 50);
+				}
+			},
+
+			hide() {
+			    if(!this.kml) return;
+				this.kml.hide();
+			},
+
+		},
+	}
+</script>
+
+<style>
+</style>

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

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