feat(map): 添加GPS坐标转换功能以支持WGS84到GCJ02转换
- 在多个组件中导入GPS坐标转换工具 - 实现WGS84坐标到GCJ02坐标的转换逻辑 - 更新地图初始化坐标和标记点坐标处理方式 - 增加对无效坐标和转换异常的错误处理 - 修改车辆轨迹点坐标转换流程 - 调整地图显示逻辑以使用转换后坐标
This commit is contained in:
@@ -8,6 +8,8 @@ import './location.scss'
|
|||||||
import {HjmFence} from "@/api/hjm/hjmFence/model";
|
import {HjmFence} from "@/api/hjm/hjmFence/model";
|
||||||
import {getHjmFence} from "@/api/hjm/hjmFence";
|
import {getHjmFence} from "@/api/hjm/hjmFence";
|
||||||
import {Market} from "../pages/index";
|
import {Market} from "../pages/index";
|
||||||
|
// 导入GPS坐标转换工具
|
||||||
|
import GPS from '@/utils/gpsUtil.js';
|
||||||
interface Where {
|
interface Where {
|
||||||
latitude?: number;
|
latitude?: number;
|
||||||
longitude?: number;
|
longitude?: number;
|
||||||
@@ -42,9 +44,30 @@ const Location = () => {
|
|||||||
// 转为多边形点数组
|
// 转为多边形点数组
|
||||||
const points = coordPairs.map(coord => {
|
const points = coordPairs.map(coord => {
|
||||||
const [lat, lng] = coord.split(',');
|
const [lat, lng] = coord.split(',');
|
||||||
|
const latitude = parseFloat(lat);
|
||||||
|
const longitude = parseFloat(lng);
|
||||||
|
|
||||||
|
// 确保解析后的坐标是有效数字
|
||||||
|
if (isNaN(latitude) || isNaN(longitude)) {
|
||||||
|
throw new Error(`无效坐标: ${lat}, ${lng}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 转换WGS84坐标到GCJ02坐标
|
||||||
|
try {
|
||||||
|
const transformed = GPS.gcj_encrypt(latitude, longitude);
|
||||||
|
if (transformed && !isNaN(transformed.lat) && !isNaN(transformed.lng)) {
|
||||||
|
return {
|
||||||
|
latitude: transformed.lat,
|
||||||
|
longitude: transformed.lng
|
||||||
|
};
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('围栏坐标转换错误:', error);
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
latitude: parseFloat(lat),
|
latitude: latitude,
|
||||||
longitude: parseFloat(lng)
|
longitude: longitude
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
console.log(points,'pointspointspoints')
|
console.log(points,'pointspointspoints')
|
||||||
@@ -57,30 +80,66 @@ const Location = () => {
|
|||||||
|
|
||||||
const reload = () => {
|
const reload = () => {
|
||||||
setScale(11)
|
setScale(11)
|
||||||
setLongitude(108.355702)
|
|
||||||
setLatitude(22.857968)
|
// 设置初始坐标(需要转换)
|
||||||
|
const initialLat = 22.857968;
|
||||||
|
const initialLng = 108.355702;
|
||||||
|
try {
|
||||||
|
const transformed = GPS.gcj_encrypt(initialLat, initialLng);
|
||||||
|
if (transformed && !isNaN(transformed.lat) && !isNaN(transformed.lng)) {
|
||||||
|
setLongitude(transformed.lng);
|
||||||
|
setLatitude(transformed.lat);
|
||||||
|
} else {
|
||||||
|
setLongitude(initialLng);
|
||||||
|
setLatitude(initialLat);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('初始坐标转换错误:', error);
|
||||||
|
setLongitude(initialLng);
|
||||||
|
setLatitude(initialLat);
|
||||||
|
}
|
||||||
|
|
||||||
getHjmFence(4).then(data => {
|
getHjmFence(4).then(data => {
|
||||||
setFence(data)
|
setFence(data)
|
||||||
const coordStr = data.points || '';
|
const coordStr = data.points || '';
|
||||||
|
|
||||||
// 使用通用函数解析坐标字符串
|
// 使用通用函数解析坐标字符串(已包含坐标转换)
|
||||||
const {points} = parseCoordinateString(coordStr);
|
const {points} = parseCoordinateString(coordStr);
|
||||||
console.log('解析结果 - 多边形点:', points);
|
console.log('解析结果 - 多边形点:', points);
|
||||||
setPoints(points);
|
setPoints(points);
|
||||||
setShowCircles(true)
|
setShowCircles(true)
|
||||||
console.log(fence,'fencefencefence')
|
console.log(fence,'fencefencefence')
|
||||||
})
|
})
|
||||||
|
|
||||||
const where: Where = {}
|
const where: Where = {}
|
||||||
|
// 使用转换后的坐标
|
||||||
where.latitude = latitude
|
where.latitude = latitude
|
||||||
where.longitude = longitude
|
where.longitude = longitude
|
||||||
|
|
||||||
pageByQQMap(where).then(res => {
|
pageByQQMap(where).then(res => {
|
||||||
if (res?.count == 0) {
|
if (res?.count == 0) {
|
||||||
const arr = []
|
const arr = []
|
||||||
|
// 转换默认位置坐标
|
||||||
|
const defaultLat = 22.813371;
|
||||||
|
const defaultLng = 108.323885;
|
||||||
|
let markerLat = defaultLat;
|
||||||
|
let markerLng = defaultLng;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const transformed = GPS.gcj_encrypt(defaultLat, defaultLng);
|
||||||
|
if (transformed && !isNaN(transformed.lat) && !isNaN(transformed.lng)) {
|
||||||
|
markerLat = transformed.lat;
|
||||||
|
markerLng = transformed.lng;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('默认位置坐标转换错误:', error);
|
||||||
|
}
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
arr.push({
|
arr.push({
|
||||||
id: 10001,
|
id: 10001,
|
||||||
latitude: 22.813371,
|
latitude: markerLat,
|
||||||
longitude: 108.323885,
|
longitude: markerLng,
|
||||||
title: '当前位置',
|
title: '当前位置',
|
||||||
name: '当前位置'
|
name: '当前位置'
|
||||||
})
|
})
|
||||||
@@ -91,11 +150,31 @@ const Location = () => {
|
|||||||
const data = res?.list;
|
const data = res?.list;
|
||||||
const arr = []
|
const arr = []
|
||||||
data?.map((item: HjmCar) => {
|
data?.map((item: HjmCar) => {
|
||||||
|
// 转换WGS84坐标到GCJ02坐标
|
||||||
|
let markerLat = item.latitude;
|
||||||
|
let markerLng = item.longitude;
|
||||||
|
|
||||||
|
if (item.latitude && item.longitude) {
|
||||||
|
try {
|
||||||
|
const lat = Number(item.latitude);
|
||||||
|
const lng = Number(item.longitude);
|
||||||
|
if (!isNaN(lat) && !isNaN(lng) && isFinite(lat) && isFinite(lng)) {
|
||||||
|
const transformed = GPS.gcj_encrypt(lat, lng);
|
||||||
|
if (transformed && !isNaN(transformed.lat) && !isNaN(transformed.lng)) {
|
||||||
|
markerLat = transformed.lat;
|
||||||
|
markerLng = transformed.lng;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('车辆坐标转换错误:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
arr.push({
|
arr.push({
|
||||||
id: item.id,
|
id: item.id,
|
||||||
latitude: item.latitude,
|
latitude: markerLat,
|
||||||
longitude: item.longitude,
|
longitude: markerLng,
|
||||||
label: {
|
label: {
|
||||||
content: `${item?.code}`,
|
content: `${item?.code}`,
|
||||||
color: '#000000',
|
color: '#000000',
|
||||||
|
|||||||
@@ -7,6 +7,8 @@ import {HjmCar} from "@/api/hjm/hjmCar/model";
|
|||||||
import './trajectory.scss'
|
import './trajectory.scss'
|
||||||
import {pageHjmGpsLog} from "@/api/hjm/hjmGpsLog";
|
import {pageHjmGpsLog} from "@/api/hjm/hjmGpsLog";
|
||||||
import {formatCurrentDate, getCurrentHour} from "@/utils/time";
|
import {formatCurrentDate, getCurrentHour} from "@/utils/time";
|
||||||
|
// 导入GPS坐标转换工具
|
||||||
|
import GPS from '@/utils/gpsUtil.js';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 文章终极列表
|
* 文章终极列表
|
||||||
@@ -102,14 +104,33 @@ const Location = () => {
|
|||||||
Taro.showLoading({title: '加载中...'});
|
Taro.showLoading({title: '加载中...'});
|
||||||
pageHjmGpsLog(where).then(res => {
|
pageHjmGpsLog(where).then(res => {
|
||||||
console.log(res?.list, 'list')
|
console.log(res?.list, 'list')
|
||||||
// setPoints(res?.list.map(item => {
|
// 转换轨迹点坐标
|
||||||
// console.log(item, 'item.')
|
const transformedPoints = (res?.list || []).map(item => {
|
||||||
// return {
|
// 转换WGS84坐标到GCJ02坐标
|
||||||
// latitude: item.latitude,
|
const lat = Number(item.latitude);
|
||||||
// longitude: item.longitude
|
const lng = Number(item.longitude);
|
||||||
// }
|
|
||||||
// }) || [])
|
if (item.latitude && item.longitude &&
|
||||||
setHjmGpsLog(res?.list || []);
|
!isNaN(lat) &&
|
||||||
|
!isNaN(lng) &&
|
||||||
|
isFinite(lat) &&
|
||||||
|
isFinite(lng)) {
|
||||||
|
try {
|
||||||
|
const transformed = GPS.gcj_encrypt(lat, lng);
|
||||||
|
if (transformed && !isNaN(transformed.lat) && !isNaN(transformed.lng)) {
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
latitude: transformed.lat,
|
||||||
|
longitude: transformed.lng
|
||||||
|
};
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('轨迹点坐标转换错误:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
setHjmGpsLog(transformedPoints);
|
||||||
}).finally(() => {
|
}).finally(() => {
|
||||||
Taro.hideLoading();
|
Taro.hideLoading();
|
||||||
})
|
})
|
||||||
@@ -123,8 +144,34 @@ const Location = () => {
|
|||||||
getHjmCarByCode(keywords).then(data => {
|
getHjmCarByCode(keywords).then(data => {
|
||||||
console.log('执行搜索', data)
|
console.log('执行搜索', data)
|
||||||
setItem(data)
|
setItem(data)
|
||||||
setLatitude(data.latitude)
|
|
||||||
setLongitude(data.longitude)
|
// 转换WGS84坐标到GCJ02坐标
|
||||||
|
if (data.latitude && data.longitude &&
|
||||||
|
!isNaN(data.latitude) &&
|
||||||
|
!isNaN(data.longitude) &&
|
||||||
|
isFinite(data.latitude) &&
|
||||||
|
isFinite(data.longitude)) {
|
||||||
|
try {
|
||||||
|
const lat = Number(data.latitude);
|
||||||
|
const lng = Number(data.longitude);
|
||||||
|
const transformed = GPS.gcj_encrypt(lat, lng);
|
||||||
|
if (transformed && !isNaN(transformed.lat) && !isNaN(transformed.lng)) {
|
||||||
|
setLatitude(transformed.lat);
|
||||||
|
setLongitude(transformed.lng);
|
||||||
|
} else {
|
||||||
|
setLatitude(data.latitude);
|
||||||
|
setLongitude(data.longitude);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('坐标转换错误:', error);
|
||||||
|
setLatitude(data.latitude);
|
||||||
|
setLongitude(data.longitude);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setLatitude(data.latitude);
|
||||||
|
setLongitude(data.longitude);
|
||||||
|
}
|
||||||
|
|
||||||
setKeywords(data.code)
|
setKeywords(data.code)
|
||||||
// 获取车辆轨迹信息
|
// 获取车辆轨迹信息
|
||||||
getLocationRecord(data);
|
getLocationRecord(data);
|
||||||
@@ -144,8 +191,34 @@ const Location = () => {
|
|||||||
if (code) {
|
if (code) {
|
||||||
getHjmCarByCode(code).then(data => {
|
getHjmCarByCode(code).then(data => {
|
||||||
setItem(data)
|
setItem(data)
|
||||||
setLatitude(data.latitude)
|
|
||||||
setLongitude(data.longitude)
|
// 转换WGS84坐标到GCJ02坐标
|
||||||
|
if (data.latitude && data.longitude &&
|
||||||
|
!isNaN(data.latitude) &&
|
||||||
|
!isNaN(data.longitude) &&
|
||||||
|
isFinite(data.latitude) &&
|
||||||
|
isFinite(data.longitude)) {
|
||||||
|
try {
|
||||||
|
const lat = Number(data.latitude);
|
||||||
|
const lng = Number(data.longitude);
|
||||||
|
const transformed = GPS.gcj_encrypt(lat, lng);
|
||||||
|
if (transformed && !isNaN(transformed.lat) && !isNaN(transformed.lng)) {
|
||||||
|
setLatitude(transformed.lat);
|
||||||
|
setLongitude(transformed.lng);
|
||||||
|
} else {
|
||||||
|
setLatitude(data.latitude);
|
||||||
|
setLongitude(data.longitude);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('坐标转换错误:', error);
|
||||||
|
setLatitude(data.latitude);
|
||||||
|
setLongitude(data.longitude);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setLatitude(data.latitude);
|
||||||
|
setLongitude(data.longitude);
|
||||||
|
}
|
||||||
|
|
||||||
setKeywords(data.code)
|
setKeywords(data.code)
|
||||||
// 获取车辆轨迹信息
|
// 获取车辆轨迹信息
|
||||||
getLocationRecord(data);
|
getLocationRecord(data);
|
||||||
@@ -220,7 +293,6 @@ const Location = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/*<Map polyline={{hjmGpsLog}}></Map>*/}
|
|
||||||
<Map
|
<Map
|
||||||
id="map"
|
id="map"
|
||||||
longitude={longitude}
|
longitude={longitude}
|
||||||
|
|||||||
@@ -12,6 +12,8 @@ import {getSiteInfo, getUserInfo, getWxOpenId} from "@/api/layout";
|
|||||||
import Login from "./Login";
|
import Login from "./Login";
|
||||||
import {pageByQQMap, pageHjmCar} from "@/api/hjm/hjmCar";
|
import {pageByQQMap, pageHjmCar} from "@/api/hjm/hjmCar";
|
||||||
import {HjmCar} from "@/api/hjm/hjmCar/model";
|
import {HjmCar} from "@/api/hjm/hjmCar/model";
|
||||||
|
// 导入GPS坐标转换工具
|
||||||
|
import GPS from '@/utils/gpsUtil.js';
|
||||||
|
|
||||||
export interface Market {
|
export interface Market {
|
||||||
// 自增ID
|
// 自增ID
|
||||||
@@ -108,14 +110,36 @@ function Home() {
|
|||||||
const getLocation = async () => {
|
const getLocation = async () => {
|
||||||
try {
|
try {
|
||||||
const res = await Taro.getLocation({
|
const res = await Taro.getLocation({
|
||||||
type: 'gcj02' //返回可以用于wx.openLocation的经纬度
|
type: 'wgs84' // 使用WGS84坐标系,然后手动转换为GCJ02
|
||||||
})
|
})
|
||||||
|
|
||||||
if (res.latitude) {
|
// 转换WGS84坐标到GCJ02坐标
|
||||||
setLatitude(res.latitude)
|
if (res.latitude && res.longitude &&
|
||||||
}
|
!isNaN(res.latitude) &&
|
||||||
if (res.longitude) {
|
!isNaN(res.longitude) &&
|
||||||
setLongitude(res.longitude)
|
isFinite(res.latitude) &&
|
||||||
|
isFinite(res.longitude)) {
|
||||||
|
try {
|
||||||
|
const lat = Number(res.latitude);
|
||||||
|
const lng = Number(res.longitude);
|
||||||
|
const transformed = GPS.gcj_encrypt(lat, lng);
|
||||||
|
// 确保转换结果有效
|
||||||
|
if (transformed && !isNaN(transformed.lat) && !isNaN(transformed.lng)) {
|
||||||
|
setLatitude(transformed.lat);
|
||||||
|
setLongitude(transformed.lng);
|
||||||
|
} else {
|
||||||
|
// 如果转换结果无效,使用原始坐标
|
||||||
|
setLatitude(res.latitude);
|
||||||
|
setLongitude(res.longitude);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('坐标转换错误:', error);
|
||||||
|
setLatitude(res.latitude);
|
||||||
|
setLongitude(res.longitude);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setLatitude(res.latitude);
|
||||||
|
setLongitude(res.longitude);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 已认证用户
|
// 已认证用户
|
||||||
@@ -185,11 +209,33 @@ function Home() {
|
|||||||
const data = res?.list;
|
const data = res?.list;
|
||||||
const arr = []
|
const arr = []
|
||||||
data?.map((item: HjmCar) => {
|
data?.map((item: HjmCar) => {
|
||||||
|
// 转换WGS84坐标到GCJ02坐标
|
||||||
|
let markerLat = item.latitude;
|
||||||
|
let markerLng = item.longitude;
|
||||||
|
|
||||||
|
if (item.latitude && item.longitude &&
|
||||||
|
!isNaN(item.latitude) &&
|
||||||
|
!isNaN(item.longitude) &&
|
||||||
|
isFinite(item.latitude) &&
|
||||||
|
isFinite(item.longitude)) {
|
||||||
|
try {
|
||||||
|
const lat = Number(item.latitude);
|
||||||
|
const lng = Number(item.longitude);
|
||||||
|
const transformed = GPS.gcj_encrypt(lat, lng);
|
||||||
|
if (transformed && !isNaN(transformed.lat) && !isNaN(transformed.lng)) {
|
||||||
|
markerLat = transformed.lat;
|
||||||
|
markerLng = transformed.lng;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('标记点坐标转换错误:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
arr.push({
|
arr.push({
|
||||||
id: item.id,
|
id: item.id,
|
||||||
latitude: item.latitude,
|
latitude: markerLat,
|
||||||
longitude: item.longitude,
|
longitude: markerLng,
|
||||||
label: {
|
label: {
|
||||||
content: `${item?.code}`,
|
content: `${item?.code}`,
|
||||||
color: '#000000',
|
color: '#000000',
|
||||||
@@ -232,13 +278,36 @@ function Home() {
|
|||||||
setList(res?.list || [])
|
setList(res?.list || [])
|
||||||
if (res?.list && res?.list.length > 0) {
|
if (res?.list && res?.list.length > 0) {
|
||||||
const data = res?.list[0];
|
const data = res?.list[0];
|
||||||
setLongitude(data?.longitude)
|
|
||||||
setLatitude(data?.latitude)
|
// 转换WGS84坐标到GCJ02坐标
|
||||||
|
let displayLat = data.latitude;
|
||||||
|
let displayLng = data.longitude;
|
||||||
|
|
||||||
|
if (data.latitude && data.longitude &&
|
||||||
|
!isNaN(data.latitude) &&
|
||||||
|
!isNaN(data.longitude) &&
|
||||||
|
isFinite(data.latitude) &&
|
||||||
|
isFinite(data.longitude)) {
|
||||||
|
try {
|
||||||
|
const lat = Number(data.latitude);
|
||||||
|
const lng = Number(data.longitude);
|
||||||
|
const transformed = GPS.gcj_encrypt(lat, lng);
|
||||||
|
if (transformed && !isNaN(transformed.lat) && !isNaN(transformed.lng)) {
|
||||||
|
displayLat = transformed.lat;
|
||||||
|
displayLng = transformed.lng;
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('搜索结果坐标转换错误:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setLongitude(displayLng)
|
||||||
|
setLatitude(displayLat)
|
||||||
if (isAdmin) {
|
if (isAdmin) {
|
||||||
setMarkers([{
|
setMarkers([{
|
||||||
id: data.id,
|
id: data.id,
|
||||||
latitude: data.latitude,
|
latitude: displayLat,
|
||||||
longitude: data.longitude,
|
longitude: displayLng,
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
label: {
|
label: {
|
||||||
content: `${data?.code}`,
|
content: `${data?.code}`,
|
||||||
|
|||||||
Reference in New Issue
Block a user