digital-agriculture-app/pages/baseMap/weixinMap.vue

<template>
	<view class="baseMap">
		<cover-view class="controller">
			<cover-view class="radio" @click="layerType=1">
				<cover-view class="name" :class="{'active':layerType==1}">
					<cover-view class="circle"></cover-view>
				</cover-view>
				<cover-view class="label">标准图层</cover-view>
			</cover-view>
			<cover-view class="radio" @click="layerType=2">
				<cover-view class="name" :class="{'active':layerType==2}">
					<cover-view class="circle"></cover-view>
				</cover-view>
				<cover-view class="label">卫星图</cover-view>
			</cover-view>
		</cover-view>
		<map :scale="15" :enable-satellite="layerType==1?false:true":longitude="longitude" :latitude="latitude" :markers="markers" :polygons="polygons" @markertap="handleBindmarkertap"></map>
	</view>
</template>

<script>
	export default {
		props:{
			refresh:{
				default:false,
				type:Boolean
			}
		},
		data() {
			return {
				//点
				markers:[],
				//面
				polygons:[],
				//基础路径
				baseUrl:uni.$u.http.config.baseURL,
				//longitude
				longitude:null,
				//latitude
				latitude:null ,
				layerType: 1
			}
		},
		watch:{
			refresh:{
				handler(val){
					if(val){
						this.drawMarkers();
						this.drawPolygons();
						this.getBaseInfo();
					}
				}
			}
		},
		async created() {
			this.drawMarkers();
			this.drawPolygons();
			this.getBaseInfo(); 
		},
		methods: {
			//查询地块
			async getAreaList(){
				let baseId = uni.getStorageSync('baseId')
				const {rows} = await uni.$u.http.get('/agriculture/land/list',{params:{baseId}});
				return rows;
			},
			//查询设备
			async getDeviceList(){
				let baseId = uni.getStorageSync('baseId')
				const {rows} = await uni.$u.http.get('/iot/device/list',{params:{baseId}});
				return rows;
			},
			//绘制markers
			async drawMarkers(){
				const rows = await this.getDeviceList();
				this.markers = rows.map(item=>({
					id:item.deviceId,
					longitude:item.longitude,
					latitude:item.latitude,
					iconPath:this.baseUrl+item.imgUrl.split(',')[1],
					width:30,
					height:30,
					zIndex:100,
					label:{
						content:item.deviceName,
						color:'#fff',
						anchorX:-30,
						anchorY:-50
					}
				}));
			},
			//绘制区域
			async drawPolygons(){
				const rows = await this.getAreaList();
				this.polygons = rows.map(item=>({
					points:item.landPath.split('|').map(p=>({latitude:p.split(',')[1],longitude:p.split(',')[0]})),
					strokeWidth:item.strokeWeight,
					strokeColor:item.strokeColor,
					fillColor:item.fillColor
				}));
			},
			//处理点击事件
			async handleBindmarkertap(e){
				const deviceId = e.markerId;
				const rows = await this.getDeviceList();
				const device = rows.filter(item=>item.deviceId==deviceId)[0];
				if(device.isCamera=='1'){
					uni.$u.route({
						url: 'pages/videoMonitor/videoPlay',
						params: {
							deviceId:device.deviceId,
							deviceName:device.deviceName
						}
					})
				}else{
					uni.$u.route({
						url: 'pages/dataAcquisition/deviceDetail',
						params: {
							...device,
							src:this.baseUrl+device.src
						}
					})
				}
			},
			//查询基地信息
			async getBaseInfo(){
				let baseId = uni.getStorageSync('baseId')
				const {data} = await uni.$u.http.get('/agriculture/baseinfo/getBaseinfoByDeptId/' + baseId);
				let baseCoordinate = data.baseCoordinate.split(',');
				if(baseCoordinate.length>1){
					this.longitude = baseCoordinate[0]
					this.latitude = baseCoordinate[1]
				}
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.baseMap{
		width:750rpx;
		height: 100vh;
		.controller{
			position: fixed;
			z-index: 999;
			right: 20rpx;
			top: 40rpx;
			background: #fff;
			padding: 20rpx;
			border-radius: 10rpx;
			font-size: 24rpx;
			.radio{
				display: flex;
				align-items: center;
				&:first-of-type{
					margin-bottom: 20rpx;
				}
				.name{
					width: 30rpx;
					height: 30rpx;
					border-radius: 15rpx;
					border: 1px solid #aaa;
					margin-right: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					.circle{
						width: 20rpx;
						height: 20rpx;
						border-radius: 10rpx;
						background: $uni-color-primary;
						display: none;
					}
					&.active{
						border-color: $uni-color-primary;
						.circle{
							display: block;
						}
					}
				}
			}
		}
		map{
			width: 750rpx;
			height: 100vh;
		}
	}

</style>