ry-vue-map 0.3.3 → 0.3.4

package/src/views/map/index.vue

@@ -1,82 +1,88 @@
 <template>
 	<div class="map-style">
 
-		<ry-map projection="EPSG:4326" :center="center" :zoom="15" :minZoom="1" :maxZoom="maxZoom" @load="load($event)"
+		<!-- 	<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"
-			:isSwitchMapRight='true' :switchMapPosTop='60' :switchMapPosLeftOrRight="20" :switchMapHeight="40" 　
-			:switchMapDefaultTypeOrLayer="[1,2]" @mapMoveend="mapMoveend($event)"
-			@loadDrawPolygonEvent="loadDrawPolygonEvent($event)" @changeSwitchMap="changeSwitchMap($event)"
-			:isShowSwitchMap="true" @mapClick2="mapClick2($event)">
-
-			<template #marker="{mapDto}">
-
-				<!-- <ry-polygon-geo :isFit="true" :gpsType="gpsType"  :map="mapDto.map" :model="polygonModel" :isStandardGeo="true" > </ry-polygon-geo> -->
-				<!-- <RyKMLs v-if="kmlModels.length" :map="mapDto.map" :gpsType="gpsType" :modelArr="kmlModels" :isFit="true"
-					:setColor="setColor" red="rykmls"></RyKMLs> -->
-                 
-               <ry-static-layers :gpsType="gpsType"  :map="mapDto.map"  :modelArr="models" :isFit="true"></ry-static-layers>
-			</template>
-
-		</ry-map>
-
+			@mapMoveend="mapMoveend($event)" v-if="dto" :boundaryModel="dto" :urls="urls" :bbox="bbox">
+		</ry-map> -->
+
+		<RyStaticMap class="map-style" :url="url"
+			:minZoom="15" :maxZoom="18" :zoom="15.6" :center="center" @load="loadMap" @selectMapEvent="selectMapEvent">
+		</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 RyMap from '@/components/maps/ryMap/src/index.vue';
+	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 geo from './ceshijson';
-	import RyKMLs from '@/components/maps/ryKMLs/src/index.vue';
-	import urls from './imgUrl';
-	import RyStaticLayers from '@/components/maps/ryStaticLayers/src/index.vue';
-	import {
-		createPolygonBoundary,
-		GPS,
-		getLngAndLatMaxMin
-	} from "ry-map";
-	const polygonModel = {
-		fillColor: 'transparent',
-		stroke: '#F7B500',
-		strokeWidth: 3,
-		lineDash: [1, 2, 3, 4, 5, 6],
-		geo: geo,
-		id: 'ceshi5',
-	};
+	import geoJson from "./330112";
+
 
-	import {
-		getCenter,
-		getHeight,
-		getWidth
-	} from 'ol/extent';
 
 	export default {
 		components: {
-			RyMap,
+			RyStaticMap,
 			RyMapTool,
 			RyPolygon,
 			RyPolygons,
 			RyClustersMarker,
 			RyPolygonGeo,
-			RyKMLs,
-			RyStaticLayers
 		},
 		data() {
 			return {
 				map: null,
 				lMap: null,
 				polygonColorObj: null,
-				bbox: [],
+				// 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,
-				geoJson: null,
 				colors: [],
-				center: [121.28732413948202, 28.645057235065444],
+				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: [],
@@ -92,110 +98,68 @@
 				}],
 				inserts: [],
 				isShowAll: false,
-				// isShow:true,
-				polygonModel: polygonModel,
+				polygonModel: null,
 				mapTool: null,
 				isCheckPoint: null,
-				gpsType: 1,
+				gpsType: 0,
 				isRyMapTool: true,
 				maxZoom: 18,
-				src: require("@/assets/1.png"),
-				layerArr: [1, 2],
-				kmlModels: [],
-				setColor: null,
-				models:[],
+				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,
+				url: 'http://localhost:8601/uploads/5d53650724f04dd3b2d90a7adaddc87e.png',
 			};
 		},
 		created() {
-			console.log(urls);
-			setTimeout(r => {
-				 this.models=[urls[0]];
-				 this.bbox=this.models[1].bbox;
-			},3000);
-			// setTimeout(r => {
-			// 			this.kmlModels = [{
-			// 					"bbox": [
-			// 						120.063902,
-			// 						30.860046,
-			// 						120.064164,
-			// 						30.860164,
-			// 						"id": 1869,
-			// 						"url":
-			// 						"https://rydemo.ryaims.com:9443/ryfiles/81/b8c2429815344596ada3767f1668c438.kml",
-			// 						"gcj02Url":
-			// 						"https://rydemo.ryaims.com:9443/ryfiles/31/aed50d22cc6d4093b212184854f5b6ea.kml",
-			// 						"width": "2",
-			// 						"extractStyles": false,
-			// 						"stroke": "rgb(6,108,211)",
-			// 						"fillColor": "rgb(6,108,211)"
-			// 					},
-			// 					{
-			// 						"bbox": [
-			// 							120.063138,
-			// 							30.858118,
-			// 							120.064633,
-			// 							30.859334
-			// 						],
-			// 						"id": 1871,
-			// 						"url": "https://rydemo.ryaims.com:9443/ryfiles/33/66f97d83f0e546b09c711abb4e1173e1.kml",
-			// 						"gcj02Url": "https://rydemo.ryaims.com:9443/ryfiles/40/9eb63a47aba545f098139856bcbfd0a4.kml",
-			// 						"width": "2",
-			// 						"extractStyles": false,
-			// 						"stroke": "rgb(12,217,166)",
-			// 						"fillColor": "rgb(12,217,166)"
-			// 					}
-			// 				];
-			// 			}, 3000);
-
-			// 		setTimeout(r => {
-			// 			this.setColor = {
-			// 				id: 1869,
-			// 				color: '#000'
-			// 			}
-			// 		}, 5000);
-
-			// 		setTimeout(r => {
-			// 			this.setColor = {
-			// 				id: 1871,
-			// 				color: '#000'
-			// 			}
-			// 		}, 6000);
-
-
-			// 	setTimeout(r=> {
-			// 	 this.$$refs.rykmls.setFit();
-			// },8000);
-
+			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;
-			},
-			load(obj) {
-				this.lMap = obj.mapServices;
-				this.map = obj.map;
-				// const geo2 = createPolygonBoundary(geo);
-				// this.map.addLayer(geo2 );
 
-				// console.log(geo2.getSource().getExtent());
-			},
-			getExtent() {
-				const geometry = this.getGeometry();
-				return geometry.getExtent();
 			},
 			drawSuccess(obj) {
-				// this.polygonModel = {
-				// 	fillColor: '#000',
-				// 	stroke: '#fff',
-				// 	width: 4,
-				// 	text: '',
-				// 	geo: obj.geoJson,
-				// 	id: 'ceshi',
-				// };
+				this.polygonModel = {
+					fillColor: '#000',
+					stroke: '#fff',
+					width: 4,
+					text: '',
+					geo: obj.geoJson,
+					id: 'ceshi',
+				};
 			},
 			drawError(obj) {},
 			mapClick(e) {
-				console.log(e);
 				// alert(e);
 			},
 			onLoad(e) {},
@@ -203,9 +167,8 @@
 				// console.log(e);
 			},
 			mapMoveend(e) {
-
 				// alert(1);
-				console.log(e);
+				// console.log(e);
 			},
 			loadDrawPolygonEvent(e) {
 				this.mapTool = e;
@@ -233,21 +196,19 @@
 				this.gpsType = obj.mapType;
 			},
 			onClick() {
-				this.isRyMapTool = !this.isRyMapTool;
+				this.url="http://localhost:8601/uploads/5d53650724f04dd3b2d90a7adaddc87e.png";
+				// this.isRyMapTool = !this.isRyMapTool;
 			},
 			onClick2() {
-				this.maxZoom = 28;
+						this.url="http://localhost:8601/uploads/23070b484f53466b9dd07c6757da9204.png";
+				// this.maxZoom = 28;
 			},
 			onClick3() {
 				this.maxZoom = 10;
 			},
-			mapClick2(feature) {
-				alert(1);
-
-				// feature.get('ZLDWMC');
-				console.log(feature.get('name'));
+            selectMapEvent(){
+		
 			}
-
 		}
 	};
 </script>
@@ -256,6 +217,5 @@
 	.map-style {
 		height: 100vh;
 		position: relative;
-
 	}
 </style>