ry-vue-map 0.4.4 → 0.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ry-vue-map",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "private": false,
   "main": "lib/ryui.umd.min.js",
   "description": "ry公共组件库",

package/src/assets//345/234/237/345/243/244/345/217/202/346/225/260/347/203/255/345/212/233/345/233/276/bbox.txt

@@ -0,0 +1,4 @@
+PH：
+bbox:[119.4830523878688,30.17494943404726,119.5172307870407,30.20294858200727]
+有机质、氮、磷、钾
+bbox:[119.4832605106809,30.17522722800645,119.5162239935529,30.20240023288245]

package/src/components/maps/models/ryStaticLayer/index.js

@@ -8,6 +8,7 @@ export default class RyKMLDto extends Base {
     default: () => null,
   };
 
+  
   // 显示或隐藏
   isShow = {
     type: Boolean,

package/src/components/maps/ryStaticLayer/src/index.vue

@@ -24,7 +24,7 @@
 		watch: {
 			model(val) {
 				this._remove();
-				if (!val.length) return;
+				if (!val) return;
 				this.init(val);
 			},
 			gpsType(val) {
@@ -68,17 +68,22 @@
 					url,
 					bbox,
 					zIndex,
+					projection
 				} = dto;
+				let _projection = 'EPSG:4326';
+				        if (projection instanceof Object) {
+				            _projection= projection;
+				        }
 					const img = new StaticImage({
 							id,
 							url,
 							imageExtent:bbox,
 							zIndex,
-							type:this.gpsType
+							type:this.gpsType,
+							projection:_projection,
 					},
 					this.map);
 					this.staticImg=img;
-	
 		     		this.setBBOXArr(bbox);
 			},
 			setBBOXArr(bbox) {

package/src/components/maps/ryVectorMap/src/index.vue

@@ -1,6 +1,8 @@
 <template>
 	<div class="vector-map" v-lmap:loadMap>
+	<slot name="polygon" :mapDto="{map,lMap}">
 
+			</slot>
 	</div>
 </template>
 
@@ -80,6 +82,7 @@
 					callback: r => this.$emit('initLayersEvent', r),
 				});
 				this.map=map;
+				
 				this.vmap=vmap;
 				this.polygonMap=vmap.getLayerMap;
 				this._bingMapEvent();

package/src/router/index.js

@@ -11,7 +11,8 @@ Vue.use(VueRouter);
 const routes = [
 	{
 	  path: '/',
-	  component: () => import('@/views/map'),
+	  // component: () => import('@/views/map'),
+	   component: () => import('@/views/vectorMap'),
 	  meta: { title: '地图' }
 	},
 	{
@@ -40,7 +41,7 @@ const routes = [
 	  meta: { title: 'docx' }
 	},
 	{
-	  path: '/',
+	  path: '/vectorMap',
 	  component: () => import('@/views/vectorMap'),
 	  meta: { title: '地图' }
 	},

package/src/views/map/index.vue

@@ -1,17 +1,17 @@
-<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>
-
+<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"
@@ -20,256 +20,261 @@
         :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'; 
-	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:{
-					id:1,
-					url:require('@/assets/layer.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.4830523878688,30.17494943404726,119.5172307870407,30.20294858200727],
-					zIndex:10,
-				},
-				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.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;
-	}
+      </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:'http://127.0.0.1:10003/linan2.png',
+				     bbox:[118.84146054770122, 29.935677496166022, 119.86391954737257, 30.44823698639243],
+					 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>