ry-vue-map 0.2.2 → 0.2.5

package/src/views/map/indexStatic.vue

@@ -0,0 +1,205 @@
+<template>
+	<div class="map-style">
+
+		<ry-map projection="EPSG:4326" :zoom="10" :minZoom="1" :maxZoom="maxZoom" :center="center" @load="load($event)"
+			:isCrossHair="isRyMapTool" :isRight="true" :isRyMapTool="true" @drawSuccess="drawSuccess"
+			@drawError="drawError" :isShowRangingTool="true" :isShowDrawTool="isRyMapTool" :bindMapClick="true"
+			@mapClick="mapClick($event)" @crossHairClick="crossHairClick($event)" :bindMapMoveend="true"
+			@mapMoveend="mapMoveend($event)"
+		    v-if="dto"
+			:boundaryModel="dto"
+		    :urls="urls"
+			:bbox="bbox"
+			>
+		</ry-map>
+
+		<button @click="onClick()">测试</button>
+		<button @click="onClick2()">测试2</button>
+		<button @click="onClick3()">测试3</button>
+		
+		<aside class="aside-style">
+		  <el-button 
+		      class="ele-text-primary" v-show="isShowPaly"  style="padding:10px;" @click.stop="onShowPaly(false)">
+		      轨迹回放 </el-button>
+		
+		   <el-button 
+		      class="ele-text-primary" v-show="!isShowPaly" style="padding:10px; color: red;" @click.stop="onShowPaly(true)">
+		      结束轨迹回放 </el-button>
+		  </aside>
+	</div>
+</template>
+
+<script>
+	import dayjs from 'dayjs'
+	import RyMap from '@/components/maps/ryOfflineMap/src/index.vue';
+	import RyMapTool from '@/components/maps/ryMapTool/src/index.vue';
+	import RyPolygon from '@/components/maps/ryPolygon/src/index.vue';
+	import RyPolygons from '@/components/maps/ryPolygons/src/index.vue';
+	import  RyClustersMarker from '@/components/maps/ryClustersMarker/src/index.vue';
+	import RyPolygonGeo from '@/components/maps/ryPolygonGeo/src/index.vue';
+	import geoJson from "./330112";
+
+
+   
+	export default {
+		components: {
+			RyMap,
+			RyMapTool,
+			RyPolygon,
+			RyPolygons,
+			RyClustersMarker,
+			RyPolygonGeo,
+		},
+		data() {
+			return {
+				map: null,
+				lMap: null,
+				polygonColorObj: null,
+						// const bbox = [ 118.84072600000002, 29.937127000000032, 119.86315600000012, 30.445895000000064 ];
+				// const center = [119.34667114000006, 30.198078622500038];
+				
+			
+				bbox: [118.84072600000002, 29.937127000000032, 119.86315600000012, 30.445895000000064],
+				isClear: false,
+				colors: [],
+				modelArr2: [
+					{id:'ceshi1', x:120.15535003220648,y:30.179378795342608},
+					{id:'ceshi2',x:120.16369976775891,y:30.1967116895034},
+				    {id:'ceshi3',x:120.156817,y:30.1753985} ,
+					{id:'ceshi4',x:120.1538245,y:30.183076} ,
+					],
+				center: [119.34667114000006, 30.198078622500038],
+				polygonColors: [],
+				remove: 'ceshi1',
+				removes: [],
+				ranges: [],
+				restFit: true,
+				range: 'ceshi2',
+				isFit: false,
+				insert: null,
+				showPolygon: null,
+				showPolygons: [{
+					id: 'ceshi2',
+					isShow: false
+				}],
+				inserts: [],
+				isShowAll: false,
+				polygonModel: null,
+				mapTool: null,
+				isCheckPoint: null,
+				gpsType: 0,
+				isRyMapTool: true,
+				maxZoom: 18,
+				lineData1:null,
+				lineData2:null,
+				clearLiens:false,
+		    	// startMarkerDto:null,
+			    // endMarkerDto:null,
+				startMarkerDto: {
+	            url:require('@/assets/startpoint.png'),
+	 			height:23,
+	 			offset:[8, -11],
+	 			width:28
+		        },
+				endMarkerDto:{
+					url:require('@/assets/stoppoint.png'),
+					height:16,
+					offset:[0, -8],
+					width:16
+				}, 
+				lineAppend:[],
+				isShowPaly:true,
+				layerArr:[2,2],
+				urls:[
+			 		`http://127.0.0.1:10006/${330112}/satellite/{z}/{x}/{y}.jpg`,
+				 	`http://127.0.0.1:10006/${330112}/overlay/{z}/{x}/{y}.png`
+				],
+				dto:null,
+			};
+		},
+		created() {
+			this.dto={
+				geo:geoJson,
+                width:4,
+				color:'#000'
+			};
+			console.log(this.dto);
+		},
+		methods: {
+			onShowPaly(b) {
+			  this.isShowPaly = b;
+			
+			},
+			load(obj) {
+				this.lMap = obj.mapServices;
+				this.map = obj.map;
+				console.log(this.lMap);
+
+			},
+			drawSuccess(obj) {
+				this.polygonModel = {
+					fillColor: '#000',
+					stroke: '#fff',
+					width: 4,
+					text: '',
+					geo: obj.geoJson,
+					id: 'ceshi',
+				};
+			},
+			drawError(obj) {},
+			mapClick(e) {
+				// alert(e);
+			},
+			onLoad(e) {},
+			crossHairClick(e) {
+				// console.log(e);
+			},
+			mapMoveend(e) {
+				// alert(1);
+				// console.log(e);
+			},
+			loadDrawPolygonEvent(e) {
+				this.mapTool = e;
+			},
+			clusterCallback({
+				id,
+				isShow
+			}) {
+				setTimeout(r => {
+					this.showPolygon = {
+						id,
+						isShow
+					};
+					this.isCheckPoint = {
+						id,
+						isShow
+					};
+				}, 50);
+			},
+			changeSwitchMap(obj) {
+				if (obj.mapType == 2) {
+					this.gpsType = 0;
+					return;
+				}
+				this.gpsType = obj.mapType;
+			},
+			onClick() {
+				this.isRyMapTool = !this.isRyMapTool;
+			},
+			onClick2() {
+				this.maxZoom = 28;
+			},
+			onClick3() {
+				this.maxZoom = 10;
+			},
+			
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.map-style {
+		height: 100vh;
+		position: relative;
+	}
+</style>

package/src/views/pdf/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <vue-office-pdf :src="pdf" @rendered="rendered"/>
+</template>
+
+<script>
+//引入VueOfficePdf组件
+import VueOfficePdf from '@vue-office/pdf'
+
+export default {
+  components:{
+    VueOfficePdf
+  },
+  data(){
+    return {
+      pdf: 'http://static.shanhuxueyuan.com/test.pdf' //设置文档地址
+    }
+  },
+  methods:{
+    rendered(){
+      console.log("渲染完成")
+    }
+  }
+}
+</script>

package/src/views/staticMap/index.vue

@@ -0,0 +1,90 @@
+<template>
+	<div class="map-panel">
+		<RyStaticMap 
+		  :url="url" 
+		  :isRyMapTool="true" 
+		  :zoom="16" 
+		  :minZoom="14" 
+		  :isCrossHair="true" 
+		  :isShowDrawTool="true" 
+		  :isDrag="true" 
+		  :bindMapClick="true"  
+		   class="map-style" 
+		  :isHideAreaAndKM="true"
+		  :isShowRangingTool="false"
+		  @drawSuccess="drawSuccess"
+		  @drawError="drawError"
+		  @load="load" 
+		  @initLayersEvent="initLayersEvent" 
+		  @mapClick="mapClick">
+		  <template #polygon="{mapDto}">
+                <ry-polygon  :map="mapDto.map" :isShow="true"  :isFit="false" :model="polygonModel"  ></ry-polygon> 
+		  </template>
+		  </RyStaticMap>
+	</div>
+</template>
+
+<script>
+	import RyStaticMap from '@/components/maps/ryStaticMap/src/index.vue';
+
+	export default {
+		components: {
+			RyStaticMap,
+		},
+		data() {
+			return {
+				map: null,
+                url:require('@/assets/map.png'),
+				polygonModel:null,
+			};
+		},
+		created() {
+       
+        },
+		mounted() {},
+		methods: {
+			load(obj) {
+			},
+			initLayersEvent(obj) {
+				// console.log(obj);
+			},
+			mapClick(e) {
+				console.log(e);
+			},
+			drawSuccess({
+             delete: del,
+             geoJson
+          }) {
+				this.polygonModel = {
+					fillColor: 'rgba(244,20,20,0.4)',
+					stroke: 'rgba(244,20,20,0.4)',
+					width: 4,
+					text: '',
+					geo: geoJson,
+					id: 'ceshi',
+				};
+				del();
+			},
+			drawError(obj) {
+				console.log(obj);
+			},
+
+		},
+	}
+</script>
+
+<style scoped>
+	* {
+		padding: 0;
+		margin: 0;
+		box-sizing: border-box;
+	}
+
+	.map-panel {
+		height: 100vh;
+	}
+
+	.map-style {
+		height: 100%;
+	}
+</style>

package/src/views/tree/index.vue

@@ -0,0 +1,193 @@
+
+<template>
+  <div class="tree-style">
+      <el-tree
+        :data="data"
+        show-checkbox
+        default-expand-all
+        node-key="id"
+        ref="tree"
+        highlight-current
+        :props="defaultProps"
+		@check="onCheck"
+		check-strictly
+		>
+      </el-tree>
+	  
+	  <div class="buttons">
+	    <el-button @click="getCheckedNodes">通过 node 获取</el-button>
+	    <el-button @click="getCheckedKeys">通过 key 获取</el-button>
+	    <el-button @click="setCheckedNodes">通过 node 设置</el-button>
+	    <el-button @click="setCheckedKeys">通过 key 设置</el-button>
+	    <el-button @click="resetChecked">清空</el-button>
+	  </div>
+
+	  
+  </div>
+</template>
+
+
+<script>
+  export default {
+    methods: {
+		searchParent (map, id) {
+		    let t = []
+		    for (let i = 0; i < map.length; i++) {
+		        const e = map[i]
+		        if (e.id == id) {
+		            //若查询到对应的节点，则直接返回
+		            t.push(e)
+		            break
+		        } else if (e.children && e.children.length != 0) {
+		            //判断是否还有子节点，若有对子节点进行循环调用
+		            let p = this.searchParent(e.children, id)
+		            //若p的长度不为0，则说明子节点在该节点的children内，记录此节点，并终止循环
+		            if (p.length !== 0) {
+		                p.unshift(e)
+		                t = p
+		                break
+		            }
+		        }
+		    }
+		    return t;
+		},
+		
+		 treeToArray(tree) {
+		    if (!Array.isArray(tree) || !tree.length) return [];
+		    let res = []
+		    tree.forEach(v => {
+		        res.push(v)
+		        if (v.children) {
+		            res.push(...this.treeToArray(v.children))
+		        }
+		    })
+		    return res;
+		},
+		
+		convertTreeToArray(arr, parentId = null){
+		    const res = [];
+			let i=1;
+			
+		    arr.forEach(item => {
+		        if (item.parentId === parentId) {
+		            const children = this.convertTreeToArray(arr.filter(v => v.parentId !== parentId), item.id);
+		            const {id,label,parentId} = item;
+				    res.push({ id,label,parentId,l:i});
+		        }
+		    });
+			console.log('执行了')
+		    i++;
+			return res;
+		},
+	
+      getCheckedNodes() {
+        console.log(this.$refs.tree.getCheckedNodes());
+      },
+      getCheckedKeys() {
+        console.log(this.$refs.tree.getCheckedKeys());
+      },
+      setCheckedNodes() {
+        this.$refs.tree.setCheckedNodes([{
+          id: 5,
+          label: '二级 2-1'
+        }, {
+          id: 9,
+          label: '三级 1-1-1'
+        },
+		{
+			id: 3,
+			label: '一级 3',
+		}
+		]);
+      },
+      setCheckedKeys() {
+        this.$refs.tree.setCheckedKeys([3]);
+      },
+      resetChecked() {
+        this.$refs.tree.setCheckedKeys([]);
+      },
+	  onCheck(node,checkedKeys){
+		  // console.log(node);
+		  	console.log(this.searchParent(this.data,node.id));
+			const arr= this.searchParent(this.data,node.id);
+			if(arr.length){
+			   this.$refs.tree.setCheckedKeys(arr.map(r=> r.id)); 
+			}
+		 //  if(checkedNodes.children && checkedNodes.children.length){
+			// const ids =   checkedNodes.children.map(r=> r.id);
+			// console.log(checkedNodes);
+		 //  }
+	  }
+    },
+
+    data() {
+      return {
+        data: [{
+          id: 1,
+          label: '一级 1',
+		  parentId:0,
+          children: [{
+            id: 4,
+            label: '二级 1-1',
+	        parentId:1,
+            children: [{
+              id: 9,
+		      parentId:4,
+              label: '三级 1-1-1'
+            }, {
+              id: 10,
+	            parentId:4,
+              label: '三级 1-1-2'
+            }]
+          }]
+        }, {
+          id: 2,
+          label: '一级 2',
+		 parentId:0,
+          children: [{
+            id: 5,
+            label: '二级 2-1',
+	        parentId:2,
+          }, {
+            id: 6,
+            label: '二级 2-2',
+		    parentId:2,
+          }]
+        }, {
+          id: 3,
+          label: '一级 3',
+		  parentId:0,
+          children: [{
+            id: 7,
+            label: '二级 3-1',
+		    parentId:3,
+          }, {
+            id: 8,
+            label: '二级 3-2',
+			parentId:3,
+          }]
+        }],
+        defaultProps: {
+          children: 'children',
+          label: 'label'
+        },
+		arr:[],
+      };
+    },
+	created(){
+		// this.setArr(this.data);
+	
+	    this.arr= this.treeToArray(this.data)?.map(r=> {return{
+			id:r.id,
+			label:r.label,
+			parentId:r.parentId,
+		}});
+	
+		console.log(this.searchParent(this.data,10));
+		console.log(this.arr);	
+		  
+	
+	}
+  };
+</script>
+

package/src/views/vectorMap/index.vue

@@ -1,6 +1,16 @@
 <template>
 	<div class="map-panel" >
-		<RyVectorMap :isDrag="true" :bindMapClick="true" :modelArr="modelArr" class="map-style" @load="load" @initLayersEvent="initLayersEvent" @mapClick="mapClick"></RyVectorMap>
+		<RyVectorMap 
+		:isDrag="true" 
+		:bindMapClick="true" 
+		:modelArr="modelArr" 
+		class="map-style" 
+		@load="load" 
+		@initLayersEvent="initLayersEvent"
+		@mapClick="mapClick"
+		@drawSuccess="drawSuccess($event)"
+		@drawError="drawError($event)"
+		></RyVectorMap>
 	</div>
 </template>
 
@@ -21,7 +31,7 @@
 				map: null,
 				vmap: null,
 				modelArr:[],
-				
+				polygonModel:null,
 			};
 		},
 		created() {
@@ -29,7 +39,6 @@
 		mounted(){},
 		methods: {
 			load(obj) {
-				console.log(obj.map,obj.vmap);
 				this.initData();
 			},
 			initData(){
@@ -58,7 +67,19 @@
 			},
 			mapClick(e){
 				console.log(e);
-			}
+			},
+			drawSuccess(obj) {
+				this.polygonModel = {
+					fillColor: '#000',
+					stroke: '#fff',
+					width: 4,
+					text: '',
+					geo: obj.geoJson,
+					id: 'ceshi',
+				};
+
+			},
+			drawError(obj) {},
 		
 		},
 	}
@@ -78,4 +99,4 @@
 	.map-style{
 		 height: 100%;
 	}
-</style>
+</style>