经纬志
首页 / Leaflet / API 文档

Point

先看结论

屏幕坐标系里的一个点:x 向右、y 向下,单位是像素,不携带任何地理含义。

最后验证 2026-11-03 · Leaflet 1.9.4 · 更新 2026-10-29 · 引用本文
L.point(x, y, round?) → Point

等价写法是 new L.Point(x, y, round)。round 为真时构造阶段就把坐标取整,适合像素对齐的场景。

属性

属性类型说明
xnumber横向像素坐标
ynumber纵向像素坐标,向下为正

方法

方法返回说明
clone()Point复制一份
add(point)Point逐分量相加,新对象
subtract(point)Point逐分量相减
multiplyBy(num)Point统一乘一个标量
divideBy(num)Point统一除一个标量
scaleBy(point)Point按分量相乘
unscaleBy(point)Point按分量相除
round() / floor() / ceil() / trunc()Point四种取整方式,均返回新对象
distanceTo(point)number两点间的平面距离(像素)
equals(point)boolean严格比较两个分量
contains(point)boolean分量绝对值是否都不大于对方,用于尺寸包含判断
toString()string形如 Point(12, 34)

所有运算方法都不修改原对象,链式调用是安全的:p.add(q).round() 不会动到 p。

在地图上算偏移

把地理坐标换算成图层像素坐标后,偏移就是普通的加减法。 下面把标注放到点位右上方 16 像素处:

var latlng = L.latLng(39.907359, 116.391263);

/* 图层像素坐标,随缩放变化 */
var p = map.latLngToLayerPoint(latlng);

var labelPos = p.add(L.point(16, -16));

var label = L.marker(map.layerPointToLatLng(labelPos), {
  icon: L.divIcon({ className: 'poi-label', html: '站点 A' })
}).addTo(map);

latLngToLayerPoint 的结果依赖当前缩放级别与地图视图, 缩放后必须重新计算;把它缓存下来会在拖动或缩放时错位。

三种坐标不要混用

坐标来源单位用途
LatLng经纬度度数据存储、接口交互
Point(图层)latLngToLayerPoint像素同一缩放下的标注定位
Point(容器)latLngToContainerPoint像素鼠标位置、覆盖层命中

图层坐标与容器坐标只差地图左上角的偏移,两者都随视图变化。 跨缩放级别保存像素坐标没有意义,保存经纬度才有。

contains 不是「点是否在矩形内」的通用判断。 它按分量比较绝对值,L.point(5, 5).contains(L.point(-10, 3)) 返回 false, 但坐标轴方向与边界规则都不适合当作矩形包含测试。 判断点是否落在 LatLngBounds 里,用 bounds.contains(latlng)。

引用本文

经纬志(2026)。《Point》。https://www.jingweizhi.com/leaflet/api/point.html(访问日期 2026-11-03)。