ry-vue-map 0.4.4 → 0.4.6

package/src/views/vectorMap/index.vue

@@ -1,71 +1,93 @@
 <template>
-	<div class="map-panel" >
-		<RyVectorMap 
-		:isDrag="true" 
-		:bindMapClick="true" 
-		:modelArr="modelArr" 
-		class="map-style" 
-		@load="load" 
-		@initLayersEvent="initLayersEvent"
-		@mapClick="mapClick"
-		@drawSuccess="drawSuccess($event)"
-		@drawError="drawError($event)"
-		></RyVectorMap>
+	<div class="map-panel">
+		<RyVectorMap :isDrag="true" :bindMapClick="true" :modelArr="modelArr" class="map-style" @load="load"
+			@initLayersEvent="initLayersEvent" @mapClick="mapClick" @drawSuccess="drawSuccess($event)"
+			@drawError="drawError($event)">
+
+			<template #polygon="{ mapDto }">
+				<RyStaticLayer :map="mapDto.map" :model="model">
+				</RyStaticLayer>
+			</template>
+
+		</RyVectorMap>
 	</div>
 </template>
 
 <script>
 	import RyVectorMap from '@/components/maps/ryVectorMap/src/index.vue';
-	import geoArr from './geo';
+	import geoArr from './330112';
+	import RyStaticLayer from '@/components/maps/ryStaticLayer/src/index.vue';
 	// import geoArr from './geoJson.js';
+	import Projection from 'ol/proj/Projection';
 	import {
-	  VectorMap
+		VectorMap
 	} from 'ry-map'
-	
+
 	export default {
 		components: {
 			RyVectorMap,
+			RyStaticLayer,
 		},
 		data() {
 			return {
 				map: null,
 				vmap: null,
-				modelArr:[],
-				polygonModel:null,
+				modelArr: [],
+				polygonModel: null,
+				model: null,
 			};
 		},
 		created() {
+
 		},
-		mounted(){},
+		mounted() {},
 		methods: {
 			load(obj) {
 				this.initData();
 			},
-			initData(){
-			   let modelArr = [];
-				geoArr.forEach( (r,key)=> {
-				  modelArr.push(
-				    {
-				      geo: r,
-				      fillColor: 'rgba(0,80,230,0.3)',
-				      stroke: "rgba(192,199,237,1)",
-				      strokeWidth: 0.6,
-				      id:key + 1,
-				      lineDash: new Array(),
-				    }
-				   );
-				   return;
+			initData() {
+				let modelArr = [];
+
+				console.log(geoArr);
+
+				modelArr.push({
+					geo: geoArr,
+					fillColor: 'rgba(0,80,230,0.3)',
+					stroke: "rgba(192,199,237,1)",
+					strokeWidth: 0.6,
+					id: 1,
+					lineDash: new Array(),
 				});
-				
-				modelArr[0].fillColor='transparent';
-				modelArr[0].stroke='rgba(163,175,185,1)';
-				modelArr[0].strokeWidth=2;
-				this.modelArr= modelArr;
+			
+				// geoArr.forEach((r, key) => {
+				// 	modelArr.push({
+				// 		geo: r,
+				// 		fillColor: 'rgba(0,80,230,0.3)',
+				// 		stroke: "rgba(192,199,237,1)",
+				// 		strokeWidth: 0.6,
+				// 		id: key + 1,
+				// 		lineDash: new Array(),
+				// 	});
+				// 	return;
+				// });
+
+				// modelArr[0].fillColor = 'transparent';
+				// modelArr[0].stroke = 'rgba(163,175,185,1)';
+				// modelArr[0].strokeWidth = 2;
+				this.modelArr = modelArr;
+
+				this.model = {
+					id: 1,
+					url: 'http://127.0.0.1:10003/linan2.png',
+					bbox: [118.84146054770122, 29.935677496166022, 119.86391954737257, 30.44823698639243],
+					zIndex: 100,
+					projection:{},
+				};
 			},
-			initLayersEvent(obj){
+			initLayersEvent(obj) {
 				// console.log(obj);
 			},
-			mapClick(e){
+			mapClick(e) {
 				console.log(e);
 			},
 			drawSuccess(obj) {
@@ -80,23 +102,24 @@
 
 			},
 			drawError(obj) {},
-		
+
 		},
 	}
 </script>
 
-<style scoped >
-	*{
+<style scoped>
+	* {
 		padding: 0;
 		margin: 0;
 		box-sizing: border-box;
 	}
-	
-	.map-panel{
-		 height: 100vh;
-		 background:#000;
+
+	.map-panel {
+		height: 100vh;
+		background: #000;
 	}
-	.map-style{
-		 height: 100%;
+
+	.map-style {
+		height: 100%;
 	}
-</style>
+</style>