ry-vue-map 0.6.2 → 0.6.3

package/README.MD

@@ -1,5 +1,5 @@
 # ryvuemap
-![ryui-version](https://img.shields.io/badge/ryvuemap-0.6.2-green)
+![ryui-version](https://img.shields.io/badge/ryvuemap-0.6.3-green)
 > ry公共组件库
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ry-vue-map",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "private": false,
   "main": "lib/ryui.umd.min.js",
   "description": "ry公共组件库",
@@ -45,7 +45,7 @@
     "kml-to-geojson": "^1.0.13",
     "nprogress": "~0.2.0",
     "ol": "^6.14.1",
-    "ry-map": "^0.5.2",
+    "ry-map": "^0.5.3",
     "vue": "~2.6.14",
     "vue-demi": "^0.13.11",
     "vue-router": "~3.5.2",

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

@@ -13,7 +13,7 @@ export default class RyKMLDto extends Base {
     type: Boolean,
     default: true,
   };
-  
+
   // 清除多边形以及标记
   clear = {
     type: Boolean,
@@ -24,6 +24,13 @@ export default class RyKMLDto extends Base {
   isFit = {
     type: Boolean,
     default: true,
+  };
+
+
+  // 异步加载KML时间默认100毫秒
+  time = {
+    type: Number,
+    default: 100,
   };
 
 }

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

@@ -1,4 +1,3 @@
-
 import Base from '../base/base';
 
 export default class RyKMLDto extends Base {
@@ -43,4 +42,10 @@ export default class RyKMLDto extends Base {
     type: Object,
     default: () => null,
   };
-}
+
+  // 异步加载KML时间默认100毫秒
+  time = {
+    type: Number,
+    default: 100,
+  };
+}

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

@@ -2,173 +2,175 @@
 </template>
 
 <script>
-	import {
-		fitNew,
-		GPS,
-		LKML,
-	} from 'ry-map';
-	import Dto from './../../models/ryKML/index.js';
-	export default {
-		name: 'RyKML',
-		props: {
-			...new Dto(),
-		},
-		data() {
-			return {
-				bbox: [],
-				bboxGCJ02: [],
-				kml: null,
-				lastType: -1,
-				url:null,
-				gcj02Url:null,
-			};
-		},
-		watch: {
-			model(val) {
-				this._remove();
-				if (!val) 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);
-			},
+  import {
+    fitNew,
+    GPS,
+    LKML,
+  } from 'ry-map';
+  import Dto from './../../models/ryKML/index.js';
+  export default {
+    name: 'RyKML',
+    props: {
+      ...new Dto(),
+    },
+    data() {
+      return {
+        bbox: [],
+        bboxGCJ02: [],
+        kml: null,
+        lastType: -1,
+        url: null,
+        gcj02Url: null,
+      };
+    },
+    watch: {
+      model(val) {
+        this._remove();
+        if (!val) 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);
-		},
+    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;
-			},
+    methods: {
+      async init(model) {
+        await this._insert(model);
+        if (this.isFit) {
+          setTimeout(() => {
+             this.setFit();
+          }, 50);
+        }
 
-			_remove() {
-				if(!this.kml) return;
-				this.kml.removeKML();
-				this.bbox = [];
-				this.bboxGCJ02 = [];
-				this.url=null;
-				this.gcj02Url=null;
-			},
+      },
+      async _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;
+        await lkml.init(this.time);
+        if (id) {
+           lkml.setId(id);
+        }
+        this.setBBOXArr(lkml.getExtent());
+      },
+      setBBOXArr(bbox) {
+        this.bbox = bbox;
+        const _bboxGCJ02 = this.convertBBoxGCJ02(bbox);
+        this.bboxGCJ02 = _bboxGCJ02;
+      },
+      setUrl(url) {
 
-			selectGPSAll(type) {
-				const url = type == 1 ? this.gcj02Url : this.url;
-			    this.setUrl(url);
-			},
+        if (this.kml) {
 
-			show() {
-				if(!this.kml) return;
-				this.kml.show();
-					if(this.isFit){
-					setTimeout(() => {
-					this.setFit();			
-					}, 50);
-				}
-			},
+          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;
+      },
 
-			hide() {
-			    if(!this.kml) return;
-				this.kml.hide();
-			},
+      _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>
+</style>

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

@@ -72,29 +72,24 @@
 
     },
 
-    created() {
-      this.lastType = this.gpsType;
-      if(this.modelArr.length){
-         this.init(this.modelArr);
-         return;
-      }
-      if(this.inserts.length){
-        this.init(this.inserts);
+    async created() {
+      this.lastType = this.gpsType;
+      if (this.modelArr.length) {
+       await this.init(this.modelArr);
+        return;
+      }
+      if (this.inserts.length) {
+       await this.init(this.inserts);
       }
     },
 
     methods: {
-      init(arr) {
-        // this._insert();
+      async init(arr) {
         if (!arr || !arr.length) return;
-        arr.forEach(val => {
-          this._insert(val);
-        });
-        if (this.isFit) {
-          setTimeout(() => {
-            this.setFit();
-          }, 50);
+        for (let i = 0; i < arr.length; i++) {
+          await this._insert(arr[i]);
         }
+        this.setFit();
       },
       _inserts(arr) {
         this.lastType = this.gpsType;
@@ -107,7 +102,7 @@
           }, 50);
         }
       },
-      _insert(dto) {
+      async _insert(dto) {
         const {
           id,
           url,
@@ -133,13 +128,19 @@
             },
             this.map,
             extractStyles);
+           await lkml.init(this.time);
+          if (id) {
+            lkml.setId(id);
+          }
           this.kmlMap.set(id, lkml);
           this.urls.set(id, url);
+
           if (gcj02Url) {
             this.gcj02Urls.set(id, gcj02Url);
-          }
-        }
-        this.setBBOXArr(dto.id, bbox);
+          }
+          this.setBBOXArr(dto.id, lkml.getExtent());
+        }
+
       },
       // 刷新
       _setZoom() {
@@ -171,7 +172,7 @@
         }
         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]];