ry-vue-map 0.3.1 → 0.3.3

package/src/views/map/index.vue

@@ -1,31 +1,22 @@
 <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" :center="center" :zoom="15" :minZoom="1" :maxZoom="maxZoom" @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)"
-			>
+			@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-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>
@@ -39,16 +30,18 @@
 	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 RyClustersMarker from '@/components/maps/ryClustersMarker/src/index.vue';
 	import RyPolygonGeo from '@/components/maps/ryPolygonGeo/src/index.vue';
-    import geo from './ceshijson';
+	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 = {
+	const polygonModel = {
 		fillColor: 'transparent',
 		stroke: '#F7B500',
 		strokeWidth: 3,
@@ -57,11 +50,11 @@
 		id: 'ceshi5',
 	};
 
-import {
-  getCenter,
-  getHeight,
-  getWidth
-} from 'ol/extent';
+	import {
+		getCenter,
+		getHeight,
+		getWidth
+	} from 'ol/extent';
 
 	export default {
 		components: {
@@ -71,7 +64,8 @@ import {
 			RyPolygons,
 			RyClustersMarker,
 			RyPolygonGeo,
-			RyKMLs 
+			RyKMLs,
+			RyStaticLayers
 		},
 		data() {
 			return {
@@ -82,7 +76,7 @@ import {
 				isClear: false,
 				geoJson: null,
 				colors: [],
-				center: [  121.28732413948202,28.645057235065444],
+				center: [121.28732413948202, 28.645057235065444],
 				polygonColors: [],
 				remove: 'ceshi1',
 				removes: [],
@@ -105,98 +99,90 @@ import {
 				gpsType: 1,
 				isRyMapTool: true,
 				maxZoom: 18,
-			    src:require("@/assets/1.png"),
-				layerArr:[1,2],
-				kmlModels:[],
-				setColor:null,
+				src: require("@/assets/1.png"),
+				layerArr: [1, 2],
+				kmlModels: [],
+				setColor: null,
+				models:[],
 			};
 		},
 		created() {
-			// :bbox="[121.28732413948202, 28.447719613141608, 121.6675012766673, 28.645057235065444]"
-			// console.log(geo.features);
-			// var arr=[];
-			// for(let i=0;i<geo.features.length;i++){
-			// 	let {geometry:{coordinates},properties}=geo.features[i];
-			// 	// console.log(geo.features[i]);
-			// 	// console.log(coordinates);
-			//      properties.bbox=getLngAndLatMaxMin(coordinates);
-		
-			// 	 properties.center=getCenter(properties.bbox);
-			// 	 arr.push(properties);
-			// 	// console.log(getLngAndLatMaxMin(coordinates));
-			// }
-			// console.log(arr);
-// 			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);
+			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: 1869,
+			// 				color: '#000'
+			// 			}
+			// 		}, 5000);
 
-				setTimeout(r=> {
-				this.setColor={
-					id:1871,
-					color:'#000'
-				}
-			},6000);
+			// 		setTimeout(r => {
+			// 			this.setColor = {
+			// 				id: 1871,
+			// 				color: '#000'
+			// 			}
+			// 		}, 6000);
 
 
-           	// 	setTimeout(r=> {
+			// 	setTimeout(r=> {
 			// 	 this.$$refs.rykmls.setFit();
 			// },8000);
-	
+
 		},
 		methods: {
 			onShowPaly(b) {
-			  this.isShowPaly = 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());
+
+				// console.log(geo2.getSource().getExtent());
+			},
+			getExtent() {
+				const geometry = this.getGeometry();
+				return geometry.getExtent();
 			},
-			getExtent(){
-               const geometry = this.getGeometry();
-               return geometry.getExtent();
-            },
 			drawSuccess(obj) {
 				// this.polygonModel = {
 				// 	fillColor: '#000',
@@ -217,9 +203,9 @@ import {
 				// console.log(e);
 			},
 			mapMoveend(e) {
-				
+
 				// alert(1);
-				 console.log(e);
+				console.log(e);
 			},
 			loadDrawPolygonEvent(e) {
 				this.mapTool = e;
@@ -255,11 +241,13 @@ import {
 			onClick3() {
 				this.maxZoom = 10;
 			},
-			mapClick2(feature){
+			mapClick2(feature) {
+				alert(1);
+
 				// feature.get('ZLDWMC');
-				console.log(feature.get('ZLDWMC'));
+				console.log(feature.get('name'));
 			}
-			
+
 		}
 	};
 </script>
@@ -270,4 +258,4 @@ import {
 		position: relative;
 
 	}
-</style>
+</style>