vue3+mapboxgl mouse floating display cgcs2000

1. Demand

The mouse floats in the map to display the latitude and longitude of the map, cgcs2000 xy also displays the band number

2. Realize the effect

Show longitude, latitude, x value, y value shows the band number and y value

3. Ideas

3.1, mapbox method to obtain latitude and longitude

After initializing the map, there is a mousemove method in the .on method

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);
    },

It can be seen that there are longitude and latitude in the parameters of the method, we can get his cgcs2000 xy through the longitude and latitude 

 3.2. Convert between latitude and longitude and cgcs2000

I use proj4 here, add dependencies

npm install proj4 --s

citing proj4 

import proj4 from "proj4";

  Parameters of wgs84 = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs "

Parameters of 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, calculate the band number

 

It can be seen from this that the three-degree zone is not on the central meridian, so it needs to be subtracted by 1.5 degrees 

Judgment of the belt number The belt number less than 23 must be the 6th degree belt within the Chinese land area, and the belt number greater than or equal to 24 must be the 3rd degree belt.

If the calculation is not much, please give me more advice, and I will correct it in time

3-degree belt number calculation formula: Math.floor((longitude - 1.5) / 3) + 1

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

Calculation formula for 6-degree belt number: Math.floor(longitude/3) + 1

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