一、需求
鼠标在地图中浮动展示地图的经纬度，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文章来源：https://www.toymoban.com/news/detail-567359.html
let dh = Math.floor((lngLat.lng - 1.5) / 3) + 16度带带号计算公式：Math.floor(经度/ 3) + 1文章来源地址https://www.toymoban.com/news/detail-567359.html
let dh = Math.floor(lngLat.lng / 3) + 1到了这里，关于vue3+mapboxgl鼠标浮动显示cgcs2000的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
