数据切换

api/index.js

 // 测试服务器
-// const baseURL = 'https://testapi.sharefly.mmcuav.cn/'
-// const routeURL='https://csfpg.sharefly.mmcuav.cn/'
+const baseURL = 'https://testapi.sharefly.mmcuav.cn/'
 // 正式服
-const baseURL = "https://csfapi.mmcuav.cn/"
-const routeURL='https://sharefly.mmcuav.cn/'
+// const baseURL = "https://csfapi.mmcuav.cn/"
 const api = {
-	getWebSitList:'systemservlet/website/getWebsiteList'
+	getWebSitList:'systemservlet/website/getWebsiteList',
+	flyerDotList:'flyerservlet/flyeraccount/bitmap' ,
+	deviceDotList:'deviceservlet/device/bitmap' 
 }
 export {
 	api,
 	baseURL,
-	routeURL
+
 }
\ No newline at end of file

pages/index/index.vue

@@ -5,10 +5,10 @@
 	      <view class="provice-title">{{ location.province }}</view>
 	      <img src="@/assets/image/bot-arrow.png" alt="" />
 	    </view> -->
-			<view class="websit-node-head-wrap">
-				<image src="../../static/images/map-tip.png" mode="widthFix" class="img-1"></image>
+		<view class="websit-node-head-wrap">
+			<image src="../../static/images/map-tip.png" mode="widthFix" class="img-1"></image>
 			<!-- <view class=" animate__animated animate__tada animate__infinite animate__delay-1s btn-img" style="background:red"></view> -->
-				<image src="../../static/images/go.png" mode="widthFix"  class=" animate__heartBeat  btn-img"></image>
+			<image src="../../static/images/go.png" mode="widthFix" class=" animate__heartBeat  btn-img"></image>
 		</view>
 		<view class="websit-node-list-wrap">
 			<view class="ios-wrap">
@@ -27,10 +27,10 @@
 						<view class="left-info">
 							<view class="head">{{ item.dizhi }}网点</view>
 							<view class="meta">
-								<view class="grade">4.{{ RandomNum(5, 9) }}分</view>
+								<view class="grade">{{item.grade}}分</view>
 								<view class="tip">
-									近天{{ RandomNum(1, 10)}}服务次数超{{
-	                    RandomNum(4, 5) * 10
+									近天{{item.day}}服务次数超{{
+	                   item.count
 	                  }}次
 								</view>
 							</view>
@@ -48,7 +48,7 @@
 	      <view class="current-status">
 	        <view class="swiper-no-swiping">
 	          <swiper :options="swiperOptions">
-	            <swiper-slide v-for="(item, index) in cityList" :key="index">
+	            <swiper-slide v-for="(item, index ) in cityList" :key="index">
 	              <view class="swiper-slide">
 	                {{ item }}网点{{ labelList[RandomNum(0, 2)] }}
 	              </view>
@@ -69,7 +69,7 @@
 			return {
 				title: 'Hello',
 				location: {},
-				locationData:{
+				locationData: {
 					adcode: "440305",
 					city: "深圳市",
 					city_code: "156440300",
@@ -86,10 +86,10 @@
 			}
 		},
 		onLoad(option) {
-			if(option.location){
-				
+			if (option.location) {
+
 			}
-			let str = this.getQueryString("location") || JSON.stringify(this.locationData) ;
+			let str = this.getQueryString("location") || JSON.stringify(this.locationData);
 			// uni.showToast({
 			// 	title: str,
 			// 	icon:'none'
@@ -102,22 +102,14 @@
 					url: "/page-home/cooperation/cooperation"
 				});
 			},
-			RandomNum(minNum, maxNum) {
-				return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
-			},
-			// 数据切换
-			changeTabEvent(index) {
-				this.currentTipIndex = index;
-				document.title = this.tipList[index].label;
-			},
 			getQueryString(name) {
-			      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
-			      var r = window.location.search.substr(1).match(reg);
-			      if (r != null) {
-			        return decodeURIComponent(r[2]);
-			      }
-			      return null;
-			    }
+				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+				var r = window.location.search.substr(1).match(reg);
+				if (r != null) {
+					return decodeURIComponent(r[2]);
+				}
+				return null;
+			}
 		}
 	}
 </script>
@@ -129,7 +121,6 @@
 				map: null,
 				markers: [],
 				websitList: [],
-				
 				// swiperOptions: {
 				// 	autoplay: {
 				// 		delay: 2000,
@@ -166,6 +157,7 @@
 					},
 				], //数据切换
 				currentTipIndex: 0,
+				massMarks: undefined, //海量点对象
 			};
 		},
 		mounted() {
@@ -207,19 +199,30 @@
 				});
 			},
 			setMassMarks() {
-				let styleObject = {
-					url: "https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/image/servicepot.png", // 图标地址
-					size: new AMap.Size(40, 40), // 图标大小
-					anchor: new AMap.Pixel(5, 5), // 图标显示位置偏移量，基准点为图标左上角
-				};
-				let massMarks = new AMap.MassMarks(this.markers, {
+				let styleList = [{
+						url: 'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/image/servicepot.png', // 图标地址
+						size: new AMap.Size(40, 40), // 图标大小
+						anchor: new AMap.Pixel(5, 5), // 图标显示位置偏移量，基准点为图标左上角
+					},
+					{
+						url:  'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/image/mmc1_flyer.png', // 图标地址
+						size: new AMap.Size(40, 40), // 图标大小
+						anchor: new AMap.Pixel(5, 5), // 图标显示位置偏移量，基准点为图标左上角
+					},
+					{
+						url: 'https://pad-video-x.oss-cn-shenzhen.aliyuncs.com/image/mmc1.png', // 图标地址
+						size: new AMap.Size(40, 40), // 图标大小
+						anchor: new AMap.Pixel(5, 5), // 图标显示位置偏移量，基准点为图标左上角
+					}
+				];
+				this.massMarks = new AMap.MassMarks(this.markers, {
 					zIndex: 5, // 海量点图层叠加的顺序
 					zooms: [3, 19], // 在指定地图缩放级别范围内展示海量点图层
-					style: styleObject, // 设置样式对象
+					style: styleList, // 设置样式对象
 				});
-				console.log("massMarks-->", massMarks);
+				console.log("massMarks-->", this.massMarks);
 				// 将海量点添加至地图实例
-				massMarks.setMap(this.map);
+				this.massMarks.setMap(this.map);
 			},
 			async getMarkPoint() {
 				let res = await this.$httpRequest({
@@ -232,7 +235,12 @@
 				})
 				if (res.result) {
 					let nodeList = res.result.reduce((pre, cur) => {
-						let list = cur.locationList.filter((item) => item.range >= 100);
+						let list = cur.locationList.filter((item) => {
+							item.grade = '4.' + this.RandomNum(5, 9)
+							item.day = this.RandomNum(1, 10)
+							item.count = this.RandomNum(4, 5) * 10
+							return item.range >= 100
+						});
 						pre.push(...list);
 						// }
 						return pre;
@@ -248,10 +256,71 @@
 						return {
 							id: index,
 							lnglat: [item.jd, item.wd],
+							style: 0
 						};
 					});
 				}
 			},
+			// 数据切换
+			async changeTabEvent(index) {
+				this.currentTipIndex = index;
+				switch (index) {
+					case 0:
+						await this.getMarkPoint()
+						this.massMarks.setData(this.markers)
+						break;
+					case 1:
+						await this.getFlyerDotList()
+						this.massMarks.setData(this.markers)
+						break;
+					case 2:
+						await this.getDeviceDotList()
+						this.massMarks.setData(this.markers)
+						break;
+				}
+				document.title = this.tipList[index].label;
+			},
+			async getFlyerDotList(data) {
+				let res = await this.$httpRequest({
+					url: this.$api.flyerDotList,
+					method: 'get',
+					data: {
+						lat: this.location.location.lat,
+						lon: this.location.location.lng,
+					}
+				})
+				if (res.result && res.result.length != 0) {
+					this.markers = res.result.slice(0, 1999).map((item, index) => {
+						return {
+							id: index,
+							lnglat: [item.lon, item.lat],
+							style: 1
+						};
+					});
+				}
+			},
+			async getDeviceDotList() {
+				let res = await this.$httpRequest({
+					url: this.$api.deviceDotList,
+					method: 'get',
+					data: {
+						lat: this.location.location.lat,
+						lon: this.location.location.lng,
+					}
+				})
+				if (res.result && res.result.length != 0) {
+					this.markers = res.result.map((item, index) => {
+						return {
+							id: index,
+							lnglat: [item.lon, item.lat],
+							style: 2
+						};
+					});
+				}
+			},
+			RandomNum(minNum, maxNum) {
+				return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
+			},
 		},
 	};
 </script>
@@ -264,7 +333,7 @@
 		.websit-node-list-wrap {
 			position: absolute;
 			left: 0;
-			top: 60%;
+			top: 78%;
 			width: 100%;
 			background: #f9f9f9;
 			border-radius: 36rpx 36rpx 0px 0px;
@@ -396,9 +465,11 @@
 			left: 50%;
 			transform: translateX(-50%);
 			width: 90%;
+
 			.img-1 {
 				width: 100%;
 			}
+
 			.btn-img {
 				width: 84rpx;
 				position: absolute;

unpackage/dist/build/h5/index.html

 <!DOCTYPE html><html lang=zh-CN><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><title>全国网点</title><script>var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
-            document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/h5/static/index.a5c69d49.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/h5/static/js/chunk-vendors.ed1c0629.js></script><script src=/h5/static/js/index.2fcd7cef.js></script></body></html>
+            document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')</script><link rel=stylesheet href=/h5/static/index.a5c69d49.css></head><body><noscript><strong>Please enable JavaScript to continue.</strong></noscript><div id=app></div><script src=/h5/static/js/chunk-vendors.ed1c0629.js></script><script src=/h5/static/js/index.fd493a86.js></script></body></html>
\ No newline at end of file