ry-vue-map 0.2.1 → 0.2.3

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

@@ -7,7 +7,7 @@
     CheckPoint,
     getCenterPoint,
     fitNew,
-    getLngAndLatMaxMin,
+    getLngAndLatMaxMin,
     GPS,
   } from 'ry-map';
   import Dto from './../../models/ryPolygons/ryPolygons.js';
@@ -19,12 +19,12 @@
     data() {
       return {
         bbox: [],
-        bboxMap: new Map(),
-        bboxGCJ02:[],
+        bboxMap: new Map(),
+        bboxGCJ02:[],
         bboxMapGCJ02: new Map(),
         polygonMap: new Map(),
-        checkPointMap: new Map(),
-        isCreate:true,
+        checkPointMap: new Map(),
+        isCreate:true,
         lastType:-1,
       };
     },
@@ -124,11 +124,11 @@
         }
       },
       gpsType(val){
-         if(this.lastType == val) return;
-         this.gpsType=val;
+         if(this.lastType == val) return;
+         this.gpsType=val;
          this.lastType=val;
          this.selectGPSAll(this.gpsType);
-      },
+      },
 
     },
     created() {
@@ -181,16 +181,16 @@
           this.polygonMap.set(val.id, polygon);
         }
       },
-      selectGPSAll(type){
+      selectGPSAll(type){
 
-        this.polygonMap.forEach(val=> {
-             val.selectGPS(type);
-        });
-
-        this.checkPointMap.forEach(val => {
-             val.selectGPS(type);
+        this.polygonMap.forEach(val=> {
+             val.selectGPS(type);
         });
-      },
+
+        this.checkPointMap.forEach(val => {
+             val.selectGPS(type);
+        });
+      },
 
       initCheckPoint(val, center) {
         if (!this.checkPointMap.has(val.id) && val.text) {
@@ -202,11 +202,11 @@
         if (!this.bboxMap.has(id)) {
           this.bbox.push(bbox);
           this.bboxMap.set(id, bbox);
-        }
-        if(!this.bboxMapGCJ02.has(id)){
-          const _bboxGCJ02 =this.convertBBoxGCJ02(bbox);
-          this.bboxGCJ02.push(_bboxGCJ02);
-          this.bboxMapGCJ02.set(id,_bboxGCJ02);
+        }
+        if(!this.bboxMapGCJ02.has(id)){
+          const _bboxGCJ02 =this.convertBBoxGCJ02(bbox);
+          this.bboxGCJ02.push(_bboxGCJ02);
+          this.bboxMapGCJ02.set(id,_bboxGCJ02);
         }
       },
       setFit() {
@@ -289,8 +289,8 @@
         this.checkPointMap.clear();
         this.polygonMap.clear();
         this.bboxMap.clear();
-        this.bbox = [];
-        this.bboxGCJ02=[];
+        this.bbox = [];
+        this.bboxGCJ02=[];
         this.bboxMapGCJ02.clear();
       },
 
@@ -356,7 +356,6 @@
             checkPoint.show();
             return;
           }
-
           checkPoint.hide();
         }
       },
@@ -374,13 +373,13 @@
         }
       },
       restBBOXArr() {
-        this.bbox = [];
+        this.bbox = [];
         this.bboxGCJ02=[];
         this.bboxMap.forEach(val => {
           this.bbox.push(val);
-        });
-        this.bboxMapGCJ02.forEach(val => {
-           this.bboxGCJ02.push(val);
+        });
+        this.bboxMapGCJ02.forEach(val => {
+           this.bboxGCJ02.push(val);
         });
       },
       removePolygonsAndCheckPoints(ids) {
@@ -409,23 +408,23 @@
 
         if (this.bboxMap.has(id)) {
           this.bboxMap.delete(id);
-        }
-
-        if (this.bboxMapGCJ02.has(id)) {
-          this.bboxMapGCJ02.delete(id);
+        }
+
+        if (this.bboxMapGCJ02.has(id)) {
+          this.bboxMapGCJ02.delete(id);
         }
       },
       _ranges(ids) {
         const arr = [];
-        ids.forEach(val => {
+        ids.forEach(val => {
 
           if (this.bboxMap.has(val) && this.gpsType!=1) {
             const bbox = this.bboxMap.get(val);
             arr.push(bbox);
-          }else if (this.bboxMapGCJ02.has(val) && this.gpsType==1){
-            const bbox = this.bboxMapGCJ02.get(val);
-            arr.push(bbox);
-          }
+          }else if (this.bboxMapGCJ02.has(val) && this.gpsType==1){
+            const bbox = this.bboxMapGCJ02.get(val);
+            arr.push(bbox);
+          }
 
         });
         if (arr.length) {
@@ -437,9 +436,9 @@
         if (this.bboxMap.has(id)  && this.gpsType!=1) {
           const bbox = this.bboxMap.get(id);
           fitNew(this.map, [bbox]);
-        }else if(this.bboxMapGCJ02.has(id) && this.gpsType==1){
-          const bbox = this.bboxMapGCJ02.get(id);
-          fitNew(this.map, [bbox]);
+        }else if(this.bboxMapGCJ02.has(id) && this.gpsType==1){
+          const bbox = this.bboxMapGCJ02.get(id);
+          fitNew(this.map, [bbox]);
         }
       },
       _insert(val, isLoad) {
@@ -463,7 +462,7 @@
         }
       },
       // 批量插入多边形
-      _inserts(arr) {
+      _inserts(arr) {
         this.lastType=this.gpsType;
         arr.forEach(val => {
           this._insert(val, false);
@@ -476,26 +475,26 @@
         this.$emit('onLoad', {
           polygonMap: this.polygonMap,
           checkPointMap: this.checkPointMap,
-          bboxMap: this.bboxMap,
+          bboxMap: this.bboxMap,
           bboxMapGCJ02:this.bboxMapGCJ02
         });
       },
       _restFit() {
-        let bbox = [];
-        if(this.gpsType !=1){
-           this.bboxMap.forEach((val, key) => {
-             if (this.isShowPolygons.findIndex(r => r.id == key) === -1) {
-               bbox.push(this.bboxMap.get(key));
-             }
-           });
-        }else if(this.gpsType ==1){
-          this.bboxMapGCJ02.forEach((val, key) => {
-            if (this.isShowPolygons.findIndex(r => r.id == key) === -1) {
-              bbox.push(this.bboxMapGCJ02.get(key));
-            }
-          });
-        }
-
+        let bbox = [];
+        if(this.gpsType !=1){
+           this.bboxMap.forEach((val, key) => {
+             if (this.isShowPolygons.findIndex(r => r.id == key) === -1) {
+               bbox.push(this.bboxMap.get(key));
+             }
+           });
+        }else if(this.gpsType ==1){
+          this.bboxMapGCJ02.forEach((val, key) => {
+            if (this.isShowPolygons.findIndex(r => r.id == key) === -1) {
+              bbox.push(this.bboxMapGCJ02.get(key));
+            }
+          });
+        }
+
 
         if (bbox.length) {
           if(bbox.length > 1){
@@ -504,17 +503,17 @@
              this.setFitFist(bbox[0]);
           }
         }
-      },
-      convertBBoxGCJ02(bbox){
-          const pointArr= [];
-          const { lat, lon } = GPS.gcj_encrypt(bbox[0], bbox[1]);
-          const { lon:lon2, lat:lat2 }= GPS.gcj_encrypt(bbox[2], bbox[3]);
-          pointArr.push(lon);
-          pointArr.push(lat);
-          pointArr.push(lon2);
-          pointArr.push(lat2);
-          return   pointArr;
-      },
+      },
+      convertBBoxGCJ02(bbox){
+          const pointArr= [];
+          const { lat, lon } = GPS.gcj_encrypt(bbox[0], bbox[1]);
+          const { lon:lon2, lat:lat2 }= GPS.gcj_encrypt(bbox[2], bbox[3]);
+          pointArr.push(lon);
+          pointArr.push(lat);
+          pointArr.push(lon2);
+          pointArr.push(lat2);
+          return   pointArr;
+      },
 
     },
   }

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

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

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

@@ -0,0 +1,233 @@
+<template>
+	<div class="map-box">
+		<div v-lmap:loadMap 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"
+			:isHideAreaAndKM="isHideAreaAndKM"
+		     @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>
+		
+	</div>
+
+
+
+</template>
+<script>
+	import MapServices from '@/utils/lMapServices.js';
+	import MapDto from './../../models/ryStaticMap/map.js';
+	import ViewDto from './../../models/ryStaticMap/view.js';
+	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 View from 'ol/View';
+    import Projection from 'ol/proj/Projection';
+
+	import {
+		fitNew,
+		caculateLL,
+	} from 'ry-map';
+	export default {
+		name: 'RyStaticMap',
+		components: {
+			RyMapTool,
+		},
+		props: {
+			...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();
+				}
+			},
+		},
+		data() {
+			return {
+				lMap: new MapServices(),
+				drawPolygon: null,
+				mapClick: null,
+				map: null,
+				moveend: null,
+				lastX: 0,
+				lastY: 0,
+			};
+		},
+		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
+			     });
+			},
+			_bingMapEvent() {
+				if (this.bindMapClick) {
+					this._mapClickOnce();
+				} else {
+					this._mapClickOnce(true);
+				}
+			},
+			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);
+				}
+			},
+			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/components/maps/ryUniMap/index.js

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