ry-vue-map 0.2.1 → 0.2.2

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

@@ -0,0 +1,351 @@
+<template>
+	<div class="map-box">
+		<div  class="map-style"></div>
+		<!-- isRyMapTool -->
+		<RyMapTool class="ry-map-tool" :class="{
+         'left':!isRight,
+         'right':isRight
+       }" v-if="lMap.map && isRyMapTool" @crossHairClick="crossHairClick($event)" :lMap="lMap"
+			:isShowRangingTool="isShowRangingTool" :initModifyPolygon="initModifyPolygon"
+			:isShowDrawTool="isShowDrawTool" :isRight="isRight" :isCrossHair="isCrossHair" :hideAdd="hideAdd"
+			:hidePoint="hidePoint" :hideCancel="hideCancel" :hideDelete="hideDelete" :hideSave="hideSave"
+			:hideLine="hideLine" :hideArea="hideArea" :isSwitchMap="isSwitchMap" :isSwitchMapRight="isSwitchMapRight"
+			:gpsType="lastMapType" @loadDrawPolygonEvent="loadDrawPolygonEvent($event)" @success="drawSuccess($event)"
+			@error="drawError($event)">
+			<template>
+				<slot name="maptool"></slot>
+			</template>
+		</RyMapTool>
+
+		<template v-if="map">
+			<slot name="polygon" :mapDto="{map,lMap}">
+
+			</slot>
+			
+			<slot name="marker" :mapDto="{map,lMap}">
+			
+			</slot>
+		</template>
+		
+		<SwitchMap 
+		     v-if="isSwitchMapTool && isShowSwitchMap" 
+			 :height="switchMapHeight"
+			 :switchMapDefaultTypeOrLayer="switchMapDefaultTypeOrLayer" 
+			 :mapTypeAndLayer="mapTypeAndLayer"
+			 class="move-box" :style="{
+            top:switchMapPosTop + 'px',
+            right:isSwitchMapRight?switchMapPosLeftOrRight + 'px':'none',
+            left:!isSwitchMapRight?switchMapPosLeftOrRight + 'px':'none'
+            }" :bottom-right="isSwitchMapRight" 
+		    @changeSwitchMap="changeSwitchMap"
+		   :isDisabled= "isDisabledSwitchMapTabEvent"
+		 />
+
+		<!-- 'current': !isRyMapTool || !isRight -->
+	</div>
+
+
+
+</template>
+<script>
+	import MapServices from '@/utils/lMapServices.js';
+	import MapDto from './../../models/ryMap/map.js';
+	import ViewDto from './../../models/ryMap/view.js';
+	import MapToolDto from './../../models/ryMapTool/mapTool.js';
+	import RyMapTool from '../../ryMapTool/src/index';
+	import SwitchMap from '../../switchMap/src/newIndex';
+	import {
+		ViewOptions,
+		fitNew,
+		caculateLL,
+		GPS
+	} from 'ry-map';
+	export default {
+		name: 'RyUniMap',
+		components: {
+			RyMapTool,
+			SwitchMap,
+		},
+		props: {
+			target:{
+				type:Object,
+				default:()=> null,
+				
+			},
+			...new MapDto(),
+			...new ViewDto(),
+			...new MapToolDto()
+		},
+		created() {},
+		watch: {
+			center(newValue) {
+				this.setCenter(newValue);
+			},
+			bbox(newValue) {
+				this.setFit(newValue);
+			},
+			maxZoom(zoom) {
+				this.lMap.setMaxZoom(zoom);
+			},
+			zoom(zoom) {
+				this.lMap.setZoom(zoom);
+			},
+			minZoom(zoom) {
+				this.lMap.setMinZoom(zoom);
+			},
+			bindMapClick(val) {
+				if (this.bindMapClick !== val) {
+					this.bindMapClick = val;
+					this._bingMapEvent();
+				}
+			},
+			bindMapMoveend(val) {
+				if (this.bindMapMoveend !== val) {
+					this.bindMapMoveend = val;
+					this._bingMapMoveend();
+				}
+			},
+			m(val) {
+				this.m = val;
+			}
+		},
+		created(){
+			
+		},
+		data() {
+			return {
+				lMap: new MapServices(),
+				drawPolygon: null,
+				mapClick: null,
+				map: null,
+				moveend: null,
+				lastX: 0,
+				lastY: 0,
+				lastMapType: 0,
+				isFirstLoad: false,
+			};
+		},
+
+		methods: {
+			changeSwitchMap({
+				mapType,
+				layerType
+			}) {
+		
+				this.lMap.selectMapLayer(mapType, layerType);
+				this._setMaxZoom(mapType, layerType);
+                let _mapType = mapType;
+                if (mapType > 1) {
+                	_mapType = 0;
+                }
+				if (this.lastMapType == _mapType ) return;
+		
+				this.lastMapType = _mapType;
+
+				const center = this.lMap.getCenter();
+				if (center && center.length) {
+					if (_mapType == 0) {
+						const {
+							lon,
+							lat
+						} = GPS.gcj_decrypt(center[0], center[1]);
+						this.lMap.setCenter([lon, lat]);
+					} else {
+						const {
+							lon,
+							lat
+						} = GPS.gcj_encrypt(center[0], center[1]);
+						this.lMap.setCenter([lon, lat]);
+					}
+				}
+				this.$emit('changeSwitchMap', {
+					mapType: _mapType,
+					layerType,
+					type:mapType
+				});
+			},
+			_setMaxZoom(type, layerType) {
+				if (type == 2 || layerType == 0) {
+					this.setMaxZoom(28);
+					// return;
+				} else {
+					this.setMaxZoom(18);
+				}
+			},
+			loadMap(el) {
+				// const dto =
+				this.lMap.init({
+					el,
+					type: this.mapType,
+					layerType: this.layerType,
+					viewOptions: this.getViewOptions(),
+					callback: (map,layers) => {
+						this.map = map;
+
+						if (this.bbox.length > 0) {
+							this.setFit(this.bbox);
+						}
+						try {
+							const [x, y] = this.lMap.getCenter();
+							this.lastX = x;
+							this.lastY = y;
+						} catch (err) {
+
+						}
+						this._bingMapEvent();
+						this._bingMapMoveend();
+						this.$emit('load', {
+							map,
+							mapServices: this.lMap,
+							layers,
+							ryMapTool: this.$refs.mapTool
+						});
+
+						if (!this.isShowSwitchMap) {
+							this.lastMapType = this.mapType > 2 ? 0 : this.mapType;
+						}
+					}
+				});
+			},
+			_bingMapEvent() {
+				if (this.bindMapClick) {
+					this._mapClickOnce();
+				} else {
+					this._mapClickOnce(true);
+				}
+			},
+			_bingMapMoveend() {
+				if (this.bindMapMoveend) {
+					this._mapMoveend();
+				} else {
+					this._mapMoveend(true);
+				}
+			},
+			getViewOptions() {
+				return {
+					projection: this.projection,
+					center: this.center,
+					zoom: this.zoom,
+					minZoom: this.minZoom,
+					maxZoom: this.maxZoom,
+				};
+			},
+			setMaxZoom(zoom) {
+				this.lMap.setMaxZoom(zoom)
+			},
+			setMinZoom(zoom) {
+				this.lMap.setMinZoom(zoom)
+			},
+			setZoom(zoom) {
+				this.lMap.setZoom(zoom);
+			},
+			crossHairClick(obj) {
+				this.$emit('crossHairClick', obj);
+			},
+			setCenter(center) {
+				this.lMap.setCenter(center, 15);
+			},
+			setFit(bbox) {
+				if (!bbox.length || !this.map) return;
+				fitNew(this.map, [bbox]);
+			},
+			drawSuccess(geo) {
+				this.$emit('drawSuccess', geo);
+			},
+			drawError(obj) {
+				this.$emit('drawError', obj);
+			},
+			_mapClickOnce(isBinClick = false) {
+				if (!this.mapClick) {
+					this.mapClick = evt => {
+						if (evt.dragging) {
+							return;
+						}
+						const pixel = this.map.getEventPixel(evt.originalEvent);
+						const hit = this.map.hasFeatureAtPixel(pixel);
+						if (hit) {
+							const _feature = this.map.forEachFeatureAtPixel(evt.pixel, feature => feature);
+							const _id = _feature.getId();
+							if (_id === undefined) {
+								return;
+							}
+							this.$emit('mapClick', _id);
+						}
+					};
+				}
+				if (isBinClick) {
+					this.map.un('click', this.mapClick);
+					this.mapClick = null;
+				} else {
+					this.map.on('click', this.mapClick);
+				}
+			},
+			_mapMoveend(isMoveend = false) {
+				this.moveend = e => {
+					const [x, y] = this.lMap.getCenter();
+					let m = 0;
+					if (this.lastX !== x && this.lastY !== y) {
+						m = caculateLL(this.lastY, this.lastX, y, x);
+						this.$emit('mapMoveend', {
+							m,
+							oversteSetValue: m >= this.m ? true : false,
+							x,
+							y
+						});
+
+						if (m >= this.m) {
+							this.lastX = x;
+							this.lastY = y;
+						}
+						return;
+					}
+					this.$emit('mapMoveend', {
+						m,
+						oversteSetValue: false,
+						x,
+						y
+					});
+				}
+				if (isMoveend) {
+					this.map.un('moveend', this.moveend);
+				} else {
+					this.map.on('moveend', this.moveend);
+				}
+			},
+			loadDrawPolygonEvent(e) {
+				this.$emit('loadDrawPolygonEvent', e);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.map-box {
+		height: 100%;
+		position: relative;
+
+		&>.map-style {
+			height: 100%;
+			position: relative;
+			width: 100%;
+		}
+	}
+
+	.ry-map-tool {
+		position: absolute;
+		top: 20px;
+	}
+
+	.left {
+		left: 30px;
+	}
+
+	.right {
+		right: 30px;
+	}
+
+
+	.move-box {
+		position: absolute;
+	}
+</style>

package/src/router/index.js

@@ -11,17 +11,17 @@ Vue.use(VueRouter);
 const routes = [
 	{
 	  path: '/',
-	  component: () => import('@/views/vectorMap'),
+	  component: () => import('@/views/map'),
 	  meta: { title: '地图' }
 	},
   {
     path: '/',
-    component: () => import('@/views/map'),
+    component: () => import('@/views/vectorMap'),
     meta: { title: '地图' }
   },
   {
     path: '*',
-　　 component: () => import('@/views/vectorMap'),
+　　 component: () => import('@/views/map'),
   }
 ];