ry-vue-map 0.1.8 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ry-vue-map",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "private": false,
   "main": "lib/ryui.umd.min.js",
   "description": "ry公共组件库",
@@ -38,7 +38,7 @@
     "element-ui": "~2.15.6",
     "nprogress": "~0.2.0",
     "ol": "^6.14.1",
-    "ry-map": "^0.3.0",
+    "ry-map": "^0.3.2",
     "vue": "~2.6.14",
     "vue-router": "~3.5.2",
     "vue-server-renderer": "^2.6.14",

package/src/components/index.js

@@ -7,11 +7,11 @@ import RyPolygons from './maps/ryPolygons';
 import RyClusters from './maps/ryClusters';
 import RyClustersMarker from './maps/ryClustersMarker';
 import RyPolygonGeo from './maps/ryPolygonGeo';
-
+import RyVectorMap from './maps/ryVectorMap';
 // import "./fonts/iconfont.css";
 
 // 组件列表
-const components = [ RyMap,RyCrossHair,RyMapTool, RyPolygon,RyPolygons,RyClusters, RyPolygonGeo, RyClustersMarker];
+const components = [ RyMap,RyCrossHair,RyMapTool, RyPolygon,RyPolygons,RyClusters, RyPolygonGeo, RyClustersMarker,RyVectorMap];
 
 // 定义install
 const install = (Vue, options) => {

package/src/components/maps/ryVectorMap/index.js

@@ -0,0 +1,7 @@
+import RyVectorMap from './src/index';
+
+RyVectorMap.install = (Vue) => {
+  Vue.install(RyVectorMap.name, RyVectorMap);
+};
+
+export default RyVectorMap;

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

@@ -0,0 +1,161 @@
+<template>
+	<div class="vector-map" v-lmap:loadMap>
+
+	</div>
+</template>
+
+<script>
+	import MapServices from '@/utils/lMapServices.js';
+	export default {
+		name: 'RyVectorMap',
+		props: {
+			isAnalysisBBOX: {
+				type: Boolean,
+				default: true,
+			},
+			isAnalysisCenter: {
+				type: Boolean,
+				default: true,
+			},
+			modelArr : {
+			  type: Array,
+			  default: () => [],
+			},
+			delayTime:{
+				type: Number,
+				default: () =>50,
+			},
+			bindMapClick:{
+			  type: Boolean,
+			  default: false,
+			},
+			isDrag:{
+			  type: Boolean,
+			  default: true,
+			},		
+		},
+		data() {
+			return {
+				lMap: new MapServices(),
+				drawPolygon: null,
+				mapClick: null,
+				map: null,
+				vmap:null,
+				lastX: 0,
+				lastY: 0,
+				moveend: null,
+				polygonMap:null,
+			}
+		},
+		watch: {
+          modelArr(val){
+			  this.initLayers(val);
+		  },
+		  bindMapClick(val) {
+		  	if (this.bindMapClick !== val) {
+		  		this.bindMapClick = val;
+		  		this._bingMapEvent();
+		  	}
+		  },
+		  polygonColor(val) {
+		    if (val) {
+		      this.setPolygonColor(val.id, val.colorArr);
+		    }
+		  },
+		},
+		mounted() {
+
+		},
+		methods: {
+			async loadMap(el) {
+				const {
+					map,
+					vmap
+				 } = await this.lMap.initVectorMap({
+					el,
+					isAnalysisBBOX:this.isAnalysisBBOX,
+					isAnalysisCenter:this.isAnalysisCenter,
+					delayTime:this.delayTime,
+					isDrag:this.isDrag,
+					callback: r => this.$emit('initLayersEvent', r),
+				});
+				this.map=map;
+				this.vmap=vmap;
+				this.polygonMap=vmap.getLayerMap;
+				this._bingMapEvent();
+				this.$emit('load', {
+					map,
+					vmap
+				});
+				if(this.modelArr.length){
+					 this.initLayers(val);
+				}
+			},
+			initLayers(val){
+				if(!this.vmap) return;
+				this.vmap.initLayers(val);
+			},
+			_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 pro =_feature.getProperties();
+							    const view = this.map.getView();
+							    const [lon,lat]=view.getCenter();					
+								const _id = _feature.getId();			
+								if(pro){
+			                      	this.$emit('mapClick', {...pro,id: _id ? _id:null,lon,lat});	
+								}
+						}
+					};
+				}
+				if (isBinClick) {
+					this.map.un('click', this.mapClick);
+					this.mapClick = null;
+				} else {
+					this.map.on('click', this.mapClick);
+				}
+			},
+			_bingMapEvent() {
+				if (this.bindMapClick) {
+					this._mapClickOnce();
+				} else {
+					this._mapClickOnce(true);
+				}
+			},
+	
+			setPolygonColor(id, color, isLoad = true) {			  
+			  if (this.polygonMap.has(id)) {
+			    const polygon = this.polygonMap.get(id);
+			    polygon.setPolygonColor(color);
+			    if (isLoad) {
+			      this._setZoom();
+			    }
+			  }
+			},
+			// 刷新颜色
+			_setZoom() {
+			  const zoom = this.map.getView().getZoom();
+			  this.map.getView().setZoom(zoom + 0.00001);
+			  this.map.getView().setZoom(zoom - 0.0001);
+			},
+			
+			
+			
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.vector-map {
+		height: 100%;
+		width: 100%;
+		position: relative;
+	}
+</style>

package/src/router/index.js

@@ -9,6 +9,11 @@ Vue.use(VueRouter);
 
 // 静态路由
 const routes = [
+	{
+	  path: '/',
+	  component: () => import('@/views/vectorMap'),
+	  meta: { title: '地图' }
+	},
   {
     path: '/',
     component: () => import('@/views/map'),
@@ -16,7 +21,7 @@ const routes = [
   },
   {
     path: '*',
-　　 component: () => import('@/views/map'),
+　　 component: () => import('@/views/vectorMap'),
   }
 ];
 

package/src/utils/lMapServices.js

@@ -70,7 +70,8 @@ import {
   MapLayersEnum,
   BingLayers,
   BDLayers,
-  LRectangle
+  LRectangle,
+  VectorMap
 } from 'ry-map';
 
 export default class LMapServices {
@@ -225,34 +226,27 @@ export default class LMapServices {
     // }, 100);
   }
 
-  initVectorMap(el, callback, viewOptions) {
-    // this.clear();
-    if (!this.lmap) {
-      if (this.map) {
-        this.map = null;
-      }
-      this.lmap = new LMap({
-        controls: MapConfig.Defaults,
-        interactions: MapConfig.InteractionsDeft
-      });
-    }
-
-    setTimeout(() => {
-      const _async = async () => {
-        if (this.map) {
-          this.map = null;
-        }
-        const {map,layers} = await this.lmap.onLoad(el);
-				 this.map=map;
-				 this.layers=layers;
-        this.map.setView(MapConfig.getVectorLayerView);
-        if (callback) {
-          callback(this.map);
-        }
-      };
-      _async();
-    }, 100);
-  }
+ async initVectorMap(opt) {
+ 	  const {el,isAnalysisBBOX,isAnalysisCenter,callback,delaytime,isDrag} = opt;
+ 	  const vmap = new  VectorMap({
+ 	    isAnalysisBBOX,
+ 	    isAnalysisCenter,
+		isDrag,
+ 	    callback:r=> {
+ 	        if(callback){
+ 				callback(r);
+ 			}
+ 	    }
+ 	  });
+ 	  
+ 	  return new  Promise(r=> {
+ 		  setTimeout(async ()=> {
+ 			  const map = await  vmap.onLoad(el);
+ 			  r({map,vmap});
+ 		  },delaytime ? delaytime:100);
+ 	  });
+ 	  
+ }
 
   getVectorLayerView() {
     return MapConfig.getVectorLayerView;
@@ -925,6 +919,20 @@ export default class LMapServices {
 	   return [];
 	}
 	
+	getRectangleDataNew(){
+	  if(!this._lRectangle) return [];
+	   const coordinates = this._lRectangle.getCoordinates();
+	   const pointArr= coordinates[0];
+	   if(pointArr.length){
+	    const arr= [];
+	    arr.push([pointArr[0][0], pointArr[1][1]]);
+	    arr.push([pointArr[1][0], pointArr[2][1]]);
+	     return arr;
+	   };
+	   return [];
+	}
+	
+	
 	clearRectangle() {
 	  if (this.map && this._lRectangle) {
 	   const coordinates = this._lRectangle.getCoordinates();

package/src/views/map/index.vue

@@ -24,8 +24,8 @@
 	  :mapType="1" -->
 			<template #marker="{mapDto}">
 				<!-- <ry-polygon  :map="mapDto.map" :isShow="true" :polygonColor="colors" :model="polygonModel" :clear="isClear"  @onLoad="onLoad($event)"></ry-polygon> -->
-		<!-- 		<ry-polygon :isFit="false" :gpsType="gpsType" :map="mapDto.map" :model="polygonModel"></ry-polygon>
-				<ry-polygon-geo :isFit="true" :gpsType="gpsType"  :map="mapDto.map" :model="polygonModel6" > </ry-polygon-geo> -->
+			<!-- 	<ry-polygon :isFit="false" :gpsType="gpsType" :map="mapDto.map" :model="polygonModel"></ry-polygon> -->
+				<ry-polygon-geo :isFit="true" :gpsType="gpsType"  :map="mapDto.map" :model="polygonModel6" > </ry-polygon-geo>
 				<!--   <ry-polygon :isFit="true" :isShowAll="isShowAll" :map="mapDto.map" :isShow="true"  :model="polygonModel"   @onLoad="onLoad($event)"></ry-polygon> -->
 				<!--     <ry-polygons :restFit="restFit" :isCheckPointHideAll="isShowAll" :isCheckPointHide="showPolygon"
           :isCheckPointHides="showPolygons" :isShowPolygon="showPolygon" :isShowPolygons="showPolygons" :range="range"
@@ -33,7 +33,7 @@
           :polygonColor="polygonColorObj" :remove="remove" :removes="removes" :polygonColors="polygonColors"
           :modelArr="modelArr" @onLoad="onLoad($event)"></ry-polygons> -->
 
-	<ry-polygons
+	<!-- <ry-polygons
       :map="mapDto.map"
       :modelArr="modelArr"
       @onLoad="onLoad($event)"
@@ -45,11 +45,12 @@
 	   :src="src" text="个" 
 	   fontColor="red" 
 	   :fontSize="23" 
+	   :distance="200"
 	   :gpsType="gpsType" 
 	   @callback="clusterCallback($event)"  
 	   :map="mapDto.map" 
 	   :modelArr="modelArr2" 
-	   :offsetY="0"></ry-clusters-marker>
+	   :offsetY="0"></ry-clusters-marker> -->
 
 			</template>