vue3+mapboxgl鼠标浮动显示cgcs2000

一、需求

鼠标在地图中浮动展示地图的经纬度，cgcs2000 xy 还有显示带号

二、实现效果

展示经度，纬度，x值，y值显示的是带号和y值

三、思路

3.1、mapbox获取经纬度方法

初始化地图后.on方法中有个mousemove方法

mapboxUtil._mapInstance.on('mousemove', mapboxUtil.mouseMove);

mouseMove(e) {
        console.log(e,"eeeeeeee")
        let obj = e.lngLat
        let WebMercator = wgs84ToCgcs2000(e.lngLat)
        obj["cgcsY"] = WebMercator[0]
        obj["cgcsX"] = WebMercator[1]
        obj["signed"] = WebMercator[2]
        store.commit("setMouseMove", obj);
    },

可以看出方法的参数中有经纬度，我们可以通过经纬度获取他的cgcs2000 xy 

 3.2、经纬度 和cgcs2000 互相转换

我这边用的是proj4,添加依赖

npm install proj4 --s

引用proj4 

import proj4 from "proj4";

  wgs84的参数= "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs  "

cgcs2000的参数= "+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs"

wgs84ToCgcs2000(lngLat) {
    let wgs84 = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs  "
    let cgcs2000 =
        "+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs"
    let obj = proj4(wgs84, cgcs2000, [lngLat.lng, lngLat.lat]);
    return obj;
}

 3.3、计算带号

 

由此可以看出三度带不在中央子午线上所以需要先减1.5度 

判断带号中国陆地范围内带号小于23的肯定是6度带，大于等于24的肯定是3度带。

如果计算的不多请多指教，我会及时改正

3度带带号计算公式：Math.floor((经度 - 1.5) / 3) + 1

let dh = Math.floor((lngLat.lng - 1.5) / 3) + 1

6度带带号计算公式：Math.floor(经度/ 3) + 1

let dh = Math.floor(lngLat.lng / 3) + 1