ry-vue-map 0.2.3 → 0.2.6

package/src/views/map/index.vue

@@ -1,13 +1,13 @@
 <template>
 	<div class="map-style">
 
-		<ry-map projection="EPSG:4326" :zoom="15" :minZoom="1" :maxZoom="maxZoom" :center="center" @load="load($event)"
-			
-			:bindMapClick="true"
+		<ry-map projection="EPSG:4326" :zoom="15" :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)" :initModifyPolygon="geoJson"
+			@loadDrawPolygonEvent="loadDrawPolygonEvent($event)"
 			@changeSwitchMap="changeSwitchMap($event)"  :isShowSwitchMap="true"
 			>
 			<!--    <template slot="maptool">
@@ -23,43 +23,31 @@
 			<!--  :layerType="2"
 	  :mapType="1" -->
 			<template #marker="{mapDto}">
-				
-			
+				<!-- <RyKMLs :map="mapDto.map" :gpsType="gpsType" :modelArr="kmls" ></RyKMLs> -->
+				<RyKML :map="mapDto.map" :gpsType="gpsType" :model="model" ></RyKML>
 				<!-- <ry-polygon  :map="mapDto.map" :isShow="true" :polygonColor="colors" :model="polygonModel" :clear="isClear"  @onLoad="onLoad($event)"></ry-polygon> -->
 			<!-- 	<ry-polygon :isFit="false" :gpsType="gpsType" :map="mapDto.map" :model="polygonModel"></ry-polygon> -->
 			<!-- 	<ry-polygon-geo :isFit="true" :gpsType="gpsType"  :map="mapDto.map" :model="polygonModel6" > </ry-polygon-geo> -->
 				<!--   <ry-polygon :isFit="true" :isShowAll="isShowAll" :map="mapDto.map" :isShow="true"  :model="polygonModel"   @onLoad="onLoad($event)"></ry-polygon> -->
-				<!--     <ry-polygons :restFit="restFit" :isCheckPointHideAll="isShowAll" :isCheckPointHide="showPolygon"
-          :isCheckPointHides="showPolygons" :isShowPolygon="showPolygon" :isShowPolygons="showPolygons" :range="range"
-          :ranges="ranges" :insert="insert" :inserts="inserts" :isFit="isFit" :map="mapDto.map" :isShow="true"
-          :polygonColor="polygonColorObj" :remove="remove" :removes="removes" :polygonColors="polygonColors"
-          :modelArr="modelArr" @onLoad="onLoad($event)"></ry-polygons> -->
-
-	<!-- <ry-polygons
-      :map="mapDto.map"
-	  v-if="modelArr.length"
-      :modelArr="modelArr"
-      @onLoad="onLoad($event)"
-      :isShowPolygon="showPolygon" 
-	
-	  :inserts="inserts" 
-	  :gpsType="gpsType"></ry-polygons> -->
-      <ry-clusters
-	   :src="src" 
-	   fontColor="red" 
-	   :fontSize="23" 
-	   :distance="200"
-	   :gpsType="gpsType" 
-	   @callback="clusterCallback($event)"  
-	   :map="mapDto.map" 
-	   :modelArr="modelArr" 
-	   :offsetY="0"></ry-clusters>
 
 			</template>
 
 		</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>
 
@@ -69,25 +57,39 @@
 	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  RyClusters from '@/components/maps/ryClusters/src/index.vue';
+	import  RyClustersMarker from '@/components/maps/ryClustersMarker/src/index.vue';
 	import RyPolygonGeo from '@/components/maps/ryPolygonGeo/src/index.vue';
-	import RyLines from '@/components/maps/ryLines/src/index.vue';
-	import gJson from './3301';
-	import gJson2 from "./331123";
-	import gJson10 from "./330681";
+	import RyKMLs  from '@/components/maps/ryKMLs/src/index.vue';
+    import RyKML  from '@/components/maps/ryKML/src/index.vue';
 	import {
 		createPolygonBoundary,
 		GPS
 	} from "ry-map";
-	import dksj from './dksj.js';
-	// import lineData2 from './lineData2.js';
-	// import lineData2 from './lineData2.js';
-
-	// import {  convertWGS84,convertGCJ02 } from "ry-map/src/lzh";
 
-// import {
-//   toDateString
-// } from 'ele-admin/packages/util';
+	const  kmls=[
+{
+  "id": 4,
+  "url": "https://rydemo.ryaims.com:9443/ryfiles/31/a6ab6654b9f14a7c84af7289dda6636c.kml",
+  "gcj02Url": "https://rydemo.ryaims.com:9443/ryfiles/59/817d2f7752e54c9daa48dc1738871917.kml",
+  "bbox": [
+    121.91140167,
+    29.14645833,
+    121.920475,
+    29.16052167
+  ],
+},
+{
+  "id": 3,
+  "url": "https://rydemo.ryaims.com:9443/ryfiles/46/8c1e06765e0543cc9002b255fe41f372.kml",
+  "gcj02Url": "https://rydemo.ryaims.com:9443/ryfiles/80/2607c27c8da1408b8d8f4a9d6487eed1.kml",
+  "bbox": [
+    121.4692,
+    29.759945,
+    121.47069167,
+    29.761625
+  ],
+}
+];
 
 	export default {
 		components: {
@@ -95,8 +97,10 @@
 			RyMapTool,
 			RyPolygon,
 			RyPolygons,
-			RyClusters,
+			RyClustersMarker,
 			RyPolygonGeo,
+			RyKMLs,
+			RyKML
 		},
 		data() {
 			return {
@@ -107,14 +111,7 @@
 				isClear: false,
 				geoJson: null,
 				colors: [],
-				modelArr: [],
-				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: [  120.2687149,29.8142052],
+				center: [ 121.482227,28.5327395],
 				polygonColors: [],
 				remove: 'ceshi1',
 				removes: [],
@@ -132,20 +129,15 @@
 				isShowAll: false,
 				// isShow:true,
 				polygonModel: null,
-				geo: g1,
 				mapTool: null,
 				isCheckPoint: null,
-				gpsType: 0,
+				gpsType: 1,
 				isRyMapTool: true,
 				maxZoom: 18,
-				polygonModel5: polygonModel5,
-				polygonModel6:polygonModel6,
 			    src:require("@/assets/1.png"),
 				lineData1:null,
 				lineData2:null,
 				clearLiens:false,
-		    	// startMarkerDto:null,
-			    // endMarkerDto:null,
 				startMarkerDto: {
 	            url:require('@/assets/startpoint.png'),
 	 			height:23,
@@ -161,27 +153,25 @@
 				lineAppend:[],
 				isShowPaly:true,
 				layerArr:[2,2],
+				kmls,
+				model:null
 			};
 		},
-	    created(){
-			console.log(dksj);
-			const arr =[];
-			
-			dksj.forEach(r=> {
-				
-			  const _mode =	{
-					fillColor: '#000',
-					stroke: 'red',
-					width: 1,
-					// text: '测试1',
-					geo: r.geoJSON,
-					id: r.id,
-				};
-				arr.push(_mode);
-			});
-			this.modelArr=arr;
+		created() {
+//            this.model={
+//   "id": 3,
+//   "url": "https://rydemo.ryaims.com:9443/ryfiles/46/8c1e06765e0543cc9002b255fe41f372.kml",
+//   "gcj02Url": "https://rydemo.ryaims.com:9443/ryfiles/80/2607c27c8da1408b8d8f4a9d6487eed1.kml",
+//   "bbox": [
+//     121.4692,
+//     29.759945,
+//     121.47069167,
+//     29.761625
+//   ],
+// };
+		   
+ 
 		},
-	
 		methods: {
 			onShowPaly(b) {
 			  this.isShowPaly = b;
@@ -190,12 +180,6 @@
 			load(obj) {
 				this.lMap = obj.mapServices;
 				this.map = obj.map;
-				// console.log(obj);
-				// let g10 = GPS.convertGCJ02(gJson2);
-				// convertWGS84
-				// convertWGS84,convertGCJ02
-				//    const geo = createPolygonBoundary(g5);
-				// this.map.addLayer(geo );
 			},
 			drawSuccess(obj) {
 				this.polygonModel = {
@@ -213,11 +197,10 @@
 			},
 			onLoad(e) {},
 			crossHairClick(e) {
-				// console.log(e);
+
 			},
 			mapMoveend(e) {
-				// alert(1);
-				// console.log(e);
+
 			},
 			loadDrawPolygonEvent(e) {
 				this.mapTool = e;
@@ -226,16 +209,15 @@
 				id,
 				isShow
 			}) {
-				console.log(id);
 				setTimeout(r => {
 					this.showPolygon = {
 						id,
 						isShow
 					};
-					// this.isCheckPoint = {
-					// 	id,
-					// 	isShow
-					// };
+					this.isCheckPoint = {
+						id,
+						isShow
+					};
 				}, 50);
 			},
 			changeSwitchMap(obj) {

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>