ry-vue-map 0.6.2 → 0.6.3

package/src/views/map/new_file.vue

@@ -1,280 +0,0 @@
-<template>
-	<div class="map-style">
-
-		  <ry-map :maxZoom="18" @load="loadMap($event)" :isShowSwitchMap="false" :layerType="2" :mapType="0">
-			     <template #polygon="{ mapDto }">
-				<!-- 	 <RyStaticLayer :map="mapDto.map" :model="model2">
-					 	
-					 </RyStaticLayer>
-					<RyStaticLayer :map="mapDto.map" :model="model">
-						
-					</RyStaticLayer> -->
-			      </template>
-		  </ry-map>
-
-<!--     <RyOfflineMap
-        class="ry-offline-map"
-        :urls="urls"
-        :center="[118.84146054770122, 29.935677496166022]"
-        :minZoom="1"
-        :maxZoom="18"
-        @load="load"
-      >
-      </RyOfflineMap> -->
-
-		<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/ryMap/src/index.vue';
-   import RyOfflineMap 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";
-	import LineObj from './obj'
-	import RyLines from '@/components/maps/ryLines/src/index.vue';
-    import RyKML from '@/components/maps/ryKML/src/index.vue';
-	import RyStaticLayer from '@/components/maps/ryStaticLayer/src/index.vue'; 
-	const bboxs=[
-		[119.4832605106809,30.17522722800645,119.5162239935529,30.20240023288245],
-		[119.4832605106809,30.17522722800645,119.5162239935529,30.20240023288245],
-		[119.4832605106809,30.17522722800645,119.5162239935529,30.20240023288245],
-		[119.4832605106809,30.17522722800645,119.5162239935529,30.20240023288245],
-		[119.4830523878688,30.17494943404726,119.5172307870407,30.20294858200727],
-	];
-	export default {
-		components: {
-			RyMap,
-			RyMapTool,
-			RyPolygon,
-			RyPolygons,
-			RyClustersMarker,
-			RyPolygonGeo,
-			RyLines,
-			RyKML,
-			RyStaticLayer,
-			RyOfflineMap
-		},
-		data() {
-			return {
-				// bbox:[119.5172307870407,30.20294858200727,119.4830523878688,30.17494943404726],
-				kmlDto:null,
-				map: null,
-				lMap: null,
-				polygonColorObj: null,
-				lineData: null,
-				isShowPaly: false,
-				// const bbox = [ 118.84072600000002, 29.937127000000032, 119.86315600000012, 30.445895000000064 ];
-				// const center = [119.34667114000006, 30.198078622500038];
-
-				// bbox: [118.84146054770122, 29.935677496166022, 119.86391954737257, 30.44823698639243],
-				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.45009201705076, 30.177110869281915],
-				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: 1,
-				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: [
-				// 	`https://zjhzla.ryaims.com/overlay/330112/satellite/{z}/{x}/{y}.jpg`,
-				// 	// `https://zjhzla.ryaims.com/overlay/330112/roadmap/{z}/{x}/{y}.png`,
-				// 	// `http://127.0.0.1:10006/${330112}/overlay/{z}/{x}/{y}.png`
-				// ],
-				urls:[
-					`http://127.0.0.1:10003/{z}/{x}/{y}.png`
-				],
-				model:null,
-				// model2:{
-				// 	id:2,
-				// 	url:require('@/assets/linan.png'),
-				// 		// bbox:[119.5172307870407,30.20294858200727,119.4830523878688,30.17494943404726],
-				// 		// bbox:[119.4830523878688,30.17494943404726,119.5172307870407,30.20294858200727],
-				// 		// bbox:[119.4830523878688,30.20294858200727,119.5172307870407,30.17494943404726],
-				// 	  bbox:[119.485901,30.177281,119.514383,30.200616],
-				// 	zIndex:9,
-				// },
-				dto: null,
-			};
-		},
-		created() {
-			this.dto = {
-				geo: geoJson,
-				width: 6,
-				color: '#00adfd',
-				lineDash: [1, 2, 3, 4, 5, 6, 8, 9, 10],
-			};
-		},
-		methods: {
-			onShowPaly(b) {
-				this.isShowPaly = b;
-			},
-			trackPlayEvent(e) {
-				console.log(e);
-			},
-			loadMap(e){
-				// this.model={
-				// 	 id:1,
-				// 	url:require('@/assets/layer1.png'),
-				// 	 bbox:bboxs[0],
-				// 	zIndex:10,
-				// };
-				// this.kmlDto={
-				// 	bbox:[119.4830523878688,30.17494943404726,119.5172307870407,30.20294858200727],
-				// 	id: 'workId',
-				// 	url:'http://localhost:7601/1.kml',
-				// 	gcj02Url:'http://localhost:7601/1.kml'
-				// };
-			},
-			load(obj) {
-				console.log(obj);
-				this.lMap = obj.mapServices;
-				this.map = obj.map;
-				setTimeout(r => {
-					this.lineData = LineObj;
-				}, 3000);
-				this.lineData = LineObj;
-			},
-			drawSuccess(obj) {
-				this.polygonModel = {
-					fillColor: '#000',
-					stroke: '#fff',
-					width: 4,
-					text: '',
-					geo: obj.geoJson,
-					id: 'ceshi',
-				};
-			},
-			drawError(obj) {},
-			mapClick(e) {
-				console.log('ee========',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>