ry-vue-map 0.6.0 → 0.6.2

package/package.json

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

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

@@ -84,6 +84,12 @@ export default class LineDto extends Base {
 		default: () => _lineDto
 	}
 
+	
+	isShowAll = {
+		type: Boolean,
+		default: true,
+	};
+
 
 
 }

package/src/components/maps/models/ryMapTool/mapTool.js

@@ -1,6 +1,6 @@
 export default class MapToolDto {
 
- 
+
    //是否显示地图中的
    isHideAreaAndKM = {
     type:Boolean,
@@ -108,5 +108,10 @@ export default class MapToolDto {
     type: Number,
     default: 0,
   };
-
+
+ // 绘制工具 图层级别
+ drawZIndex={
+   type: Number,
+   default: 1,
+ }
 }

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

@@ -119,7 +119,17 @@
 				delete this.marks2[this.len];
 				this.marks = this.marks2;
 
-			}
+			},
+			isShowAll(val){
+              if(!val){
+				this.hideAll();
+				this.hideMarker();
+			    return;  
+			  }
+			  this.showAll();
+			  this.showMarker();
+			},
+
 			// isPlayback(val){
 			// 	if(val){
 			//      this.trackPlayback();
@@ -311,6 +321,38 @@
 				});
 				this.pineArr = [];
 			},
+			showAll(){
+				this.pineArr.forEach(val => {
+					val.show();
+				});
+			},
+			hideAll(){
+				this.pineArr.forEach(val => {
+					val.hide();
+				});
+			},
+			showMarker(){
+				if (this.endMarker) {
+					this.endMarker.show();
+				}
+				if (this.startMarker) {
+					this.startMarker.show();
+				}
+				if (this.moveMarker) {
+					this.moveMarker.show();
+				}
+			},
+			hideMarker(){
+                if (this.endMarker) {
+					this.endMarker.hide();
+				}
+				if (this.startMarker) {
+					this.startMarker.hide();
+				}
+				if (this.moveMarker) {
+					this.moveMarker.hide();
+				}
+			},
 			removeLineMarker() {
 				if (!this.map) return;
 				if (this.endMarker) {

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

@@ -161,7 +161,9 @@
           this.setMaxZoom(18);
         }
       },
-      loadMap(el) {
+      loadMap(el) {
+
+        this.lMap.DrawZIndex=this.drawZIndex;
         this.lMap.init({
           el,
           type: this.mapType,
@@ -177,7 +179,6 @@
               const [x, y] = this.lMap.getCenter();
               this.lastX = x;
               this.lastY = y;
-              s
             } catch (err) {
 
             }
@@ -312,7 +313,6 @@
           this.$emit(event, _id);
         }
         evt.preventDefault();
-
       },
       _contextmenu(isBinClick) {
         if (!this.contextmenu) {
@@ -321,9 +321,7 @@
           };
         }
         if (isBinClick) {
-          this.map.un('contextmenu', event => {
-            event.preventDefault();
-          });
+          this.map.un('contextmenu', this.contextmenu);
           this.contextmenu = null;
         } else {
 

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

@@ -1,26 +1,25 @@
-
 <template>
   <div class="draw-tool-box">
 
     <template v-if="!isRight">
       <aside class="map-button-box" v-if="isShowDrawTool">
-       <el-button v-if="!hideAdd" class="ele-text-primary  el-icon--add" @click.stop="onCreatePolygon()">
-       </el-button>
-       <el-button v-if="!hidePoint" class="ele-text-primary  el-icon--dadian" @click.stop="onPointEvent()">
-       </el-button>
-       <el-button v-if="!hideCancel" class="ele-text-primary  el-icon--back" @click.stop="lMap.onCancel()">
-       </el-button>
-       <el-button v-if="!hideDelete" class="ele-text-primary  el-icon--ashbin" @click.stop="onDelete()">
-       </el-button>
-       <el-button v-if="!hideSave" class="ele-text-primary  el-icon--duihao" @click.stop="onSave()"></el-button>
+        <el-button v-if="!hideAdd" class="ele-text-primary  el-icon--add" @click.stop="onCreatePolygon()">
+        </el-button>
+        <el-button v-if="!hidePoint" class="ele-text-primary  el-icon--dadian" @click.stop="onPointEvent()">
+        </el-button>
+        <el-button v-if="!hideCancel" class="ele-text-primary  el-icon--back" @click.stop="lMap.onCancel()">
+        </el-button>
+        <el-button v-if="!hideDelete" class="ele-text-primary  el-icon--ashbin" @click.stop="onDelete()">
+        </el-button>
+        <el-button v-if="!hideSave" class="ele-text-primary  el-icon--duihao" @click.stop="onSave()"></el-button>
         <slot></slot>
       </aside>
 
       <aside class="map-control" v-if="isShowRangingTool" style="margin-left: 60px;">
-       <el-button v-if="!hideLine" class="ele-text-primary el-icon--changdu" @click.stop="onCreateLine()">
-       </el-button>
-       <el-button v-if="!hideArea" class="ele-text-primary  el-icon--mianji" @click.stop="onCreateArea()">
-       </el-button>
+        <el-button v-if="!hideLine" class="ele-text-primary el-icon--changdu" @click.stop="onCreateLine()">
+        </el-button>
+        <el-button v-if="!hideArea" class="ele-text-primary  el-icon--mianji" @click.stop="onCreateArea()">
+        </el-button>
       </aside>
     </template>
 
@@ -46,7 +45,7 @@
         <slot></slot>
       </aside>
     </template>
-    <ry-cross-hair v-if="lMap" 	   :isHide="isCrossHair"  :map="lMap.map" @click="onClick($event)"></ry-cross-hair>
+    <ry-cross-hair v-if="lMap" :isHide="isCrossHair" :map="lMap.map" @click="onClick($event)"></ry-cross-hair>
   </div>
 
 </template>
@@ -76,14 +75,14 @@
     watch: {
       initModifyPolygon(val) {
         this.initModifyPolygon = val;
-        this._init();
+        this._initPolygon();
       },
       isShowRangingTool(val) {
         this.isShowRangingTool = val;
       },
       isShowDrawTool(val) {
         this.isShowDrawTool = val;
-	    this.isCrossHair = val;
+        this.isCrossHair = val;
       },
       isRight(val) {
         this.isShowDrawTool = val;
@@ -91,22 +90,21 @@
       isCrossHair(val) {
         this.isCrossHair = val;
       },
-      gpsType(val){
-        if(this.lastType == val) return;
-        this.gpsType=val;
-        this.lastType=val;
-         if(this.drawPolygon){
-           this.drawPolygon.type=val;
-         }
-          this.selectGPSAll(this.gpsType);
+      gpsType(val) {
+        if (this.lastType == val) return;
+        this.gpsType = val;
+        this.lastType = val;
+        if (this.drawPolygon) {
+          this.drawPolygon.type = val;
+        }
+        this.selectGPSAll(this.gpsType);
       },
-
     },
     data() {
       return {
         drawPolygon: null,
-        isEdit:true,
-        lastType:-1,
+        isEdit: true,
+        lastType: -1,
       };
     },
     created() {
@@ -123,16 +121,16 @@
           bbox
         } = this._serializeGeoJson();
         this.onDelete();
-        this.drawPolygon = this.lMap.onCreatePolygon(() => {},this.isHideAreaAndKM);
-        this.lastType=this.gpsType;
-        this.drawPolygon.type= this.gpsType;
+        this.drawPolygon = this.lMap.onCreatePolygon(() => {}, this.isHideAreaAndKM);
+        this.lastType = this.gpsType;
+        this.drawPolygon.type = this.gpsType;
         this.drawPolygon.initCoordinates(coordinates);
-        this.isEdit=true;
+        this.isEdit = true;
         this.$emit('loadDrawPolygonEvent', this);
         if (bbox) {
-           const bbox1 = [bbox[0], bbox[3], bbox[2], bbox[1]];
-           const bbox2 = [bbox[2], bbox[1], bbox[0], bbox[3]];
-           this.lMap.fit([bbox1,bbox2]);
+          const bbox1 = [bbox[0], bbox[3], bbox[2], bbox[1]];
+          const bbox2 = [bbox[2], bbox[1], bbox[0], bbox[3]];
+          this.lMap.fit([bbox1, bbox2]);
         }
       },
       _serializeGeoJson() {
@@ -160,9 +158,9 @@
       onCreatePolygon() {
         if (this.lMap) {
           // this.drawPolygon=null;
-          this.drawPolygon = this.lMap.onCreatePolygon(() => {},this.isHideAreaAndKM);
-           this.lastType=this.gpsType;
-          this.drawPolygon.type=this.gpsType;
+          this.drawPolygon = this.lMap.onCreatePolygon(() => {}, this.isHideAreaAndKM);
+          this.lastType = this.gpsType;
+          this.drawPolygon.type = this.gpsType;
           this.$emit('loadDrawPolygonEvent', this);
         }
       },
@@ -183,13 +181,16 @@
           this.x = pointArr[0];
           this.y = pointArr[1];
 
-          let  _pointArr= pointArr;
-          if(this.gpsType){
-             let {lon,lat} =  GPS.gcj_decrypt(pointArr[0],pointArr[1]);
-             _pointArr=[lon,lat];
+          let _pointArr = pointArr;
+          if (this.gpsType) {
+            let {
+              lon,
+              lat
+            } = GPS.gcj_decrypt(pointArr[0], pointArr[1]);
+            _pointArr = [lon, lat];
           }
 
-          this.drawPolygon.setCoordinates(_pointArr,this.gpsType);
+          this.drawPolygon.setCoordinates(_pointArr, this.gpsType);
 
           this.$emit('crossHairClick', {
             pointArr,
@@ -245,13 +246,16 @@
           }
           this.x = pointArr[0];
           this.y = pointArr[1];
-          let  _pointArr= pointArr;
-          if(this.gpsType){
-             let {lon,lat} =  GPS.gcj_decrypt(pointArr[0],pointArr[1]);
-             _pointArr=[lon,lat];
+          let _pointArr = pointArr;
+          if (this.gpsType) {
+            let {
+              lon,
+              lat
+            } = GPS.gcj_decrypt(pointArr[0], pointArr[1]);
+            _pointArr = [lon, lat];
           }
 
-          this.drawPolygon.setCoordinates(_pointArr,this.gpsType);
+          this.drawPolygon.setCoordinates(_pointArr, this.gpsType);
           this.$emit('crossHairClick', {
             pointArr,
             delete: this.onDelete,
@@ -260,30 +264,44 @@
         }
         this.$message.error('请绘制地块后在进行操作！');
       },
-      getGeoJson(){
-         if(!this.lMap) return;
+      getGeoJson() {
+        if (!this.lMap) return;
         return this.lMap.getPolygonGeoJson();
       },
-      onCancel(){
-        if(!this.lMap) return;
-         this.lMap.onCancel();
+      onCancel() {
+        if (!this.lMap) return;
+        this.lMap.onCancel();
       },
-      onCreateLine(){
-         let draw =  this.lMap.onCreateLine(({id,type}) => {
-            this.$emit('drawLineEvent',{draw,id,type});
-         });
-         draw.Id=generateGuid();
+      onCreateLine() {
+        let draw = this.lMap.onCreateLine(({
+          id,
+          type
+        }) => {
+          this.$emit('drawLineEvent', {
+            draw,
+            id,
+            type
+          });
+        });
+        draw.Id = generateGuid();
       },
-      onCreateArea(){
-         let draw = this.lMap.onCreateArea(({id,type}) => {
-               this.$emit('drawPolygonEvent',{draw,id,type});
-         });
-         draw.Id=generateGuid();
+      onCreateArea() {
+        let draw = this.lMap.onCreateArea(({
+          id,
+          type
+        }) => {
+          this.$emit('drawPolygonEvent', {
+            draw,
+            id,
+            type
+          });
+        });
+        draw.Id = generateGuid();
       },
-      selectGPSAll(type){
+      selectGPSAll(type) {
         this.lMap.removeDrawArr();
-        if(this.drawPolygon){
-           this.drawPolygon.selectGPS(type,true);
+        if (this.drawPolygon) {
+          this.drawPolygon.selectGPS(type, true);
         }
       }
     }
@@ -339,4 +357,4 @@
   .ele-text-primary {
     padding: 0;
   }
-</style>
+</style>

package/src/utils/lMapServices.js

@@ -97,7 +97,8 @@ export default class LMapServices {
 		this.drawPolygonArr = new Set();
 		this.drawLineArr = new Set();
 		this._lRectangle = null;
-		this.layers = null;
+		this.layers = null;
+    this.drawZIndex=1;
 	}
 	init(optins) {
 		const {
@@ -395,7 +396,7 @@ export default class LMapServices {
 
 	onCreateLine(callback) {
 		if (this.map) {
-			let drawLine = new LDraw('LineString',callback?callback:()=> {},this.map);
+			let drawLine = new LDraw('LineString',callback?callback:()=> {},this.map,this.drawZIndex);
 			this.drawLineArr.add(drawLine);
 			return drawLine;
 		}
@@ -404,7 +405,7 @@ export default class LMapServices {
 
 	onCreateArea(callback) {
 		if (this.map) {
-			let draw =  new LDraw('Polygon', callback?callback:()=> {}, this.map);
+			let draw =  new LDraw('Polygon', callback?callback:()=> {}, this.map,this.drawZIndex);
 			this.drawPolygonArr.add(draw);
 			return draw;
 		}
@@ -999,6 +1000,14 @@ export default class LMapServices {
 			});
 		}, 50);
 
-	}
+	}
+
+  set DrawZIndex(zIndex){
+    this.drawZIndex=zIndex;
+  }
+
+  get DrawZIndex(){
+    return this.drawZIndex;
+  }
 
 }