map.vue
2.73 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!-- 作业范围页 -->
<template>
<!-- 自定义头部 -->
<UniNav :title="title" @goBack="goBack"></UniNav>
<!-- end -->
<view class="content"
><map
class="mapBox"
:latitude="latitude"
:longitude="longitude"
:polygons="polygons"
:enable-zoom="true"
scale="10"
></map
></view>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
// 导入组件
// 导航组件
import UniNav from "@/components/uni-nav/index.vue";
// 导入接口
import { getUserScope } from "@/pages/api/my.js";
// ------定义变量------
const title = ref("作业范围"); //nav标题
const latitude = ref(39.997534); //维度
const longitude = ref(116.475334); //经度
const polygons = reactive([
{
//多边形的坐标数组
points: [
{
longitude: 116.475334,
latitude: 39.997534,
},
{
longitude: 116.476627,
latitude: 39.998315,
},
{
longitude: 116.478603,
latitude: 39.99879,
},
{
longitude: 116.478529,
latitude: 40.000296,
},
{
longitude: 116.475082,
latitude: 40.000151,
},
{
longitude: 116.473421,
latitude: 39.998717,
},
],
fillColor: "#EF4F3F20", //填充颜色后两个数值是透明度
strokeColor: "#EF4F3F", //描边颜色
strokeWidth: 2, //描边宽度
zIndex: 1, //层级
dottedLine: true,
},
]);
// ------生命周期------
onMounted(() => {
getUserPolygon();
});
// ------定义方法------
const getGeoCenter = (points) => {
let x = 0, y = 0, z = 0
points.forEach(p => {
const lat = p.latitude * Math.PI / 180
const lng = p.longitude * Math.PI / 180
x += Math.cos(lat) * Math.cos(lng)
y += Math.cos(lat) * Math.sin(lng)
z += Math.sin(lat)
})
const total = points.length
x /= total; y /= total; z /= total
const lng = Math.atan2(y, x)
const hyp = Math.sqrt(x * x + y * y)
const lat = Math.atan2(z, hyp)
return {
longitude: lng * 180 / Math.PI,
latitude: lat * 180 / Math.PI
}
}
// 获取作业范围
const getUserPolygon = async () => {
await getUserScope().then((res) => {
if (res.code === 200) {
// TODO暂时保留
// polygons[0].points=res.data.polygon
// latitude.value=polygons[0].points[0].latitude
// longitude.value=polygons[0].points[0].longitude
if(res.data.polygon) {
const {longitude : lng, latitude: lat} = getGeoCenter(res.data.polygon)
latitude.value = lat
longitude.value = lng
polygons[0].points=res.data.polygon
}
}
});
};
// 返回上一页
const goBack = () => {
uni.redirectTo({
url: "/pages/my/index",
});
};
</script>
<style src="./index.scss" lang="scss" scoped></style>