ry-vue-map 0.2.3 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ry-vue-map",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "private": false,
   "main": "lib/ryui.umd.min.js",
   "description": "ry公共组件库",
@@ -43,7 +43,7 @@
     "element-ui": "~2.15.6",
     "nprogress": "~0.2.0",
     "ol": "^6.14.1",
-    "ry-map": "^0.3.8",
+    "ry-map": "^0.4.1",
     "vue": "~2.6.14",
     "vue-demi": "^0.13.11",
     "vue-router": "~3.5.2",

package/src/components/index.js

@@ -10,10 +10,13 @@ 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,RyStaticMap];
+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/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/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;

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

@@ -0,0 +1,217 @@
+<template>
+</template>
+
+<script>
+	import {
+		fitNew,
+		GPS,
+		LKML,
+	} from 'ry-map';
+	import Dto from './../../models/ryKMLs/index.js';
+	export default {
+		name: 'RyKMLs',
+		props: {
+			...new Dto(),
+		},
+		data() {
+			return {
+				bbox: [],
+				bboxMap: new Map(),
+				bboxGCJ02: [],
+				bboxMapGCJ02: new Map(),
+				kmlMap: new Map(),
+				isCreate: true,
+				lastType: -1,
+				urls: new Map(),
+				gcj02Urls: new Map(),
+			};
+		},
+		watch: {
+			modelArr(val) {
+				this._remove();
+				if (!val.length) return;
+				this.modelArr = val;
+				this.init(val);
+			},
+			gpsType(val) {
+				if (this.lastType == val) return;
+				this.gpsType = val;
+				this.lastType = val;
+				this.selectGPSAll(this.gpsType);
+			},
+			insert(val) {
+				this.insert = val;
+				this._insert(val);
+			    if(this.isFit){
+					setTimeout(() => {
+					this.setFit();			
+					}, 50);
+				}
+			},
+			inserts(val) {
+				this.inserts = val;
+				this._inserts(val);
+			},
+			clear(val) {
+				if (val) {
+					this._remove();
+				}
+			},
+			isShowAll(val) {
+				if (val) {
+					this.showAll();
+					return;
+				}
+				this.hideAll();
+			},
+
+		},
+
+		created() {
+			this.lastType = this.gpsType;
+			this.init(this.modelArr);
+		},
+
+		methods: {
+			init(arr) {
+				// this._insert();
+				if (!arr || !arr.length) return;
+				arr.forEach(val => {
+					this._insert(val);
+				});
+				if(this.isFit){
+					setTimeout(() => {
+					this.setFit();			
+					}, 50);
+				};
+			},
+			_inserts(arr) {
+				this.lastType = this.gpsType;
+				arr.forEach(val => {
+					this._insert(val, false);
+				});
+				if(this.isFit){
+					setTimeout(() => {
+					this.setFit();			
+					}, 50);
+				}
+			},
+			_insert(dto) {
+				const {
+					id,
+					url,
+					bbox,
+					is,
+					stroke,
+					fillColor,
+					zIndex,
+					width,
+					extractStyles,
+					gcj02Url
+				} = dto;
+				if (!this.kmlMap.has(id)) {
+					const lkml = new LKML({
+							id,
+							url: this.gpsType == 1 ? gcj02Url : url,
+							bbox,
+							is,
+							stroke,
+							fillColor,
+							zIndex,
+							width,
+						},
+						this.map,
+						extractStyles);
+					this.kmlMap.set(id, lkml);
+					this.urls.set(id, url);
+					if (gcj02Url) {
+						this.gcj02Urls.set(id, gcj02Url);
+					}
+				}
+				this.setBBOXArr(dto.id, bbox);
+			},
+			setBBOXArr(id, bbox) {
+				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);
+				}
+			},
+			setUrl(id, url) {
+				if (this.kmlMap.has(id)) {
+					this.kmlMap.get(id).setUrl(url);
+				}
+			},
+			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() {
+				this.kmlMap.forEach(val => {
+					val.removeKML();
+					val = null;
+				});
+				this.kmlMap.clear();
+				this.bboxMap.clear();
+				this.bbox = [];
+				this.bboxGCJ02 = [];
+				this.bboxMapGCJ02.clear();
+				this.urls.clear();
+				this.gcj02Urls.clear();
+			},
+
+			selectGPSAll(type) {
+				const arrs = type == 1 ? this.gcj02Urls : this.urls;
+				arrs.forEach((url, key) => {
+					this.setUrl(key, url);
+				});
+			},
+
+			showAll() {
+				this.kmlMap.forEach(val => val.show());
+				if (this.restFit) {
+					this._restFit();
+				}
+			},
+
+			hideAll() {
+				this.kmlMap.forEach(val => val.hide());
+			},
+
+		},
+	}
+</script>
+
+<style>
+</style>

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

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