ry-vue-map 0.6.13 → 0.6.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ry-vue-map",
-  "version": "0.6.13",
+  "version": "0.6.15",
   "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.4",
+    "ry-map": "^0.5.6",
     "vue": "~2.6.14",
     "vue-demi": "^0.13.11",
     "vue-router": "~3.5.2",

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

@@ -135,6 +135,18 @@ export default class MapDto {
   isShowSwitchMap={
   	type: Boolean,
   	default: true,
-  }
+  }
+
+  // 是否开启 放大时显示多边形中的文字
+  resolution={
+    type: Boolean,
+    default: false,
+  }
+
+   // 设定值zoom  用于判断当前zoom是否大于 15 默认值15
+   zoomedIn = {
+      type: Number,
+      default:17,
+   };
 
 }

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

@@ -118,11 +118,11 @@ export default class PolygonsDto extends Base {
     default: false,
   };
 
-  // 调校参数
-  correct={
-	  type:Number,
-	  default:0,
-  }
+  // // 调校参数
+  // correct={
+	 //  type:Number,
+	 //  default:0,
+  // }
 
   // // 是否开启 放大时显示多边形中的文字
   // declutter={

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

@@ -94,6 +94,9 @@
       },
       bindMapMoveend(val) {
         this._bingMapMoveend();
+      },
+      resolution(val){
+        this._bingResolution();
       },
       m(val) {
         this.m = val;
@@ -111,7 +114,8 @@
         lastMapType: 0,
         isFirstLoad: false,
         contextmenu: null,
-        dblClick: null,
+        dblClick: null,
+        resolutionFun:null,
       };
     },
 
@@ -183,7 +187,8 @@
 
             }
             this._bingMapEvent();
-            this._bingMapMoveend();
+            this._bingMapMoveend();
+            this._bingResolution();
             this._bindContextmenu();
             this._binddblClick();
             this.$emit('load', {
@@ -213,6 +218,15 @@
         } else {
           this._mapMoveend(true);
         }
+      },
+      _bingResolution(){
+        if(this.resolution){
+           this.bingResolutionEvent();
+        }
+        else {
+           this.bingResolutionEvent(true);
+        }
+
       },
       _bindContextmenu() {
         if (this.bindContextmenu) {
@@ -374,10 +388,36 @@
         } else {
           this.map.on('moveend', this.moveend);
         }
-      },
+      },
+
       loadDrawPolygonEvent(e) {
         this.$emit('loadDrawPolygonEvent', e);
-      }
+      },
+
+      bingResolutionEvent(isResolution = false){
+        const view =this.map.getView();
+        const zoomedIn = this.zoomedIn;
+        let isZoomedIn = view.getZoom() > zoomedIn;
+
+        this.resolutionFun= ()=> {
+          const currentZoom = view.getZoom();
+          if (currentZoom > zoomedIn && !isZoomedIn) {
+               isZoomedIn = true;
+               this.$emit('resolutionEvent', {zoom:currentZoom,status:isZoomedIn});
+          } else if (currentZoom <= zoomedIn && isZoomedIn) {
+               isZoomedIn = false;
+                this.$emit('resolutionEvent', {zoom:currentZoom,status:isZoomedIn});
+          }
+
+        };
+
+        if (isResolution) {
+          view.un('change:resolution',  this.resolutionFun);
+        } else {
+          view.on('change:resolution',  this.resolutionFun);
+        }
+
+      },
     }
   }
 </script>

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

@@ -73,10 +73,11 @@
       this.init();
     },
     methods: {
-      initPolygonText(polygon,text,center){
-          polygon.setShowText(true);
-          polygon.setText(text);
-          polygon.setCenter(center);
+      initPolygonText(polygon, obj) {
+              const {text, center, isShow} =obj;
+              polygon.setShowText(isShow);
+              polygon.setText(text);
+              polygon.setCenter(center);
       },
       init() {
         this.lastType=this.gpsType;
@@ -103,11 +104,11 @@
           this.setFit(this.gpsType==1 ? this.bboxGCJ02 : this.bbox);
         }
 
-        if(!this.isCheckPointHide && this.model.text){
-            if(centerArr && centerArr.length > 1){
-               this.initPolygonText(this.polygon,this.model.text,centerArr);
-            }
-          }
+        if(!this.isCheckPointHide){
+               this.initPolygonText(this.polygon,{text:this.model.text,center:centerArr,isShow:true});
+        }else{
+             this.initPolygonText(this.polygon,{text:this.model.text,center:centerArr,isShow:false});
+        }
 
 
         // if (this.model.text) {
@@ -239,9 +240,7 @@
         // }
       },
       setText(text) {
-        if (this.checkPoint) {
-          this.checkPoint.setText(text);
-        }
+         this.polygon.setText(text);
       },
       selectGPSAll(type){
         // if(this.checkPoint){

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

@@ -184,14 +184,19 @@
           this.polygonMap.set(val.id, polygon);
           const text = val.text;
           if (!this.isCheckPointHideAll && val.text) {
-            if (center && center.length > 1) {
-              this.initPolygonText(polygon, text, center);
-            }
+            this.initPolygonText(polygon, {text, center,isShow:false});
+          }
+          else if(!this.isCheckPointHideAll && val.isShowText !==undefined  && val.isShowText !==null && val.isShowText !== NaN){
+            this.initPolygonText(polygon, {text, center,isShow:val.isShowText});
+          }
+          else{
+             this.initPolygonText(polygon, {text, center,isShow:true});
           }
         }
       },
-      initPolygonText(polygon, text, center) {
-        polygon.setShowText(true);
+      initPolygonText(polygon, obj) {
+        const {text, center, isShow} =obj;
+        polygon.setShowText(isShow);
         polygon.setText(text);
         polygon.setCenter(center);
       },
@@ -366,26 +371,16 @@
       },
 
       _isCheckPointHide(val) {
-
         const id = val.id;
         if (this.polygonMap.has(id)) {
-          const polygonMap = this.polygonMap.get(id);
-          if (val.isShow) {
-            polygonMap.setTextVisible(true);
-            return;
-          }
-          polygonMap.setTextVisible(false);
+          const polygonMap = this.polygonMap.get(id).setTextVisible(val.isShow);
+          // if (val.isShow) {
+          //   polygonMap.setTextVisible(true);
+          //   return;
+          // }
+          // polygonMap.setTextVisible(false);
         }
 
-        // const id = val.id;
-        // if (this.checkPointMap.has(id)) {
-        //   const checkPoint = this.checkPointMap.get(id);
-        //   if (val.isShow) {
-        //     checkPoint.show();
-        //     return;
-        //   }
-        //   checkPoint.hide();
-        // }
       },
 
       _isCheckPointHides(arr) {
@@ -395,9 +390,9 @@
       },
 
       setText(id, text) {
-        if (this.checkPointMap.has(id)) {
-          const checkPoint = this.checkPointMap.get(id);
-          checkPoint.setText(text);
+        if (this.polygonMap.has(id)) {
+           const checkPoint = this.polygonMap.get(id);
+           checkPoint.setText(text);
         }
       },
       restBBOXArr() {

package/src/views/map/index.vue

@@ -1,16 +1,16 @@
 <template>
   <div class="map-style">
     <ry-map projection="EPSG:4326" :zoom="15" :minZoom="1" :maxZoom="28" :center="center" @load="load($event)"
-      :bindMapClick="true" @mapClick="mapClick($event)" 　:switchMapDefaultTypeOrLayer="[0,2]">
+      :bindMapClick="true" @mapClick="mapClick($event)" :resolution="true" @resolutionEvent="resolutionEvent($event)" 　:switchMapDefaultTypeOrLayer="[0,2]">
       <template #marker="{mapDto}">
         <!-- <ry-lines :isPlaybackTrackPoints="isPlaybackTrackPoints" :moveMarkerDto="moveMarkerDto" :map="mapDto.map"
           :isConneLine="false" :model="lineModel" :linenIsert="lineData" :isFit="true"></ry-lines> -->
       <!--  <RyWMSs v-if="wmsDtos.length" :map="mapDto.map" :modelArr="wmsDtos" /> -->
-        <ry-polygons :isShowAll="isShowField"  :isCheckPointHideAll="!isShowText" :map="mapDto.map" :isFit="true" :gpsType="0" :modelArr="modelArr" >
+        <ry-polygons :isShowAll="isShowField" :isCheckPointHide="testObj"  :isCheckPointHideAll="!isShowText" :map="mapDto.map" :isFit="true" :gpsType="0" :modelArr="modelArr" >
         </ry-polygons>
 
-        <ry-polygon :isShow="isShowField"  :isCheckPointHide="!isShowText" :map="mapDto.map" :isFit="true" :gpsType="0" :model="modelArr[0]" >
-            </ry-polygon>
+       <!-- <ry-polygon :isShow="isShowField"  :isCheckPointHide="!isShowText" :map="mapDto.map" :isFit="true" :gpsType="0" :model="modelArr[0]" >
+            </ry-polygon> -->
         <!--   <RyKMLs @loadingEvent="loadingEvent($event)" :map="mapDto.map" :modelArr="kmls" ref="kmls"></RyKMLs> -->
       </template>
 
@@ -84,8 +84,8 @@
     zIndex: 20,
     type: 1,
     text:'10 亩',
-    // isShowText: true,
-    declutter: true,
+    //isShowText: false,
+    // declutter: false,
   };
 
   const polygonModel2 = {
@@ -98,7 +98,7 @@
     type: 1,
     text:'11 亩',
     //isShowText: true,
-       declutter: true,
+       // declutter: true,
   };
 
   const polygonModel3 = {
@@ -111,7 +111,7 @@
     type: 1,
     text:'12 亩',
     //isShowText: true,
-    declutter: true,
+    // declutter: true,
   };
 
   const polygonModel4 = {
@@ -124,7 +124,7 @@
     type: 1,
     text:'13 亩',
     //isShowText: true,
-       declutter: true,
+       // declutter: true,
   };
 
 
@@ -151,7 +151,7 @@
           width: 16
         },
         isShowField:true,
-        isShowText:true,
+        isShowText:false,
         map: null,
         lMap: null,
         polygonColorObj: null,
@@ -163,7 +163,11 @@
         center: [120.2687149, 29.8142052],
         lineModel: ModelLineArr[0],
         lineData: null,
-        isPlaybackTrackPoints: false,
+        isPlaybackTrackPoints: false,
+        testObj:{
+          id:'ceshi1',
+          isShow:false,
+        },
         wmsDtos: [{
             url: 'https://geo.ryaims.com:8010/geoserver/daofeng/wms',
             id: 'daofeng',
@@ -252,8 +256,15 @@
         };
       },
       drawError(obj) {},
-      mapClick(e) {
-        // alert(e);
+      mapClick(e) {
+        console.log('e=====','e');
+        this.testObj={
+          id:'ceshi1',
+          // isShow:false,
+          isShow:!this.testObj.isShow,
+        };
+        // alert(e);
+
         // alert(e);
       },
       onLoad(e) {},
@@ -339,7 +350,11 @@
       },
       loadingEvent(e) {
         // alert(e);
-      }
+      },
+      resolutionEvent(obj){
+        console.log('obj=======',obj);
+        this.isShowText=obj.status;
+      },
 
     }
   };