ry-vue-map 0.2.2 → 0.2.5

package/src/views/map/index3.vue

@@ -0,0 +1,207 @@
+<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/map/index4.vue

@@ -0,0 +1,207 @@
+<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>