ry-vue-map 0.3.3 → 0.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ry-vue-map",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "private": false,
   "main": "lib/ryui.umd.min.js",
   "description": "ry公共组件库",

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

@@ -10,9 +10,8 @@
 			:isShowDrawTool="isShowDrawTool" :isRight="isRight" :isCrossHair="isCrossHair" :hideAdd="hideAdd"
 			:hidePoint="hidePoint" :hideCancel="hideCancel" :hideDelete="hideDelete" :hideSave="hideSave"
 			:hideLine="hideLine" :hideArea="hideArea" :isSwitchMap="isSwitchMap" :isSwitchMapRight="isSwitchMapRight"
-			:isHideAreaAndKM="isHideAreaAndKM"
-		     @loadDrawPolygonEvent="loadDrawPolygonEvent($event)" @success="drawSuccess($event)"
-			@error="drawError($event)">
+			:isHideAreaAndKM="isHideAreaAndKM" @loadDrawPolygonEvent="loadDrawPolygonEvent($event)"
+			@success="drawSuccess($event)" @error="drawError($event)">
 			<template>
 				<slot name="maptool"></slot>
 			</template>
@@ -22,12 +21,12 @@
 			<slot name="polygon" :mapDto="{map,lMap}">
 
 			</slot>
-			
+
 			<slot name="marker" :mapDto="{map,lMap}">
-			
+
 			</slot>
 		</template>
-		
+
 	</div>
 
 
@@ -40,9 +39,9 @@
 	import MapToolDto from './../../models/ryMapTool/mapTool.js';
 	import RyMapTool from '../../ryMapTool/src/index';
 	import ImageLayer from 'ol/layer/Image';
-    import ImageStatic from 'ol/source/ImageStatic';
+	import ImageStatic from 'ol/source/ImageStatic';
 	import View from 'ol/View';
-    import Projection from 'ol/proj/Projection';
+	import Projection from 'ol/proj/Projection';
 
 	import {
 		fitNew,
@@ -58,8 +57,7 @@
 			...new ViewDto(),
 			...new MapToolDto()
 		},
-		created() {
-		},
+		created() {},
 		watch: {
 			center(newValue) {
 				this.setCenter(newValue);
@@ -82,6 +80,13 @@
 					this._bingMapEvent();
 				}
 			},
+			url(val){
+				if(this.map){
+					
+					this.selectLayer();
+					this.setCenter();
+				}
+			}
 		},
 		data() {
 			return {
@@ -92,50 +97,51 @@
 				moveend: null,
 				lastX: 0,
 				lastY: 0,
+				layer: null,
 			};
 		},
 		methods: {
-                        
-       getImageLayer() {
-		return new ImageLayer({
-			source: new ImageStatic({
-				crossOrigin: 'anonymous',
-				imageSize: this.imageSize,
-				imageExtent: this.imageExtent,
-				// url: require('@/assets/jsmap.png')
-				url:this.url
-			})
-		});
-	},
-		getProjection() {
-		return new Projection({
-			code: 3875,
-			extent: this.imageExtent,
-			units: 'm'
-		});
-	},
-      getView() {
-		return new View({
-			projection: 'EPSG:3857',
-			center: this.center,
-			Projection: this.getProjection(),
-			zoom:  this.zoom,
-			minZoom: this.minZoom,
-			maxZoom: this.maxZoom
-		});
-	},
-
-	    async loadMap(el) {
-			  const map = await this.lMap.initStaticMap(el,{
-				  view:this.getView(),
-                  layer:this.getImageLayer(),
-			  });  
-			  this.map=map;
-			   	this.$emit('load', {
-							map,
-							mapServices: this.lMap,
-							ryMapTool: this.$refs.mapTool
-			     });
+			getImageLayer() {
+				return new ImageLayer({
+					source: new ImageStatic({
+						crossOrigin: 'anonymous',
+						imageSize: this.imageSize,
+						imageExtent: this.imageExtent,
+						// url: require('@/assets/jsmap.png')
+						url: this.url
+					})
+				});
+			},
+			getProjection() {
+				return new Projection({
+					code: 3875,
+					extent: this.imageExtent,
+					units: 'm'
+				});
+			},
+			getView() {
+				return new View({
+					projection: 'EPSG:3857',
+					center: this.center,
+					Projection: this.getProjection(),
+					zoom: this.zoom,
+					minZoom: this.minZoom,
+					maxZoom: this.maxZoom
+				});
+			},
+
+			async loadMap(el) {
+				this.layer=this.getImageLayer();
+				const map = await this.lMap.initStaticMap(el, {
+					view: this.getView(),
+					layer: this.layer,
+				});
+				this.map = map;
+				this.$emit('load', {
+					map,
+					mapServices: this.lMap,
+					ryMapTool: this.$refs.mapTool
+				});
 			},
 			_bingMapEvent() {
 				if (this.bindMapClick) {
@@ -194,6 +200,19 @@
 					this.map.on('click', this.mapClick);
 				}
 			},
+			removeLayer(){
+				if(this.map && this.layer){
+					this.map.removeLayer(this.layer);
+				}
+			},
+			selectLayer(){
+				this.removeLayer();
+				if(this.map){
+					this.layer = this.getImageLayer();
+					this.map.addLayer(this.layer);
+					this.$emit('selectMapEvent');
+				}
+			},
 			loadDrawPolygonEvent(e) {
 				this.$emit('loadDrawPolygonEvent', e);
 			}
@@ -230,4 +249,4 @@
 	.move-box {
 		position: absolute;
 	}
-</style>
+</style>