高德地图 Web JS API示例学习笔记（4）——坐标变换（坐标系变换、其他坐标转高德坐标）

最新推荐文章于 2025-01-22 10:36:57 发布

何去何从2857

最新推荐文章于 2025-01-22 10:36:57 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： WebGIS

本文链接：https://blog.csdn.net/hequhecong10857/article/details/103667504

WebGIS 专栏收录该内容

62 篇文章

订阅专栏

本文详细介绍了如何在高德地图API中进行各种坐标系之间的转换，包括经纬度与地图容器像素坐标、平面像素坐标、三维坐标之间的转换，以及如何将其他坐标系统如MapBar、百度和GPS坐标转换为高德地图坐标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

坐标系转换
其他坐标转高德坐标
- 其他坐标 -> 高德坐标（重点）
- 其他坐标 -> 高德坐标（批量）（重点）

坐标系转换

使用了AMap.Geocoder插件，需要在script中声明。

经纬度 <-> 地图容器像素坐标

使用 lnglatTocontainer 和 containTolnglat 将经纬度坐标与地图容器像素坐标相互转换。
经纬度 -> 地图容器像素坐标

var lnglat = new AMap.LngLat(inputVal[0], inputVal[1]);
var pixel = map.lnglatTocontainer(lnglat);

经纬度 <- 地图容器像素坐标

var pixel = new AMap.Pixel(inputVal[0], inputVal[1]);
var lnglat = map.containerToLngLat(pixel);

经纬度 <-> 平面像素坐标

使用 lnglatToPixel 和 pixelToLngLat 将经纬度坐标与平面像素坐标相互转换。
经纬度 -> 平面像素坐标

var zoom = map.getZoom();
var lnglat = new AMap.LngLat(inputVal[0], inputVal[1]);
var pixel = map.lnglatToPixel(lnglat,zoom);

经纬度 <- 平面像素坐标

var zoom = map.getZoom(); 
var pixel = new AMap.Pixel(inputVal[0],inputVal[1]);
var lnglat = map.pixelToLngLat(pixel,zoom);

经纬度 <-> 三维坐标

使用 lngLatToGeodeticCoord 和 geodeticCoordToLngLat 将经纬度坐标与三维坐标相互转换。
经纬度 -> 三维坐标

var lnglat = new AMap.LngLat(inputVal[0], inputVal[1]);
var pixel = map.lngLatToGeodeticCoord(lnglat);
经纬度 <- 三维坐标
var pixel = new AMap.Pixel(inputVal[0], inputVal[1]);
var lnglat = map.geodeticCoordToLngLat(pixel);

其他坐标转高德坐标

其他坐标 -> 高德坐标（重点）

使用 AMap.convertFrom() 将其他坐标转换成高德坐标。

AMap.convertFrom(lnglat, type, function (status, result) {
 if (result.info === 'ok') {
     var resLnglat = result.locations[0];
     console.log(resLnglat);
   }
 });

lnglat为当前的坐标值，type为坐标转换的类型，其可选的值有：‘mapbar’，‘baidu’，‘gps’

其他坐标 -> 高德坐标（批量）（重点）

使用 AMap.convertFrom( ) 将其他坐标转换成高德坐标。

// 创建包含4个节点的折线及文字标注
    var path = [
      new AMap.LngLat(116.368904, 39.913423),
      new AMap.LngLat(116.398258, 39.904600)
    ];
// 坐标转换
    AMap.convertFrom(path, type, function (status, result) {
      if (result.info === 'ok') {
        var path2 = result.locations;
        polyline2 = new AMap.Polyline({
          path: path2,
          borderWeight: 2, // 线条宽度，默认为 1
          strokeColor: 'blue', // 线条颜色
          lineJoin: 'round' // 折线拐点连接处样式
        });
        map.add(polyline2);
      }
    });