digital-agriculture-app/pages/baseMap/H5AndAppMap.nvue

<template>
	<div class="mapContainer">
		<div  :device="device" :area="area" :change:device="mapjs.getDevice" :change:area="mapjs.getAreas"></div>
	</div>
</template>

<script>
	export default{
		props:{
			refresh:{
				default:false,
				type:Boolean
			}
		},
		data() {
			return {
				area:[],
				device:[],
				baseUrl:uni.$u.http.config.baseURL,
				map:null
			}
		},
		mounted() {
			this.getData()
		},
		watch:{
			refresh:{
				handler(val){
					if(val){
						this.getData()
					}
				}
			}
		},
		methods:{
			async getData(){
				let baseId = uni.getStorageSync('baseId')
				let area = await uni.$u.http.get('/agriculture/land/list',{params:{baseId}})
				this.area=area.rows
				let device = await uni.$u.http.get('/iot/device/list',{params:{baseId}})
				this.device=device.rows.map(item=>{
					return {
						...item,
						imgUrl:item.imgUrl.split(",").length>1?this.baseUrl+item.imgUrl.split(",")[1]:this.baseUrl+item.imgUrl
					}
				})
				console.log(this.device)
			},
			//跳转
			jump(data){
				if(data.isCamera=='1'){
					uni.$u.route({
						url: 'pages/videoMonitor/videoPlay',
						params: {
							deviceId:data.deviceId,
							deviceName:data.deviceName
						}
					})
				}else{
					uni.$u.route({
						url: 'pages/dataAcquisition/deviceDetail',
						params: {
							...data,
							src:data.imgUrl
						}
					})
				}
			}
		}
	}
</script>

<script module="mapjs" lang="renderjs">
import setting from '@/setting.js';
export default {
	data() {
		return {
			dom:null,
			map:null,
			area:[],
			device:[],
		}
	},
	watch:{

	},
	mounted(){
		if (window.AMap) {
			this.initAmap();
		} else {
			window._AMapSecurityConfig = {
				securityJsCode: setting.securityJsCode,
			}
			//todo 动态引入
			const script = document.createElement('script');
			script.src ="https://webapi.amap.com/maps?v=2.0&key="+setting.key;
			script.onload = () => {
				this.initAmap();
			}
			document.head.appendChild(script);
		}
	},
	methods: {
		initAmap() {
			let box = document.getElementsByClassName('mapContainer')[0];
			this.map = new AMap.Map(box, {
				layers: [new AMap.TileLayer.Satellite()],
				zoom: 15, //初始化地图级别
				doubleClickZoom:false,
			});
			this.map.plugin(["AMap.MapType"],()=>{
			    //地图类型切换
			    this.map.addControl(new AMap.MapType({
			        defaultType: 0,
			    }));
			});
			this.map.clearMap();
			this.createDevicePoint()
			this.createAreaPolygon()
			this.map.setFitView();
		},
		//监听area
		getAreas(newValue,oldValue,ownerInstance,instance){
			this.area=newValue
			if(this.map){
				this.map.clearMap();
				this.createDevicePoint()
				this.createAreaPolygon()
			}
		},
		//创建devices
		getDevice(newValue,oldValue,ownerInstance,instance){
			this.device=newValue
			if(this.map){
				this.map.clearMap();
				this.createDevicePoint()
				this.createAreaPolygon()
			}
		},
		createAreaPolygon(){
			let label=[],overlayGroup = []
			this.area.forEach(item => {
				if (item.landPath) {
					let path = [],pointList=[]
					item.landPath.split("|").forEach(point=>{
						path.push(new AMap.LngLat(point.split(",")[0],point.split(",")[1]))
						pointList.push([Number(point.split(",")[0]),Number(point.split(",")[1])])
					})
					let polygon =new AMap.Polygon({
						path: path,
						fillColor: item.fillColor,
						fillOpacity:item.fillOpacity,
						strokeColor: item.strokeColor,
						strokeWeight:item.strokeWeight,
						strokeOpacity:item.strokeOpacity
					})
		
					overlayGroup.push(polygon)
					//添加地块名称
					label.push(new AMap.Text({
					  text:item.landName,
					  anchor:"center",
					  position: this.getAreaCenter(pointList),
					  style:{
						"background":"transparent",
						"color":"#fff",
						"border":"none",
						"fontSize":"12px"
					  }
					}))
				}
			});
			this.map.add(new AMap.OverlayGroup(label));
			this.map.add(new AMap.OverlayGroup(overlayGroup));
		},
		/* 创建设备marker点 */
		createDevicePoint(){
		  let devicePointList=[]
		  this.device.forEach(device=>{
			//不存在坐标的不展示
			if(device.longitude&&device.latitude){
				let marker = new AMap.Marker({
				  icon: new AMap.Icon({
				  image:device.imgUrl,
				  imageSize: new AMap.Size(26,26)}),
				  position: [device.longitude, device.latitude],
				  title:device.deviceName,
				  anchor:"bottom-center",
				  label:{
					  content:device.deviceName,
					  direction:'top'
				  },
				  extData:{ 
					  data:device
				  }
				});
			
				//mark点击事件
				 marker.on("click",({target})=>{ 
					let data = target._opts.extData.data;
					this.onClick(data);
				})
				devicePointList.push(marker)
			}
		  })
		  this.map.add(new AMap.OverlayGroup(devicePointList));
		},
		//marker的点击事件
		onClick(e){
			 this.$ownerInstance.callMethod('jump',e);
		},
		//计算区域中心点坐标
		getAreaCenter(location) {
		  var total = location.length;
		  var X = 0,
			Y = 0,
			Z = 0;
		  location.forEach( lnglat => {
			var lng = (lnglat [0] * Math.PI) / 180;
			var lat = (lnglat [1] * Math.PI) / 180;
			var x, y, z;
			x = Math.cos(lat) * Math.cos(lng);
			y = Math.cos(lat) * Math.sin(lng);
			z = Math.sin(lat);
			X += x;
			Y += y;
			Z += z;
		  });
		  X = X / total;
		  Y = Y / total;
		  Z = Z / total;
	
		  var Lng = Math.atan2(Y, X);
		  var Hyp = Math.sqrt(X * X + Y * Y);
		  var Lat = Math.atan2(Z, Hyp);
		  return [
			parseFloat((Lng * 180) / Math.PI),
			parseFloat((Lat * 180) / Math.PI),
		  ];
		}
	}
}
</script>

<style lang="scss" scoped>
	.mapContainer::v-deep{
		height: 100%;
		width: 100%;
		// .amap-logo{
		// 	display: none!important;
		// }
		// .amap-copyright{
		// 	display: none!important;
		// }
		.amap-marker-label{ 
		    position: absolute; 
		    z-index: 2; 
		    border: none; 
			color:#fff;
		    background-color: transparent; 
		    white-space: nowrap; 
		    cursor: default; 
		    padding: 3px; 
		    font-size: 12px; 
		    line-height: 14px; 
		}
	}
</style>