tqApp-webView/pages/realtimeWatch/module/h5Map.vue

<template>
	<view class="realtimeWatch">
		<map-container 
			ref="mapContainerRef"
			:pointsData="pointsData"
			@handleMarkerClick="handleMarkerClick"
		>
		</map-container>
		
		<view class="counts">
			<u-row>
				<u-col :span="3" class="counts-item" v-for="(item,index) in countInfo" :key="index" :class="item.class">
					<view class="counts-item-label" :style="item.style">{{ item.label }}</view>
					<view class="counts-item-value" :style="item.style">{{ item.value }}</view>
				</u-col>				
			</u-row>
		</view>
		
		<view class="options">
			<view class="options-item" @click="showSatelliteLayer">
				<image
				  style="width: 100%; height: 100%"
				  :src="$getImages('/assetsMobile/images/map/icon/weixing.png')"
				/>
			</view>
			
			<view class="options-item" @click="showPanel">
				<image
				  style="width: 100%; height: 100%"
				  :src="$getImages('/assetsMobile/images/map/icon/boxselection.png')"
				/>
			</view>
			
			<view class="options-item" @click="queryLocation">
				<image
				  style="width: 100%; height: 100%"
				  :src="$getImages('/assetsMobile/images/map/icon/position.png')"
				/>
			</view>
			
		</view>
	
		<panel ref="panelRef"></panel>

		<veh-info ref="vehInfoRef"></veh-info>
	</view>
</template>

<script>
import MapContainer from '@/components/MapContainer'
import panel from './panel.vue'
import vehInfo from './vehInfo.vue'
export default {
	components: {
		MapContainer,
		panel,
		vehInfo,
	},
	data() {
		return {
			//卫星图层
			isShowStelliteLayer: false,
		}
	},
	computed: {
		pointsData() {
			// console.log(this.$store.state.realtimeWatch.vheicleCheckArr,'realtimeWatch')
			let vehmap = new Map()
			    let vehKey = 'id'
			    let list = []
				
			 let vehicleList = this.$store.state.realtimeWatch.vheicleCheckArr.filter(
			        (item) => item.code=='vehicle' && !vehmap.has(item[vehKey].toString()) && vehmap.set(item[vehKey].toString())
			).map((item) => {
				return {
					lnglat: [item.lng,item.lat],
					item: item,
				}
			})
			
			 let usermap = new Map()
			let userKey = 'id'
			
			let peopleList = this.$store.state.realtimeWatch.peopleCheckArr.filter(
				(item) => item.code=='people' && !usermap.has(item[userKey].toString()) && usermap.set(item[userKey].toString())
			).map((item) => {
				console.log('数据是',item)
		   
				return {
					lnglat: [item.lng,item.lat],
					item
				}
			})
				
			
			list = vehicleList.concat(peopleList)
			
			
		  return list;
		},
		countInfo() {
			return this.$store.state.realtimeWatch.countInfo
		},
	},
	onReady () {		  
	},
	methods: {
		 // 查询自身位置
		queryLocation() {
		  uni.getLocation({
		    type: "gcj02",
		    success: (res) => {
				const {latitude,longitude} = res
				
				  this.$refs.mapContainerRef.setZoomAndCenter(12,[longitude,latitude],true)
		    },
		    fail: (res) => {
		      console.log('定位失败',JSON.stringify(res));
		    }
		  });
		},
		//选车辆
		showPanel() {
			this.$refs.panelRef.show()
		},
		//展示卫星图层
		showSatelliteLayer() {
			this.isShowStelliteLayer = !this.isShowStelliteLayer
			if(this.$refs.mapContainerRef) this.$refs.mapContainerRef.setStelliteLayer(this.isShowStelliteLayer)
		},
		//点击标注点
		handleMarkerClick(e) {
			// console.log(e,'handleMarkerClick')
			const {cluster} = e
			let item = cluster.p.item
			this.$refs.vehInfoRef.show(item)
	
		}
	},
	beforeDestroy() {
		this.$store.dispatch('setVheicleCheckArr',[])
		this.$store.dispatch('setPeopleCheckArr',[])
	}
}
</script>

<style lang="scss" scoped>
.realtimeWatch {
	width: 100%;
	height: 100vh;
	position: relative;
	#map {
		width: 750rpx; 
		height: 100%;
	}
	
	.counts {
		position: absolute;
		left: 2%;
		top: 20rpx;
		width: 96%;
		background: #fff;
		border-radius: 10rpx;
		
		box-shadow: 0 2px 6px #3f57c252;
		// margin: 10rpx;
		.counts-item {
			padding: 14rpx 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.counts-item-label {
				 font-size: 24rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 400;
				color: #333333;
				text-align: center;
			}
			.counts-item-value {
				margin-top: 10rpx;
				 font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 600;
				color: #333333;
				text-align: center;
			}
		}
	}
	.options {
		position: absolute;
		width: 72rpx;
		right: 30rpx;
		bottom: 156rpx;
		// box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.15);
		z-index: 9999;
		
		.options-item {
			height: 72rpx;
			
		}
		.options-item+.options-item{
			margin-top: 20rpx;
		}
	}
}	
</style>