百度地图经纬度坐标转换为像素坐标原理

最新推荐文章于 2025-05-14 14:59:40 发布

chixielv2759

最新推荐文章于 2025-05-14 14:59:40 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

文章标签： python javascript c# ViewUI

原文链接：https://my.oschina.net/jszhang/blog/3098870

本文详细介绍了如何将经纬度坐标转换为地图上的像素坐标，包括从经纬度到墨卡托投影坐标，再到相对中心投影坐标的过程，并最终根据地图的缩放级别进行调整。通过具体实例，展示了如何使用地图API完成这一系列转换。

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

// 投影实例
const projection = map.getMapType().getProjection()

// 地图div宽高
const box = map.getSize()
const zoom = window.Math.pow(2, 18 - map.getZoom())

// 中心坐标 转 平面坐标
const center = projection.lngLatToPoint(map.getCenter())

// 测试坐标 转 平面坐标
const point = projection.lngLatToPoint({ lng: 118.816832, lat: 31.981216 })

// 像素坐标
const x = Math.round((point.x - center.x) / zoom + box.width / 2)
const y = Math.round((center.y - point.y) / zoom + box.height / 2)

// 测试下 与pointToPixel转换是相同的
const pixel = map.pointToPixel({ lng: 118.816832, lat: 31.981216 })
console.log(pixel, x, y)

经纬度 => 墨卡托投影坐标 => 相对中心投影坐标 => 根据地图缩放级别调整 => 最后加上地图窗口宽高

转载于:https://my.oschina.net/jszhang/blog/3098870