坐标系转换 最后更新时间: 2024年01月22日

本文介绍 JS API 中坐标系转换，其中包含如下内容：

1. 地图容器坐标与经纬度的互换
2. 经纬度与地图平面坐标的互换

1、地图容器坐标与经纬度的互换

真实世界中的地理位置是使用经纬度进行描述，然而当地图被抽象到浏览器的页面里时，真实的地址位置则需要转换为地图容器像素坐标，反之亦然。容器坐标与经纬度坐标关系如下图所示：

 通过下面Map对象上的两个接口，你可以进行容器坐标与经纬度互转，这个在鼠标进行点击标记地理位置时很常用：

1.1 容器坐标转经纬度坐标map.containerToLnglat

//在 html 的 #container 容器元素中创建地图
var map = new AMap.Map('container', {
  zoom: 4,
});

//容器坐标，原点为左上角
var px = 600;
var py = 300;

//构造成 AMap.Pixel 对象后传入
var pixel = new AMap.Pixel(px, py);

//获得 AMap.LngLat 对象
var lnglat= map.containerToLngLat(pixel);  
//console.log(lnglat.lng, lnglat.lat) //即为 #container 像素坐标对应的地图经纬度坐标

1.2 经纬度坐标转容器坐标map.lngLatToContainer

//在 html 的 #container 容器元素中创建地图
var map = new AMap.Map('container', {
  zoom: 4
});

//要转换的地理经纬度坐标
var longitude = 116.4;
var latitude = 39.9;

//构造成 AMap.LngLat 对象后传入
var lnglat = new AMap.LngLat(longitude, latitude);

// 获得 AMap.Pixel 对象
var pixel = map.lngLatToContainer(lnglat);  
//console.log(pixel.x, pixel.y) //即为经纬度在 #container 上对应的像素坐标

2、经纬度与平面地图像素坐标的互换

JS API 还会提供经纬度投影到平面地图像素坐标的转换接口。

其中 JS API 通过墨卡托投影，将球面坐标投影到平面平面坐标系上。在不同缩放等级zoom下，所投影的平面坐标是不同的，其关系为：缩放等级每扩大一倍，平面坐标就扩大两倍。

具体的转换关系，可以参考下图：

2.1 经纬度转换平面地图像素坐标map.lnglatToPixel

//在 html 的 #container 容器元素中创建地图
var map = new AMap.Map('container', {
  zoom: 4,
});

var longitude = 116.4;
var latitude = 39.9;

//数组格式传入，第二个参数指定缩放等级
var pixel1 = map.lnglatToPixel([longitude, latitude], 3); //返回 Pixel 对象

//构造成 LngLat 对象后传入，第二个参数指定缩放等级
var pixel2 = map.lnglatToPixel(new AMap.LngLat(longitude, latitude), 3); //返回 Pixel 对象

2.2 平面地图像素坐标转换经纬度map.pixelToLngLat

//在 html 的 #container 容器元素中创建地图
var map = new AMap.Map('container', {
  zoom: 4,
});

var x = 420;
var y = 195;

//构造成 Pixel 对象传入，第二个参数指定缩放等级
var lnglat = map.pixelToLngLat(new AMap.Pixel(x, y), 3); // 返回 LngLat 对象