ry-vue-map 0.2.2 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ry-vue-map",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "private": false,
   "main": "lib/ryui.umd.min.js",
   "description": "ry公共组件库",
@@ -32,6 +32,10 @@
     "@form-create/element-ui": "^2.5.20",
     "@turf/helpers": "^6.5.0",
     "@turf/line-intersect": "^6.5.0",
+    "@vue-office/docx": "^0.2.4",
+    "@vue-office/excel": "^0.2.4",
+    "@vue-office/pdf": "^0.2.4",
+    "@vue/composition-api": "^1.7.1",
     "axios": "~0.21.1",
     "core-js": "~3.15.2",
     "countup.js": "~2.0.7",
@@ -39,8 +43,9 @@
     "element-ui": "~2.15.6",
     "nprogress": "~0.2.0",
     "ol": "^6.14.1",
-    "ry-map": "^0.3.3",
+    "ry-map": "^0.3.8",
     "vue": "~2.6.14",
+    "vue-demi": "^0.13.11",
     "vue-router": "~3.5.2",
     "vue-server-renderer": "^2.6.14",
     "vuedraggable": "~2.24.3",
@@ -53,7 +58,6 @@
     "@vue/cli-plugin-router": "~4.4.6",
     "@vue/cli-plugin-vuex": "~4.4.6",
     "@vue/cli-service": "~4.4.6",
-    "@vue/composition-api": "~1.2.2",
     "babel-eslint": "~10.1.0",
     "compression-webpack-plugin": "~6.1.1",
     "eslint": "~6.8.0",

package/src/components/index.js

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

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

@@ -1,5 +1,12 @@
 export default class MapToolDto {
 
+ 
+   //是否显示地图中的
+   isHideAreaAndKM = {
+    type:Boolean,
+    default:false,
+  };
+
   //切换地图控件top值
   switchMapPosTop = {
     type:Number,

package/src/components/maps/models/ryStaticMap/map.js

@@ -0,0 +1,36 @@
+export default class MapDto {
+  constructor() {
+  
+
+     this.isSwitchMapTool = {
+     type: Boolean,
+     default:  true,
+   };
+
+    this.isRyMapTool = {
+      type: Boolean,
+      default: false,
+    };
+
+    this.isRight = {
+      type: Boolean,
+      default: false,
+    };
+
+    this.bindMapClick = {
+      type: Boolean,
+      default: false,
+    }
+
+
+    // 初始化编辑多边形
+    this.initModifyPolygon = {
+      type: [String, Object],
+      default: () => null,
+    };
+
+
+  }
+
+  
+}

package/src/components/maps/models/ryStaticMap/view.js

@@ -0,0 +1,66 @@
+const viewOptions = {
+  projection: 'EPSG:4326',
+  center: [116.40769, 39.89945],
+  zoom: 18
+}
+
+export default class MapDto {
+  constructor(opt) {
+
+    // 默认缩放率
+    this.zoom = {
+      type: Number,
+      default: 10,
+    };
+
+    // 最大缩放率
+    this.maxZoom = {
+      type: Number,
+      default: 28,
+    };
+
+    // 最小缩放率
+    this.minZoom = {
+      type: Number,
+      default: 1,
+    };
+
+    // 默认中心点数组
+    this.center = {
+      type: Array,
+      default: () => [2575, 1450],
+    };
+
+    // 二维数组 [[],[]] 根据多个中心点数组进行定位 fit  适合用于 多边形   marker  折线等
+    this.bbox = {
+      type: Array,
+      default: () => [],
+    };
+
+    this.url = {
+      type: String,
+      default: () => null,
+    };
+
+   this.imageSize={
+    type: Array,
+    default: () => [0, 0, 7247, 3562],
+   }
+  this.imageExtent={
+    type: Array,
+    default: () =>[500, 400, 5000, 2700],
+  }
+    // this.viewOptions = {
+    //   type: Object,
+    //   default: () => {
+    //     return {
+    //       projection: 'EPSG:4326',
+    //       center: [116.40769, 39.89945],
+    //       zoom: 18,
+    //       minZoom:1,
+    //       maxZoom:18
+    //     };
+    //   }
+    // }
+  }
+}

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

@@ -11,7 +11,7 @@
           stroke: 'rgba(23, 168, 162, 0.56)',
           width: 3,
           // id:'ceshi',
-          text:'快'
+          text:'块'
         };
   import {
      CheckPoint,
@@ -70,7 +70,7 @@
         checkPointArr: new Map(),
         currentArr: Array(),
         fpModelArr: [],
-        featurePolygon: new FeaturePolygon(this.gpsType),
+        featurePolygon:null,
         multiPolygonMap: new Map(),
         // model: new multiPolygonGeoJsonModel(),
         scan: new GrahamScan(),
@@ -80,6 +80,7 @@
     beforeDestroy() {
       this.clear();
     },
+	
     watch: {
       modelArr(data) {
         if (this.map) {
@@ -93,6 +94,7 @@
       }
     },
     created(){
+			this.featurePolygon = new FeaturePolygon(this.gpsType);
       this.clear();
       this.init();
     },

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

@@ -283,7 +283,8 @@
 							m,
 							oversteSetValue: m >= this.m ? true : false,
 							x,
-							y
+							y,
+							e
 						});
 
 						if (m >= this.m) {
@@ -296,7 +297,8 @@
 						m,
 						oversteSetValue: false,
 						x,
-						y
+						y,
+						e
 					});
 				}
 				if (isMoveend) {

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

@@ -90,9 +90,9 @@
       isCrossHair(val) {
         this.isCrossHair = val;
       },
-      gpsType(val){
-        if(this.lastType == val) return;
-        this.gpsType=val;
+      gpsType(val){
+        if(this.lastType == val) return;
+        this.gpsType=val;
         this.lastType=val;
          if(this.drawPolygon){
            this.drawPolygon.type=val;
@@ -104,7 +104,7 @@
     data() {
       return {
         drawPolygon: null,
-        isEdit:true,
+        isEdit:true,
         lastType:-1,
       };
     },
@@ -122,7 +122,7 @@
           bbox
         } = this._serializeGeoJson();
         this.onDelete();
-        this.drawPolygon = this.lMap.onCreatePolygon(() => {});
+        this.drawPolygon = this.lMap.onCreatePolygon(() => {},this.isHideAreaAndKM);
         this.lastType=this.gpsType;
         this.drawPolygon.type= this.gpsType;
         this.drawPolygon.initCoordinates(coordinates);
@@ -159,7 +159,7 @@
       onCreatePolygon() {
         if (this.lMap) {
           // this.drawPolygon=null;
-          this.drawPolygon = this.lMap.onCreatePolygon(() => {});
+          this.drawPolygon = this.lMap.onCreatePolygon(() => {},this.isHideAreaAndKM);
            this.lastType=this.gpsType;
           this.drawPolygon.type=this.gpsType;
           this.$emit('loadDrawPolygonEvent', this);

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

@@ -356,7 +356,6 @@
             checkPoint.show();
             return;
           }
-
           checkPoint.hide();
         }
       },

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/ryVectorMap/src/index.vue

@@ -145,9 +145,7 @@
 			  this.map.getView().setZoom(zoom + 0.00001);
 			  this.map.getView().setZoom(zoom - 0.0001);
 			},
-			
-			
-			
+				
 		}
 	}
 </script>

package/src/components/maps/switchMap/src/newIndex.vue

@@ -59,26 +59,32 @@ export default {
       mapStyleCopy: [],
     }
   },
+
   watch: {
-    switchMapDefaultTypeOrLayer: {
-      handler(e) {
-        if(!e)return;
-        const isCorrect = this.formatToJudge(e);
-        if (!isCorrect) return;
-        const active = this.mapStyleActive;
-        const mapType = (isCorrect || isCorrect===0)?e[0]:1;
-        const layerType = (isCorrect || isCorrect===1)?active:2;
-        setTimeout(() => {
-          this.$emit('changeSwitchMap', {
-            mapType,
-            layerType
-          });
-        }, 100);
-      },
-      immediate: true
-    },
+	  switchMapDefaultTypeOrLayer(e){
+		    console.log(e);
+               if(!e)return;
+               const isCorrect = this.formatToJudge(e);
+               if (!isCorrect) return;
+               const active = this.mapStyleActive;
+               const mapType = (isCorrect || isCorrect===0)?e[0]:1;
+               const layerType = (isCorrect || isCorrect===1)?active:2;
+               setTimeout(() => {
+                 this.$emit('changeSwitchMap', {
+                   mapType,
+                   layerType
+                 });
+               }, 100);		  
+	  },
+    // switchMapDefaultTypeOrLayer: {
+    //   handler(e) {
+       
+    //   },
+    //   immediate: true
+    // },
     mapTypeAndLayer :{
       handler(e){
+		   console.log('111111');
         if(!Array.isArray(e) || !e[1])return;
         e.forEach((r,index)=>{
           if(index===1 && !this.switchMapDefaultTypeOrLayer){
@@ -91,9 +97,9 @@ export default {
     }
   },
   created(){
-	  
   },
   mounted() {
+	  this._switchMapDefaultTypeOrLayer(this.switchMapDefaultTypeOrLayer);
     if(!this.switchMapDefaultTypeOrLayer){
       setTimeout(()=>{
         this.$emit('changeSwitchMap', {
@@ -186,7 +192,21 @@ export default {
         mapType: this.mapTypeActive,
         layerType: this.mapStyleActive
       });
-    }
+    },
+	_switchMapDefaultTypeOrLayer(e){
+		if(!e)return;
+		const isCorrect = this.formatToJudge(e);
+		if (!isCorrect) return;
+		const active = this.mapStyleActive;
+		const mapType = (isCorrect || isCorrect===0)?e[0]:1;
+		const layerType = (isCorrect || isCorrect===1)?active:2;
+		setTimeout(() => {
+		  this.$emit('changeSwitchMap', {
+		    mapType,
+		    layerType
+		  });
+		}, 100);		
+	}
   }
 }
 </script>

package/src/router/index.js

@@ -14,11 +14,36 @@ const routes = [
 	  component: () => import('@/views/map'),
 	  meta: { title: '地图' }
 	},
+	{
+	  path: '/staticMap',
+	  component: () => import('@/views/staticMap'),
+	  meta: { title: '室内地图' }
+	},
   {
-    path: '/',
-    component: () => import('@/views/vectorMap'),
-    meta: { title: '地图' }
+    path: '/excel',
+    component: () => import('@/views/excel'),
+    meta: { title: 'excel' }
   },
+	{
+	  path: '/tree',
+	  component: () => import('@/views/tree'),
+	  meta: { title: 'tree' }
+	},
+	{
+	  path: '/pdf',
+	  component: () => import('@/views/pdf'),
+	  meta: { title: 'pdf' }
+	},
+	{
+	  path: '/docx',
+	  component: () => import('@/views/docx'),
+	  meta: { title: 'docx' }
+	},
+	{
+	  path: '/',
+	  component: () => import('@/views/vectorMap'),
+	  meta: { title: '地图' }
+	},
   {
     path: '*',
 　　 component: () => import('@/views/map'),