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

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

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

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

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

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

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像素坐标对应的地图经纬度坐标

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上对应的像素坐标

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

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

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

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

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. 平面地图像素坐标转换经纬度 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 对象