muck_truck_app/components/mapNew/mapNew.vue

<template>
	<view>
		<map id="test_map" ref="map1" :style="'width: 100%; border-radius: 28rpx;height:'+height" :scale="scale" :show-location="true"
			:longitude="map.longitude" :latitude="map.latitude" :polygons="polygons" :markers="markers"
			@updated="updated" :polyline="polyline" show-compass="ture" show-location="true" :controls="controls">
		</map>
		<!-- <button @click="graph()"> 绘制矩形</button> -->
	</view>
</template>



<script>
	import {
		routePost
	} from "@/api/company/path.js"
	export default {
		props: {
			height: {
				type: String,
				default: '713rpx'
			},
			isShow: {
				type: Boolean,
				default: true
			},
			getLocation: {
				type: Object,
				default: null,
			},
			starAddres: {
				type: Object,
				default: null,
			},
			isStar: {
				type: Boolean,
				default: false,
			},
			isEnd: {
				type: Boolean,
				default: false,
			}
		},
		watch: {
			starAddres(NewData) {
				if (NewData&&NewData.location) {
					console.log(NewData,'《---------我是监听的点位')
					let postion = NewData.location.split(',');
					this.graph([]);
					// console.log(NewData, 'NewData');
					if (this.isStar) {
						this.endPoint(postion[1], postion[0], true);
					} else {
						this.startingPoint(postion[1], postion[0], true);
					}
					this.$emit('dot')
				}
			},
			getLocation: {
			        handler(NewData, oldName) {
			           console.log('我是获取的地址信息----------》',NewData);
			           let _this = this;
			           if (NewData != null) {
			           	// console.log("当前位置", this.getLocation);
			           	_this.map.longitude = NewData.longitude;
			           	_this.map.latitude = NewData.latitude;
			           	_this.startingPoint(NewData.latitude, NewData.longitude);
			           }
			        },
			        immediate: true,
			        deep: true
			},
			isEnd(NewData) {
				console.log(NewData,'《---------我是监听结束的')
				if (NewData) {
					let data = this.markers.map(item => {
						return item.latitude+','+item.longitude
					})
					// this.path(data);
					// let data2 = [{
					// 		latitude: data[0].latitude.slice(0, data[0].latitude.length - 2) + 99,
					// 		longitude: data[0].longitude.slice(0, data[0].longitude.length - 2) + 99,
					// 	},
					// 	{
					// 		latitude: data[0].latitude.slice(0, data[0].latitude.length - 2),
					// 		longitude: data[0].longitude.slice(0, data[0].longitude.length - 2) + 99
					// 	},
					// 	{
					// 		latitude: data[0].latitude.slice(0, data[0].latitude.length - 2),
					// 		longitude: data[0].longitude.slice(0, data[0].longitude.length - 2)
					// 	},
					// 	{
					// 		latitude: data[0].latitude,
					// 		longitude: data[0].longitude.slice(0, data[0].longitude.length - 2),
					// 	},
					// ]
					let addres={
						"startPoint": data[0],
						"endPoint": data[1]
					}
					this.routePost(addres);
					
				}
			}
		},
		data() {
			return {
				mapContext: {},
				map: {
					longitude: "126.04684", //经度
					latitude: "42.68497", //纬度
				},
				longitude:"", //经度
				latitude:"", //纬度
				scale:null,
				form: {
					name: "",
					area: "",
					address: "",
					location: "",
				},
				runningRoute: "",
				polygons: [{
					points: [],
				}],
				polyline: [{
					// 每个点的经纬度
					points: [],
					arrowLine: true,
					color: 'rgba(255, 0, 0, 1)',
					width: 20,
					borderColor: 'rgba(255, 0, 0, 1)',
					borderWidth: 20,
					dottedLine: true,
				}, ],
				controls: [
					// {
					//   //在地图上显示控件，控件不随着地图移动
					//   id: 1, //控件id
					//   iconPath: "/static/c1.png", //显示的图标
					//   position: {
					//     //控件在地图的位置
					//     left: 15,
					//     top: 15,
					//     width: 50,
					//     height: 50,
					//   },
					// },
				],
				markers: [
					// {
					//   longitude: 118.769032,
					//   latitude: 31.975258,
					//   iconPath: "/static/c1.png",
					// },
				],
				startMarker: null
			};
		},
		created() {

		},
		mounted() {
			console.log('地址信息----------》',this.getLocation);
			if (this.isShow) {

			} else {
				let that = this;
				var maps = uni.createMapContext("test_map", this).$getAppMap();
				maps.onclick = function(point) {
					console.log(that.isStar, 'that.isStar');
					console.log(that.isEnd, 'that.isEnd');
					that.graph([]);
					if (that.isStar && that.isEnd) {
						console.log('清空啦');
						// that.path([]);
						that.startingPoint(point.latitude, point.longitude);
						that.$emit('clearMarkers')
					} else if (that.isStar) {
						that.endPoint(point.latitude, point.longitude);

					} else {
						that.startingPoint(point.latitude, point.longitude);
					}
					that.$emit('isChange')
				};
                  
			}
		},
		methods: {
			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)>11&&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
			},
			
			routePost(data){
				console.log(data,'参数');
				routePost(data).then(res=>{
					console.log(res,'获取到的坐标范围');
					let addres=res.data.map(items=>{
						return {
							latitude: items[0],
						    longitude: items[1],
						}
					})
					console.log(addres,'获取到的addres');
					this.graph(addres)
				})
			},
			updated() {
				console.log('更新完成了');
			},
			//绘制轨迹
			path(arrayData) {
				let polyline_obj = [{
					points: arrayData,
					arrowLine: true,
					// color: 'rgba(255, 0, 0, 1)',
					// width: 20,
					// borderColor: 'rgba(255, 0, 0, 1)',
					color: '#00CC6A',
					width: 22,
					borderColor: '#00CC6A',
					borderWidth: 20,
					dottedLine: true,
				}];
				this.polyline = polyline_obj;
			},
			//绘制矩形
			graph(arrayData) {
				console.log(arrayData, 'arrayData');
				let polygons_obj = [{
					points: arrayData,
					fillColor: '#376af64d',
					width: 5,
					strokeColor: '#9BC2FC', //描边颜色
					strokeWidth: 1, //描边宽度
					zIndex: 100, //层级
				}]
				this.polygons = polygons_obj;

				if(arrayData&&arrayData.length>0)
				{
					this.path(this.markers)
					//计算中心点
					this.latitude = eval(this.markers[0].latitude + '+' + this.markers[1].latitude) / 2
					this.longitude = eval(this.markers[0].longitude + '+' + this.markers[1].longitude) / 2
					this.map.latitude=this.latitude;
					this.map.longitude=this.longitude;
					//计算缩放比例
					this.scale = this.scaleDW(arrayData);
				}else{
					this.path(arrayData)
				}
			},
			// 规划路线的时候给起点一个marker，
			startingPoint(latitude, longitude, is) {
				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.markers = [this.startMarker];
                this.map.longitude = longitude;
			    this.map.latitude = latitude;
				if (!is) {
					this.$emit('getAddres', latitude + ',' + longitude)
				}

			},
			// 规划路线的时候给终点一个marker，
			endPoint(latitude, longitude, is) {
				let point = [{
					id: 2,
					width: 82,
					height: 95,
					latitude: latitude,
					longitude: longitude,
					iconPath: "/static/images/path/end.png",
					anchor: {
						x: 0.5,
						y: 1,
					},
				}, this.startMarker];
				this.markers = point;
				// console.log(this.markers, 'this.markers')
				this.map.longitude = longitude;
				this.map.latitude = latitude;
				if (!is) {
					this.$emit('getAddres', latitude + ',' + longitude)
				}
			},
			setMap(res) {
				this.longitude = res.longitude;
				this.latitude = res.latitude;
				this.markers[0].longitude = res.longitude;
				this.markers[0].latitude = res.latitude;
			}
		}
	}
</script>

<style>

</style>