diff --git a/index.html b/index.html index e726c0d..a28787f 100644 --- a/index.html +++ b/index.html @@ -10,5 +10,6 @@
+ diff --git a/src/components/Navmenu/index.vue b/src/components/Navmenu/index.vue index 2c8c27a..ca3b319 100644 --- a/src/components/Navmenu/index.vue +++ b/src/components/Navmenu/index.vue @@ -35,7 +35,7 @@ watch( navMenuList.value = [ { name: '首页', routerName: 'home', permissions: 'home' }, // { name: '数据大屏', routerName: 'big-screen', permissions: 'home' }, - { name: '数据地图', routerName: '', permissions: 'home' }, + { name: '数据地图', routerName: 'map', permissions: 'home' }, { name: '装备共享大厅', routerName: 'equipList', permissions: 'share' }, { name: '租赁需求大厅', routerName: 'parity', permissions: 'demand' }, // { name: '专区设备', routerName: 'zoneEquipment' }, @@ -45,7 +45,7 @@ watch( navMenuList.value = [ { name: '首页', routerName: 'home', permissions: 'home' }, // { name: '数据大屏', routerName: 'big-screen', permissions: 'home' }, - { name: '数据地图', routerName: '', permissions: 'home' }, + { name: '数据地图', routerName: 'map', permissions: 'home' }, { name: '装备共享大厅', routerName: 'equipList', permissions: 'home' }, { name: '租赁需求大厅', routerName: 'parity', permissions: 'home' }, // { name: '专区设备', routerName: 'zoneEquipment' }, @@ -57,7 +57,7 @@ watch( navMenuList.value = [ { name: '首页', routerName: 'home', permissions: 'home' }, // { name: '数据大屏', routerName: 'big-screen', permissions: 'home' }, - { name: '数据地图', routerName: '', permissions: 'home' }, + { name: '数据地图', routerName: 'map', permissions: 'home' }, { name: '装备共享大厅', routerName: 'equipList', permissions: 'home' }, // { name: '专区设备', routerName: 'zoneEquipment' }, { name: '租赁需求大厅', routerName: 'parity', permissions: 'home' }, diff --git a/src/http/api/map/index.ts b/src/http/api/map/index.ts new file mode 100644 index 0000000..936ab6c --- /dev/null +++ b/src/http/api/map/index.ts @@ -0,0 +1,6 @@ +import { get, post } from '../../index' + +// 获取坐标点数据 +export const getMapData = () => { + return get('/material-mall/api/mqtt/latest-data', {}) +} \ No newline at end of file diff --git a/src/router/index.ts b/src/router/index.ts index 6e44489..b5b16c2 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -93,6 +93,17 @@ const routes: Array = [ activeName: 'home', }, }, + { + path: 'map', + name: 'map', + component: () => import('views/home/map.vue'), + meta: { + title: '数据地图', + keepAlive: true, + AuthFlag: false, + activeName: 'map', + }, + }, // 自选直租 { path: '/equipList', diff --git a/src/utils/map.ts b/src/utils/map.ts new file mode 100644 index 0000000..3a5181a --- /dev/null +++ b/src/utils/map.ts @@ -0,0 +1,91 @@ +// 坐标转换工具函数 +const xPI = (Math.PI * 3000.0) / 180.0 +const PI = Math.PI +const a = 6378245.0 +const ee = 0.00669342162296594323 + +function transformlat(lng: number, lat: number): number { + let ret = + -100.0 + + 2.0 * lng + + 3.0 * lat + + 0.2 * lat * lat + + 0.1 * lng * lat + + 0.2 * Math.sqrt(Math.abs(lng)) + ret += ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0) / 3.0 + ret += ((20.0 * Math.sin(lat * PI) + 40.0 * Math.sin((lat / 3.0) * PI)) * 2.0) / 3.0 + ret += ((160.0 * Math.sin((lat / 12.0) * PI) + 320 * Math.sin((lat * PI) / 30.0)) * 2.0) / 3.0 + return ret +} + +function transformlng(lng: number, lat: number): number { + let ret = + 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng)) + ret += ((20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0) / 3.0 + ret += ((20.0 * Math.sin(lng * PI) + 40.0 * Math.sin((lng / 3.0) * PI)) * 2.0) / 3.0 + ret += ((150.0 * Math.sin((lng / 12.0) * PI) + 300.0 * Math.sin((lng / 30.0) * PI)) * 2.0) / 3.0 + return ret +} + +function convertDmToDd(dmValue: any) { + // 确保是字符串类型 + const str = dmValue.toString() + + // 经度处理(dddmm.mmmm) + if (str.length > 11) { + const degrees = parseFloat(str.substring(0, 3)) + const minutes = parseFloat(str.substring(3)) + return degrees + minutes / 60 + } + // 纬度处理(ddmm.mmmm) + else { + const degrees = parseFloat(str.substring(0, 2)) + const minutes = parseFloat(str.substring(2)) + return degrees + minutes / 60 + } +} + +interface CoordInfo { + [key: string]: any + latitude: number + longitude: number +} + +/** + * WGS84 -> GCJ02 -> BD09 + * @param lng 原始经度 + * @param lat 原始纬度 + * @param extra 需要合并返回的额外信息 + * @returns 返回包含百度坐标系的对象（包含额外字段） + */ +export function wgs84ToGcj02ToBd09Public( + lng: number, + lat: number, + extra: { [key: string]: any } = {}, +): CoordInfo { + lng = convertDmToDd(lng) + lat = convertDmToDd(lat) + // Step 1: WGS84 -> GCJ02 + let dlat = transformlat(lng - 105.0, lat - 35.0) + let dlng = transformlng(lng - 105.0, lat - 35.0) + let radlat = (lat / 180.0) * PI + let magic = Math.sin(radlat) + magic = 1 - ee * magic * magic + let sqrtmagic = Math.sqrt(magic) + dlat = (dlat * 180.0) / (((a * (1 - ee)) / (magic * sqrtmagic)) * PI) + dlng = (dlng * 180.0) / ((a / sqrtmagic) * Math.cos(radlat) * PI) + let mglat = lat + dlat + let mglng = lng + dlng + + // Step 2: GCJ02 -> BD09 + let z = Math.sqrt(mglng * mglng + mglat * mglat) + 0.00002 * Math.sin(mglat * xPI) + let theta = Math.atan2(mglat, mglng) + 0.000003 * Math.cos(mglng * xPI) + let bdlng = z * Math.cos(theta) + 0.0065 + let bdlat = z * Math.sin(theta) + 0.006 + + return { + ...extra, + longitude: bdlng, + latitude: bdlat, + } +} diff --git a/src/views/home/map.vue b/src/views/home/map.vue new file mode 100644 index 0000000..0e1b8e2 --- /dev/null +++ b/src/views/home/map.vue @@ -0,0 +1,896 @@ + + + + +