地图页面添加磁偏角展示

This commit is contained in:
cwchen 2026-01-12 10:13:52 +08:00
parent 552ee66d94
commit f73966d6be
3 changed files with 64 additions and 8 deletions

View File

@ -13,6 +13,48 @@ export function useGeomagnetism() {
};
};
/**
* 将度数转换为度分格式
* @param {number} degrees - 度数 -5.333
* @returns {string} 度分格式字符串 "-5° 20'"
*/
const formatDegreesToDMS = (degrees) => {
if (typeof degrees !== 'number' || isNaN(degrees)) {
return '0° 0\'';
}
const absDegrees = Math.abs(degrees);
const sign = degrees < 0 ? '-' : '';
// 获取度数部分(整数)
const deg = Math.floor(absDegrees);
// 获取分数部分(小数部分 * 60四舍五入到整数
const minutes = Math.round((absDegrees - deg) * 60);
return `${sign}${deg}° ${minutes}'`;
};
/**
* 将度数转换为东西方向格式
* @param {number} degrees - 度数 -5.333
* @param {number} decimals - 保留小数位数默认2位
* @returns {string} 格式字符串 "5.33° W" "3.45° E"
*/
const formatDegreesToDirection = (degrees, decimals = 2) => {
if (typeof degrees !== 'number' || isNaN(degrees)) {
return '0.00°';
}
const absDegrees = Math.abs(degrees);
const direction = degrees < 0 ? 'W' : degrees > 0 ? 'E' : '';
// 保留指定小数位数
const formattedDegrees = absDegrees.toFixed(decimals);
return direction ? `${formattedDegrees}° ${direction}` : `${formattedDegrees}°`;
};
const calculate = (latitude, longitude, altitude = 0) => {
try {
// 强制转换
@ -21,7 +63,7 @@ export function useGeomagnetism() {
if (isNaN(numLat) || isNaN(numLng)) {
console.warn('磁偏角计算: 无效的经纬度', { latitude, longitude });
return { declination: 0, success: false };
return { declination: 0, declinationFormatted: '0.00°', success: false };
}
const wgs = bd09toWgs84(numLat, numLng);
@ -31,7 +73,7 @@ export function useGeomagnetism() {
if (!model || typeof model.point !== 'function') {
console.error("无法加载地磁模型或模型没有point方法");
return { declination: 0, success: false };
return { declination: 0, declinationFormatted: '0.00°', success: false };
}
// point() 方法接受数组参数 [lat, lon, altitude]
@ -40,7 +82,7 @@ export function useGeomagnetism() {
if (!info) {
console.error('model.point() 返回 null 或 undefined');
return { declination: 0, success: false };
return { declination: 0, declinationFormatted: '0.00°', success: false };
}
// 根据 geomagnetism 库的类型定义,返回值属性名是 decl不是 declination
@ -48,19 +90,23 @@ export function useGeomagnetism() {
if (typeof decl !== 'number' || isNaN(decl)) {
console.warn('磁偏角值无效:', decl, 'info对象:', info);
return { declination: 0, success: false };
return { declination: 0, declinationFormatted: '0.00°', success: false };
}
// 转换为东西方向格式(如 "5.33° W"
const declinationFormatted = formatDegreesToDirection(decl);
return {
declination: decl,
declinationFormatted: declinationFormatted,
success: true
};
} catch (e) {
console.error('磁偏角计算过程出错:', e);
console.error('错误堆栈:', e.stack);
return { declination: 0, success: false };
return { declination: 0, declinationFormatted: '0.00°', success: false };
}
};
return { calculate };
return { calculate, formatDegreesToDMS, formatDegreesToDirection };
}

View File

@ -10,6 +10,7 @@ import { ref, onMounted } from 'vue'
import { useMemberStore } from '@/stores/modules/member'
import { onLoad } from '@dcloudio/uni-app'
import { getAllProjectListApi, getProjectModelListApi } from '@/services/projectSelect'
import { useGeomagnetism } from '@/hooks/useGeomagnetism';
const baiduMap = ref(null)
const projectList = ref([])
@ -40,14 +41,22 @@ const handleWebViewMessage = (event) => {
})
}
//
const { calculate } = useGeomagnetism();
onLoad(() => {
getProjectList().then(() => {
if (projectList.value.length > 0) {
const projectInfo = projectList.value.map((item) => {
const res = calculate(item.latitude, item.longitude);
// 使使
const declVal = res?.declinationFormatted || (res?.declination !== undefined ? `${res.declination.toFixed(2)}°` : '0° 0\'');
return {
lat: item.latitude,
declination: declVal,
lng: item.longitude,
proName: item.proName,
proName: item.proName,
chargePerson: item.chargePerson,
location: item.location,
proId: item.proId,

View File

@ -56,6 +56,7 @@
}
function handleProjectInfoOnMap(map, projectInfo) {
// 示例1: 如果项目信息包含经纬度,移动地图到该位置
if (projectInfo.lng && projectInfo.lat) {
@ -79,7 +80,7 @@
// <p>所在地: ${projectInfo.location}</p>
// `);
const label = new BMapGL.Label(projectInfo.proName, {
const label = new BMapGL.Label(`${projectInfo.proName} (${projectInfo.declination})`, {
position: projectPoint,
offset: new BMapGL.Size(0, 0), // 调整偏移量使文字在marker正下方
})