muck_truck_app/components/mapPreview/mapPreview.vue

<template>
	<map v-if='isMap' id="test1_map" ref="test1_map" :polyline="polyline" :scale="scale"
		:style="'width: 100%; border-radius: 28rpx;height:'+height" :markers="markers" :polygons="polygons"
		@updated="updatedMap" :latitude="map.latitude" :longitude="map.longitude" show-compass="ture" show-location="true" >
	</map>
</template>

<script>
	import {
		pointData
	} from "@/api/company/path.js"
	var _this;
	export default {
		props: {
			height: {
				type: String,
				default: '513rpx'
			},
			getLocation: {
				type: Object,
				default: null
			},
			// getEndLocation: {
			// 	type: Object,
			// 	default: null
			// },
			startPoint: {
				type: String,
				default: '',
			},
			endPoint: {
				type: String,
				default: '',
			},
			mtRoutePointList: {
				type: Array,
				default: () => {
					return []
				},
			},
			fwPointList: {
				type: Array,
				default: () => {
					return []
				},
			},
			pathDataId: {
				type: String,
				default: '',
			},
			//是否只有点击事件
			isDot: {
				type: Boolean,
				default: false,
			},
			// //是否是记录
			// isInfo: {
			// 	type: Boolean,
			// 	default: true,
			// },
		

		},
		data() {
			return {
				barHeight: null, //动态高度初始值
				windowHeight: null,
				latitude: 39.998204,
				longitude: 116.481053,
				map:{
				latitude: null,
				longitude: null,	
				},
				// latitude: '',
				// longitude: '',
				markers: [],
				polygons: [{
					points: [
						// {
						// 	longitude: "116.477462800",
						// 	latitude: "39.994629400"
						// },
						// {
						// 	longitude: "116.475796400",
						// 	latitude: "39.999226200"
						// },
						// {
						// 	longitude: "116.486139200",
						// 	latitude: "40.002975600"
						// },
						// {
						// 	longitude: "116.487805600",
						// 	latitude: "39.998378800"
						// },
					],
					fillColor: '#376af64d',
					width: 5,
					strokeColor: '#9BC2FC', //描边颜色
					strokeWidth: 2, //描边宽度
					zIndex: 100, //层级
				}],
				polyline: [{
					points: [
						// {
						// 	"longitude": 116.478928,
						// 	"latitude": 39.997761
						// },
						// {
						// 	"longitude": 116.478907,
						// 	"latitude": 39.998422
						// },
						// {
						// 	"longitude": 116.479384,
						// 	"latitude": 39.998546
						// },
						// {
						// 	"longitude": 116.481053,
						// 	"latitude": 39.998204
						// },
						// {
						// 	"longitude": 116.481793,
						// 	"latitude": 39.997868
						// },
						// {
						// 	"longitude": 116.482898,
						// 	"latitude": 39.998217
						// },
						// {
						// 	"longitude": 116.483789,
						// 	"latitude": 39.999063
						// },
						// {
						// 	"longitude": 116.484674,
						// 	"latitude": 39.999844
						// }
					],
					arrowLine: true,
					color: 'rgba(255, 0, 0, 1)',
					width: 22,
					borderColor: 'rgba(255, 0, 0, 1)',
					borderWidth: 20,
					dottedLine: true,
				}],
				startMarker:null,
				endMarker:null,
                isMap:true,
				scale:null,
			}
		},
		computed: {},
		onLoad() {
			// this.ScanAudio();
			// this.fitNav()
			// this.getLocation();

		},
		watch: {
			getLocation: {
				handler(newData, oldName) {
					if (newData != null) {
						this.startingPoint(newData.latitude, newData.longitude);
					}
				},
				immediate: true,
				deep: true
			},
			startPoint: {
				handler(newData, oldName) {
					if (newData != null) {
						console.log(newData,'<--------开始点')
						let opt=this.mercatorToWGS84(newData);
						this.startingPoint(opt.latitude, opt.longitude);
					}
				},
				immediate: true,
				deep: true
			},
			endPoint: {
				handler(newData, oldName) {
					if (newData != null) {
						console.log(newData,'<--------结束点')
						let opt=this.mercatorToWGS84(newData);
						this.endingPoint(opt.latitude, opt.longitude);
					}
				},
				immediate: true,
				deep: true
			},
			mtRoutePointList(){
				this.getMap();
			}
		},

		mounted() {
			let that=this;
			if(this.isDot)
			{
				
			
			var maps = uni.createMapContext("test1_map", this).$getAppMap();
			maps.onclick = function(point) {
				console.log(point,'我是点击事件')
				that.$emit('dot')
			};
			}else{
				this.isMap=false;
				// this.$nextTick(() => {
				            
				//         })
				//解决频繁刷新无法现在最新的中心点
				setTimeout(() => {
				  //需要定时执行的代码
				  that.getMap();
				  // console.debug("Hello World");
				  }, 500)
			}
			
			
		},
		methods: {
			
			getfwPointList(pointList){
				console.log(pointList,'<-------------pointList');
				this.polygons = [{
					points: pointList,
					fillColor: '#376af64d',
					width: 5,
					strokeColor: '#9BC2FC', //描边颜色
					strokeWidth: 2, //描边宽度
					zIndex: 100, //层级
				}]
				this.polyline = [{
					points: [this.getLocation,this.getEndLocation],
					arrowLine: true,
					color: 'rgba(255, 0, 0, 1)',
					width: 22,
					borderColor: 'rgba(255, 0, 0, 1)',
					borderWidth: 20,
					dottedLine: true,
				}];
			},
			// 规划路线的时候给起点一个marker，
			startingPoint(latitude, longitude) {
				console.log(latitude, longitude, '我是开始坐标');
				this.startMarker = {
					id: 1,
					width: 110,
					height: 156,
					latitude: latitude,
					longitude: longitude,
					iconPath: "/static/images/path/star.png",
					anchor: {
						x: 0.5,
						y: 1,
					},
				};
				
			   this.map.longitude = longitude;
			   this.map.latitude = latitude;
			   this.markers = [this.startMarker,this.endMarker];
			
			},
			endingPoint(latitude, longitude) {
				console.log(latitude, longitude, '我是开始坐标');
				this.endMarker = {
					id: 1,
					width: 82,
					height: 95,
					latitude: latitude,
					longitude: longitude,
					iconPath: "/static/images/path/end.png",
					anchor: {
						x: 0.5,
						y: 1,
					},
				};
				
			   this.map.longitude = longitude;
			   this.map.latitude = latitude;
			   this.markers = [this.startMarker,this.endMarker];
			
			},
			updatedMap() {
				console.log('地图更新完成', '2222222');
			},
			async getMap() {
				let _this=this;
				if(!this.startPoint||!this.endPoint)
				{
					console.log('返回了');
					this.isMap=true;
					return false;
				}
				let startPointData = this.mercatorToWGS84(this.startPoint);
				let endPointData = this.mercatorToWGS84(this.endPoint);
				this.markers = [{
						id: 1,
						width: 110,
						height: 156,
						latitude: startPointData.latitude,
						longitude: startPointData.longitude,
						iconPath: "/static/images/path/star.png",
						anchor: {
							x: 0.5,
							y: 0.5,
						}
					},
					{
						id: 2,
						width: 82,
						height: 95,
						latitude: endPointData.latitude,
						longitude: endPointData.longitude,
						iconPath: "/static/images/path/end.png",
						anchor: {
							x: 0.5,
							y: 1,
						},
					}
				]
				if (this.mtRoutePointList) {
					// console.log(this.mtRoutePointList,'this.mtRoutePointList');
					let pointsData = this.mtRoutePointList.map(item => this.mercatorToWGS84(item.pointCoordinate))
					//计算中心点
					this.latitude = eval(startPointData.latitude + '+' + endPointData.latitude) / 2
					this.longitude = eval(startPointData.longitude + '+' + endPointData.longitude) / 2
					
					console.log('中心点', this.latitude, this.longitude)
					console.log('开始', startPointData.latitude, startPointData.longitude)
					console.log('结束', endPointData.latitude, endPointData.longitude)
					this.polygons = [{
						points: pointsData,
						fillColor: '#376af64d',
						width: 5,
						strokeColor: '#9BC2FC', //描边颜色
						strokeWidth: 2, //描边宽度
						zIndex: 100, //层级
					}]
					//计算缩放比例
					
					// _this.$nextTick(()=>{
						_this.map.latitude=_this.latitude;
						_this.map.longitude=_this.longitude;
						_this.scale = _this.scaleDW(pointsData);
					// })
					
					if (this.pathDataId) {
						let resData = await pointData(this.pathDataId)
						// console.log(resData,'resData');
						let pointsData2 = resData.data.runPoints.map(item => {
							return {
								latitude: item[1],
								longitude: item[0]
							}
						});
						// pointsData.unshift(startPointData);
						// pointsData.push(endPointData);
						console.log(pointsData2,'<---------------我是点位');
						
						// if(this.isInfo)
						// {
							this.markers = [{
									id: 1,
									width: 110,
									height: 156,
									latitude: startPointData.latitude,
									longitude: startPointData.longitude,
									iconPath: "/static/images/path/rstar.png",
									anchor: {
										x: 0.5,
										y: 0.5,
									}
								},
								{
									id: 2,
									width: 82,
									height: 95,
									latitude: endPointData.latitude,
									longitude: endPointData.longitude,
									iconPath: "/static/images/path/rend.png",
									anchor: {
										x: 0.5,
										y: 1,
									},
								},
								{
									id: 3,
									width: 82,
									height: 95,
									latitude: pointsData2[0].latitude,
									longitude: pointsData2[0].longitude,
									iconPath: "/static/images/path/star.png",
									anchor: {
										x: 0.5,
										y: 1,
									},
								},
								{
									id: 4,
									width: 82,
									height: 95,
									latitude: pointsData2[pointsData2.length-1].latitude,
									longitude: pointsData2[pointsData2.length-1].longitude,
									iconPath: "/static/images/path/end.png",
									anchor: {
										x: 0.5,
										y: 1,
									},
								}
							]
							
							this.polyline = [
								
							{
								points: [startPointData,endPointData],
								arrowLine: true,
								color: '#00CC6A',
								width: 22,
								borderColor: '#00CC6A',
								borderWidth: 20,
								dottedLine: true,
							},
							{
								points: pointsData2,
								arrowLine: true,
								color: 'rgba(255, 0, 0, 1)',
								width: 22,
								borderColor: 'rgba(255, 0, 0, 1)',
								borderWidth: 20,
								dottedLine: true,
							},
							];
						
						// }else
						// {
						// 	this.polyline = [{
						// 		points: pointsData2,
						// 		arrowLine: true,
						// 		color: 'rgba(255, 0, 0, 1)',
						// 		width: 22,
						// 		borderColor: 'rgba(255, 0, 0, 1)',
						// 		borderWidth: 20,
						// 		dottedLine: true,
						// 	}];
						// }
						// this.map.latitude=this.latitude;
						// this.map.longitude=this.longitude;
					}else{
						this.polyline = [{
							points: [startPointData,endPointData],
							arrowLine: true,
							// color: 'rgba(255, 0, 0, 1)',
							// width: 22,
							// borderColor: 'rgba(255, 0, 0, 1)',\
							color: '#00CC6A',
							width: 22,
							borderColor: '#00CC6A',
							borderWidth: 20,
							dottedLine: true,
						}];
					}
					
					// 处理中心点不变的问题
					// setTimeout(() => {
					//   _this.map.latitude=_this.latitude;
					//   _this.map.longitude=_this.longitude;
					//   }, 500)
				}
			    	this.isMap=true;
			},
			scaleDW(otherPoints) {
				let centralPoint = []

				centralPoint[0] = this.latitude
				centralPoint[1] = this.longitude

				let obj = {
					centralPoint: [this.latitude, this.longitude],
					otherPoint: otherPoints
				}
				console.log(this.furthest(obj),'<---------------我是缩放的等比')
				if(this.furthest(obj)>12&&this.furthest(obj)<20)
				{
					return this.furthest(obj)+1    
				}
				return this.furthest(obj)
			},
			furthest(obj) {
				// console.log(obj)
				var EARTH_RADIUS = 6378137.0; //单位M
				var PI = Math.PI;
				// 转为角度
				function getRad(d) {
					return d * PI / 180.0;
				}

				let distance = {
					// 将地球按照圆形计算
					getGreatCircle: function(coordinate1, coordinate2) {
						var lat1 = coordinate1[0] // 纬度
						var lat2 = coordinate2[0]
						var lng1 = coordinate1[1] // 经度
						var lng2 = coordinate2[1]

						var radLat1 = getRad(lat1);
						var radLat2 = getRad(lat2);

						var a = radLat1 - radLat2;
						var b = getRad(lng1) - getRad(lng2);

						var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(
								radLat1) *
							Math
							.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
						s = s * EARTH_RADIUS;
						s = Math.round(s * 10000) / 10000.0;

						return s;
					},
					// 将地球按照椭圆进行计算
					getFlattern: function(coordinate1, coordinate2) {
						var lat1 = coordinate1[0] // 纬度
						var lat2 = coordinate2[0]
						var lng1 = coordinate1[1] // 经度
						var lng2 = coordinate2[1]

						var f = getRad((lat1 + lat2) / 2);
						var g = getRad((lat1 - lat2) / 2);
						var l = getRad((lng1 - lng2) / 2);

						var sg = Math.sin(g);
						var sl = Math.sin(l);
						var sf = Math.sin(f);

						var s, c, w, r, d, h1, h2;
						var a = EARTH_RADIUS;
						var fl = 1 / 298.257;

						sg = sg * sg;
						sl = sl * sl;
						sf = sf * sf;

						s = sg * (1 - sl) + (1 - sf) * sl;
						c = (1 - sg) * (1 - sl) + sf * sl;

						w = Math.atan(Math.sqrt(s / c));
						r = Math.sqrt(s * c) / w;
						d = 2 * w * a;
						h1 = (3 * r - 1) / 2 / c;
						h2 = (3 * r + 1) / 2 / s;

						return d * (1 + fl * (h1 * sf * (1 - sg) - h2 * (1 - sf) * sg));
					}

				}

				// obj包含中心点坐标和其他所有的坐标位置
				// 处理obj传入的参数
				let centralPoint = obj.centralPoint // 中心点
				let otherPoint = obj.otherPoint // 二维数组存放其他坐标点

				// 循环遍历得出距离最远的1个坐标然后*2
				let farthestCoordinate = [] // 当前最远坐标
				let farthestDistance = 0 // 最远距离
				let dis = null // 存储当前距离
				for (let i in otherPoint) {
					let newLocation = []
					newLocation[0] = otherPoint[i].latitude
					newLocation[1] = otherPoint[i].longitude

					dis = distance.getGreatCircle(centralPoint, newLocation)
					if (dis > farthestDistance) {
						farthestDistance = dis
						farthestCoordinate = newLocation
					}
				}

				farthestDistance = farthestDistance / 1000 // 转为km

				// 根据坐标计算出合理的比例尺寸
				let surface = [500, 200, 100, 50, 20, 10, 5, 2, 1, 0.5, 0.2, 0.1, 0.05, 0.02]

				for (let i in surface) {
					if (farthestDistance > surface[i]) {
						let scale = 5 + Number(i)
						return scale
					}
				}

				return 16
			},

			mercatorToWGS84(data) {
				let list = data.split(',');
				let lonlat = {
					lng: list[1],
					lat: list[0]
				};
				const coord = {
					lat: 0,
					lng: 0
				};
				const lat = lonlat.lat / 20037508.34 * 180;
				let lng = lonlat.lng / 20037508.34 * 180;
				lng = 180 / Math.PI * (2 * Math.atan(Math.exp(lng * Math.PI / 180)) - Math.PI / 2);
				coord.lat = lat;
				coord.lng = lng;
				return {
					latitude: coord.lng,
					longitude: coord.lat
				}
			},
		}
	}
</script>