本文共 1526 字，大约阅读时间需要 5 分钟。

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

Leaflet库本身提供了几个内置的方法来处理地图上的数据转换，主要涉及从地理坐标（经纬度）到图层坐标（像素坐标）以及容器坐标之间的转换。

一、原生数据转换

1. LatLng to Layer Point (latLngToLayerPoint)

将地理坐标（经纬度）转换为图层坐标（地图上的相对像素坐标）。图层坐标是相对于地图视口左上角的像素距离。

var latlng = L.latLng(51.505, -0.09);var layerPoint = map.latLngToLayerPoint(latlng);

2. LatLng to Container Point (latLngToContainerPoint)

与 latLngToLayerPoint 类似，但转换得到的是容器坐标，即相对于地图容器（<div>元素）的像素坐标，考虑到地图可能有滚动或偏移的情况。

var latlng = L.latLng(51.505, -0.09);var containerPoint = map.latLngToContainerPoint(latlng);

3. Layer Point to LatLng (layerPointToLatLng)

将图层坐标转换回地理坐标（经纬度）。

var layerPoint = L.point(100, 50); // 假设的图层坐标var latlng = map.layerPointToLatLng(layerPoint);

4. Container Point to LatLng (containerPointToLatLng)

将容器坐标转换回地理坐标（经纬度）。

var containerPoint = L.point(100, 50); // 假设的容器坐标var latlng = map.containerPointToLatLng(containerPoint);

5. Project and Unproject

project 和 unproject 方法允许你将经纬度坐标与地图的特定投影之间进行转换。project 将地理坐标转换为地图的内部坐标（通常是像素坐标的一个变种），而 unproject 则执行相反的操作。

var latlng = L.latLng(51.505, -0.09);var point = map.project(latlng);var latlngBack = map.unproject(point);

利用这些原生方法，你可以灵活地在地理坐标与屏幕坐标之间进行转换，从而在Leaflet地图上准确地放置和操作元素。

二、示例教程

1、 Point 和 LatLng 坐标互相转换

2、利用高德逆地理编码，点击地图标记marker，popup地址信息

三、Leaflet 入门教程 -系列文章列表

转载地址：http://gjgyk.baihongyu.com/