ry-vue-map 0.4.4 → 0.4.6

package/src/views/map/indexStatic.vue

@@ -1,216 +1 @@
-<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> -->
-
-      <RyStaticMap  class="map-style"   :url="item.url" :minZoom="15" :maxZoom="18" :zoom="15.6"
-       :center="center" @load="loadMap">
-      </RyStaticMap>
-
-		<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 RyStaticMap from '@/components/maps/ryStaticMap/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: {
-			RyStaticMap,
-			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],
-				dto: null,
-			};
-		},
-		created() {
-			this.dto = {
-				geo: geoJson,
-				width: 4,
-				color: '#000'
-			};
-			console.log(this.dto);
-		},
-		methods: {
-			    async loadMap({
-			      map,
-			      mapServices
-			       }) {
-			       this.map = map;
-			       this.lMap = mapServices;
-			       },
-			onShowPaly(b) {
-				this.isShowPaly = b;
-
-			},
-			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>
+<template></template>

package/src/views/map/new_file.vue

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