ry-vue-map 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ry-vue-map",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "private": false,
   "main": "lib/ryui.umd.min.js",
   "description": "ry公共组件库",
@@ -38,7 +38,7 @@
     "element-ui": "~2.15.6",
     "nprogress": "~0.2.0",
     "ol": "^6.14.1",
-    "ry-map": "^0.2.7",
+    "ry-map": "^0.3.0",
     "vue": "~2.6.14",
     "vue-router": "~3.5.2",
     "vue-server-renderer": "^2.6.14",

package/src/components/index.js

@@ -5,12 +5,13 @@ import RyMapTool from './maps/ryMapTool';
 import RyPolygon from './maps/ryPolygon';
 import RyPolygons from './maps/ryPolygons';
 import RyClusters from './maps/ryClusters';
+import RyClustersMarker from './maps/ryClustersMarker';
 import RyPolygonGeo from './maps/ryPolygonGeo';
 
 // import "./fonts/iconfont.css";
 
 // 组件列表
-const components = [ RyMap,RyCrossHair,RyMapTool, RyPolygon,RyPolygons,RyClusters, RyPolygonGeo];
+const components = [ RyMap,RyCrossHair,RyMapTool, RyPolygon,RyPolygons,RyClusters, RyPolygonGeo, RyClustersMarker];
 
 // 定义install
 const install = (Vue, options) => {

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

@@ -10,19 +10,18 @@
           fillColor: 'rgba(184, 233, 134, 0.56)',
           stroke: 'rgba(23, 168, 162, 0.56)',
           width: 3,
-          id:'ceshi',
+          // id:'ceshi',
           text:'快'
         };
   import {
      CheckPoint,
      GrahamScan,
      LPolygonNew,
-     LCluster,
      FeaturePolygon,
      FeaturePolygonModel,
      getCenterPoint,
      getLngAndLatMaxMin,
-
+	 LCluster,
   }from 'ry-map'
 
   export default {
@@ -43,7 +42,23 @@
       gpsType:{
         type:Number,
         default:0,
-      }
+      },
+	  color:{
+	    type:String,
+	    default:'#fff',
+	  },
+	  fontSize:{
+	    type:Number,
+	    default:14,
+	  },
+	  offsetX:{
+	    type:Number,
+	    default:0,
+	  },
+	  offsetY:{
+	    type:Number,
+	    default:0,
+	  }
     },
     data() {
       return {
@@ -51,7 +66,7 @@
         checkPointArr: new Map(),
         currentArr: Array(),
         fpModelArr: [],
-        featurePolygon: new FeaturePolygon(),
+        featurePolygon: new FeaturePolygon(this.gpsType),
         multiPolygonMap: new Map(),
         // model: new multiPolygonGeoJsonModel(),
         scan: new GrahamScan(),
@@ -69,8 +84,8 @@
         }
       },
       gpsType(val){
-          this.gpsType=val;
-          this.selectGPSAll(2);
+          this.gpsType = val;
+          this.selectGPSAll(val);
       }
     },
     created(){
@@ -100,12 +115,14 @@
         idSet.forEach(val => {
           this.removeAggregation(val);
         });
-        const options = {
+
+		const options = {
           ...this.clusterPolygonModel,
           coordinates: [this.scan.getHull()],
           ids: idSet
         };
-        this.polygonSet.add(new LPolygonNew({...options,type:this.gpsType}, this.map));
+	
+        this.polygonSet.add(new LPolygonNew({...options,gpsType:this.gpsType}, this.map));
       },
       removeAggregation(id) {
         let arr = [];
@@ -175,14 +192,13 @@
             center,
             bbox,
           } = this._serializeGeoJson(res.geo);
-
           const dto = this.createFeaturePolygonModel(res.id, center);
-
           this.fpModelArr.push(dto);
         });
+		// this.fpModelArr.push('this.fpModelArr',this.fpModelArr.length);
       },
       initCluster() {
-        const cp = new LCluster((feature, featureArr, b) => {
+          const cp = new LCluster((feature, featureArr, b) => {
           const _id = feature.getId();
           if (b) {
              this.$emit('callback', {id:_id, isShow:true});
@@ -205,6 +221,10 @@
           }
         }, {
           text: this.clusterPolygonModel.text,
+		  offsetX:this.offsetX,
+		  offsetY:this.offsetY,
+		  fontSize:this.fontSize,
+		  color:this.fontColor,
           aggregationCallback: (arr) => {
             this.mergeGeoJson(arr);
           },
@@ -224,12 +244,13 @@
       },
 
       selectGPSAll(type){
-        this.checkPointArr.forEach(val => {
-            val.selectGPS(type);
-        });
         this.polygonSet.forEach(val => {
            val.selectGPS(type);
         });
+		
+		if(this.featurePolygon){
+			this.featurePolygon.selectGPSAll(type);
+		}
       }
     },
   }

package/src/components/maps/ryClustersMarker/index.js

@@ -0,0 +1,7 @@
+import RyClustersMarker from './src/index';
+
+RyClustersMarker.install = (Vue) => {
+  Vue.install(RyClustersMarker.name, RyClustersMarker);
+};
+
+export default RyClustersMarker;

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

@@ -0,0 +1,149 @@
+<template>
+	<div>
+
+	</div>
+</template>
+
+<script>
+	import LMapServices from '@/utils/lMapServices.js';
+	const _clusterPolygon = {
+		fillColor: 'rgba(184, 233, 134, 0.56)',
+		stroke: 'rgba(23, 168, 162, 0.56)',
+		width: 3,
+		// id:'ceshi',
+		text: '快'
+	};
+	import {
+		GrahamScan,
+		FeaturePolygon,
+		FeaturePolygonModel,
+		LClusterMarker as LCluster,
+	} from 'ry-map'
+
+	export default {
+		name: 'RyClusters',
+		props: {
+			modelArr: {
+				type: Array,
+				default: () => [],
+			},
+			text: {
+				type: String,
+				default: () => '台',
+			},
+			map: {
+				type: Object,
+				default: () => null
+			},
+			gpsType: {
+				type: Number,
+				default: 0,
+			},
+			color: {
+				type: String,
+				default: '#fff',
+			},
+			src: {
+				type: String,
+				default: () => null,
+			},
+			fontSize: {
+				type: Number,
+				default: 14,
+			},
+			offsetX: {
+				type: Number,
+				default: 0,
+			},
+			offsetY: {
+				type: Number,
+				default: 0,
+			}
+		},
+		data() {
+			return {
+				fpModelArr: [],
+				featurePolygon: new FeaturePolygon(this.gpsType),
+				scan: new GrahamScan(),
+				polygonSet: new Set(),
+			}
+		},
+		beforeDestroy() {
+			this.clear();
+		},
+		watch: {
+			modelArr(data) {
+				if (this.map) {
+					this.clear();
+					this.init();
+				}
+			},
+			gpsType(val) {
+				this.gpsType = val;
+				this.selectGPSAll(val);
+			}
+		},
+		created() {
+			this.clear();
+			this.init();
+		},
+		methods: {
+			clear() {},
+			createFeaturePolygonModel(id, coordinates) {
+				return new FeaturePolygonModel(coordinates, id);
+			},
+			async init() {
+				this.initFeature();
+				this.initCluster();
+			},
+			initFeature() {
+				this.modelArr.forEach(res => {
+					const dto = this.createFeaturePolygonModel(res.id, [res.x, res.y]);
+					this.fpModelArr.push(dto);
+				});
+			},
+			initCluster() {
+				const cp = new LCluster((feature, featureArr, b) => {
+					const _id = feature.getId();
+					if (b) {
+						this.$emit('callback', {
+							id: _id,
+							isShow: true
+						});
+						return;
+					} else {
+						this.$emit('callback', {
+							id: _id,
+							isShow: false
+						});
+					}
+				}, {
+					text: this.text,
+					offsetX: this.offsetX,
+					offsetY: this.offsetY,
+					fontSize: this.fontSize,
+					color: this.fontColor,
+					src: this.src,
+					aggregationCallback: (arr) => {
+
+					},
+					removeAggregationCallback: (feature) => {}
+				});
+
+				const vectorSource = this.featurePolygon.getVectorSource(this.fpModelArr);
+
+				const vectorLayer = cp.getVectorLayer(vectorSource);
+
+				this.map.addLayer(vectorLayer);
+			},
+
+			selectGPSAll(type) {
+				if (this.featurePolygon) {
+					this.featurePolygon.selectGPSAll(type);
+				}
+			}
+		},
+	}
+</script>
+<style lang="scss" scoped>
+</style>

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

@@ -160,7 +160,7 @@
 					this.setMaxZoom(18);
 				}
 			},
-			loadMap(el) {
+			loadMap(el,layers) {
 				// const dto =
 				this.lMap.init({
 					el,

package/src/utils/lMapServices.js

@@ -91,6 +91,7 @@ export default class LMapServices {
     this.drawPolygonArr = new Set();
     this.drawLineArr = new Set();
 	this._lRectangle=null;
+	this.layers=null;
   }
   init(optins) {
     const {
@@ -129,12 +130,13 @@ export default class LMapServices {
         if (this.map) {
           this.map = null;
         }
-
-        this.map = await this.lmap.onLoad(el,type, layerType);
+        const {map,layers} = await this.lmap.onLoad(el,type, layerType);
+		this.map=map;
+		this.layers=layers;
         MapConfig.View = viewOptions;
         this.map.setView(MapConfig.View);
         if (callback) {
-          callback(this.map);
+          callback(this.map,layers);
         }
       };
       _async();
@@ -163,11 +165,13 @@ export default class LMapServices {
         if (this.map) {
           this.map = null;
         }
-        this.map = await this.lmap.onLoad(el, 2, 2);
+		const {map,layers} = await this.lmap.onLoad(el, 2, 2);
+		this.map=map;
+		this.layers=layers;
         MapConfig.View = viewOptions;
         this.map.setView(MapConfig.View);
         if (callback) {
-          callback(this.map);
+          callback(this.map,layers);
         }
       };
       _async();
@@ -186,12 +190,14 @@ export default class LMapServices {
       const _async = async () => {
         if (this.map) {
           this.map = null;
-        }
-        this.map = await this.lmap.onLoad(el, 0, 2);
+        }		
+        const {map,layers} = await this.lmap.onLoad(el, 0, 2);
+		this.map=map;
+		this.layers=layers;
         MapConfig.View = viewOptions;
         this.map.setView(MapConfig.View);
         if (callback) {
-          callback(this.map);
+          callback(this.map,layers);
         }
       };
       _async();
@@ -236,7 +242,9 @@ export default class LMapServices {
         if (this.map) {
           this.map = null;
         }
-        this.map = await this.lmap.onLoad(el);
+        const {map,layers} = await this.lmap.onLoad(el);
+				 this.map=map;
+				 this.layers=layers;
         this.map.setView(MapConfig.getVectorLayerView);
         if (callback) {
           callback(this.map);

package/src/views/map/index.vue

@@ -6,9 +6,9 @@
 			@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="[2,1]" @mapMoveend="mapMoveend($event)"
+			:switchMapDefaultTypeOrLayer="[1,2]" @mapMoveend="mapMoveend($event)"
 			@loadDrawPolygonEvent="loadDrawPolygonEvent($event)" :initModifyPolygon="geoJson"
-			@changeSwitchMap="changeSwitchMap($event)" :isDisabledSwitchMapTabEvent="false" :isShowSwitchMap="true"
+			@changeSwitchMap="changeSwitchMap($event)"  :isShowSwitchMap="true"
 			:layerType="1" :mapType="2">
 			<!--    <template slot="maptool">
         <button>ry</button>
@@ -24,8 +24,8 @@
 	  :mapType="1" -->
 			<template #polygon="{mapDto}">
 				<!-- <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="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"
@@ -33,12 +33,12 @@
           :polygonColor="polygonColorObj" :remove="remove" :removes="removes" :polygonColors="polygonColors"
           :modelArr="modelArr" @onLoad="onLoad($event)"></ry-polygons> -->
 
-				<ry-polygons
+	<ry-polygons
       :map="mapDto.map"
       :modelArr="modelArr"
       @onLoad="onLoad($event)"
       :isShowPolygon="showPolygon" :isCheckPointHide="isCheckPoint" :inserts="inserts" :gpsType="gpsType"></ry-polygons>
-      <ry-clusters @callback="clusterCallback($event)"  :map="mapDto.map" :modelArr="modelArr"></ry-clusters>
+       <ry-clusters :src="src" text="台" :gpsType="gpsType" @callback="clusterCallback($event)"  :map="mapDto.map" :modelArr="modelArr2"></ry-clusters>
 			</template>
 
 		</ry-map>
@@ -84,7 +84,7 @@
 	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  RyClusters from '@/components/maps/ryClustersMarker/src/index.vue';
 	import RyPolygonGeo from '@/components/maps/ryPolygonGeo/src/index.vue';
 	import gJson from './3301';
 	import gJson2 from "./331123";
@@ -169,7 +169,8 @@
 			RyPolygon,
 			RyPolygons,
 			RyClusters,
-			RyPolygonGeo
+			RyPolygonGeo,
+			
 		},
 		data() {
 			return {
@@ -180,7 +181,13 @@
 				isClear: false,
 				geoJson: null,
 				colors: [],
-				modelArr: [polygonModel2, polygonModel3, polygonModel4],
+				modelArr: [polygonModel1,polygonModel2, polygonModel3, polygonModel4],
+				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: [121.03623185250073, 29.247091764239528],
 				polygonColors: [],
 				remove: 'ceshi1',
@@ -190,10 +197,7 @@
 				range: 'ceshi2',
 				isFit: false,
 				insert: null,
-				showPolygon: {
-					id: 'ceshis',
-					isShow: true,
-				},
+				showPolygon: null,
 				showPolygons: [{
 					id: 'ceshi2',
 					isShow: false
@@ -204,15 +208,13 @@
 				polygonModel: null,
 				geo: g1,
 				mapTool: null,
-				isCheckPoint: {
-					id: 'ceshis',
-					isShow: false,
-				},
+				isCheckPoint: null,
 				gpsType: 0,
 				isRyMapTool: true,
 				maxZoom: 18,
 				polygonModel5: polygonModel5,
 				polygonModel6:polygonModel6,
+			    src:require("@/assets/1.png"),
 			};
 		},
 		created() {
@@ -378,4 +380,4 @@
 		height: 100vh;
 		position: relative;
 	}
-</style>
+</style>