leaflet加载天地图坐标系对不上

img


之前用的是百度瓦片图,打点正常显示在地图上,更换为天地图瓦片图后,感觉平移了一个地图

需要转换坐标的 ,坐标系不一样 。坐标系之间转换都有特定的 公式或者api 具体 哪个坐标系你要清楚。
一下 引用自 chatGPT:
可能是因为天地图和百度地图使用的是不同的坐标系导致的。百度地图使用的是 BD-09 坐标系,而天地图使用的是 WGS-84 坐标系。如果使用的是百度地图 API,可以通过使用 BMap.Convertor 类进行坐标系转换。但是在使用 Leaflet 加载天地图时,需要手动进行坐标系转换。
可以尝试在 Leaflet 中使用 Proj4js 库来进行坐标系转换。具体来说,可以在加载天地图时,定义一个自定义的坐标系转换器,将 WGS-84 坐标系转换为 Leaflet 默认使用的 EPSG3857 坐标系,代码如下:

// 引入 Proj4js 库
import 'proj4';
import 'proj4leaflet';
// 定义天地图的投影坐标系
const tdtPrj = '+proj=longlat +ellps=GRS80 +no_defs';
// 定义 EPSG3857 投影坐标系
const epsg3857Prj = '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +no_defs';
// 定义坐标系转换器
const tdtTo3857 = proj4(tdtPrj, epsg3857Prj);
// 加载天地图并设置坐标系转换器
const tdtLayer = L.tileLayer('http://{s}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk={key}', {
  key: 'your-key',
  subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
  attribution: '&copy; <a href="http://www.tianditu.com">天地图</a> contributors',
  tms: true,
  continuousWorld: true,
  bounds: [[-90, -180], [90, 180]],
  minZoom: 1,
  maxZoom: 18,
  // 设置坐标系转换器
  crs: L.CRS.EPSG3857,
  transformation: new L.Transformation(1, 0, -1, 0),
  tileSize: 256,
  zoomOffset: 1,
  // 定义坐标系转换函数
  tdtTo3857,
});

在定义了坐标系转换器之后,可以将天地图的坐标系转换为 Leaflet 默认使用的 EPSG3857 坐标系,从而保证在 Leaflet 中正常显示。