当前位置：首页 > news >正文

源码分析之Leaflet中Point

news 2025/4/26 16:45:22

概述

Leaflet 中的 Point 类是一个用于表示二维坐标点的核心工具，常见于像素坐标、屏幕偏移等场景（如地图元素的布局、事件位置计算）等，提供了一些方法来操作和转换这些坐标点。

需要注意的是在 Leaflet 中，坐标的表示是[lat,lng]，而在 Openlayers 或者 Mapbox GL 中，则与之相反，[lng,lat]表示坐标。

源码分析

源码实现

Point.js 源码实现和介绍如下：

// 灵活构造Point对象，将多种输入格式统一转换为`Point`实例
export function toPoint(x, y, round) {// round 可选参数四舍五入if (x instanceof Point) {return x; // 如果已经是Point实例，则直接返回}if (Array.isArray(x)) {return new Point(x[0], x[1]); // 如果是数组，则创建新的Point实例}if (x === undefined || x === null) {return x; // 如果是undefined或null，则直接返回}if (typeof x === "object" && "x" in x && "y" in x) {return new Point(x.x, x.y); // 如果是对象且包含x和y属性，则创建新的Point实例}return new Point(x, y, round); // 其他情况，创建新的Point实例
}// `Point`构造函数：坐标存储与舍入
export function Point(x, y, round) {this.x = round ? Math.round(x) : x;this.y = round ? Math.round(y) : y;
}// 兼容性截断处理，兼容不同浏览器的截断操作
// 正数`floor`，负数`ceil`
var trunc =Math.trunc ||function (v) {return v > 0 ? Math.floor(v) : Math.ceil(v);};//核心方法：原型上扩展坐标运算与变化
Point.prototype = {// 克隆方法：返回一个新的`Point`实例，与当前实例相同clone: function () {return new Point(this.x, this.y);},// 加法：返回一个新的`Point`实例，其坐标为当前实例与参数相加的结果add: function (point) {return this.clone()._add(toPoint(point));},// 私有方法：执行坐标相加操作，返回当前实例以实现链式调用_add: function (point) {this.x += point.x;this.y += point.y;return this;},// 减法：返回一个新的`Point`实例，其坐标为当前实例减去参数的结果subtract: function (point) {return this.clone()._subtract(toPoint(point));},// 私有方法：执行坐标相减操作，返回当前实例以实现链式调用_subtract: function (point) {this.x -= point.x;this.y -= point.y;return this;},// 除法：返回一个新的`Point`实例，其坐标为当前实例除以参数的结果divideBy: function (num) {return this.clone()._divideBy(num);},// 私有方法：执行坐标相除操作，返回当前实例以实现链式调用_divideBy: function (num) {this.x /= num;this.y /= num;return this;},// 乘法：返回一个新的`Point`实例，其坐标为当前实例乘以参数的结果multiplyBy: function (num) {return this.clone()._multiplyBy(num);},// 私有方法：执行坐标相乘操作，返回当前实例以实现链式调用_multiplyBy: function (num) {this.x *= num;this.y *= num;return this;},//分量乘除scaleBy: function (point) {return new Point(this.x * point.x, this.y * point.y);},unscaleBy: function (point) {return new Point(this.x / point.x, this.y / point.y);},// 取整round: function () {return this.clone()._round();},_round: function () {this.x = Math.round(this.x);this.y = Math.round(this.y);return this;},floor: function () {return this.clone()._floor();},_floor: function () {this.x = Math.floor(this.x);this.y = Math.floor(this.y);return this;},ceil: function () {return this.clone()._ceil();},_ceil: function () {this.x = Math.ceil(this.x);this.y = Math.ceil(this.y);return this;},trunc: function () {return this.clone()._trunc();},_trunc: function () {this.x = trunc(this.x);this.y = trunc(this.y);return this;},// 距离计算：返回当前实例到参数点的欧几里得距离distanceTo: function (point) {point = toPoint(point);var x = point.x - this.x,y = point.y - this.y;return Math.sqrt(x * x + y * y);},// 判断坐标是否严格相等equals: function (p) {return p && this.x === p.x && this.y === p.y;},//检查坐标绝对值是否在范围内，可用于边界判断contains: function (point) {point = toPoint(point);return (Math.abs(point.x) <= Math.abs(this.x) &&Math.abs(point.y) <= Math.abs(this.y));},// 坐标格式化转为字符串toString: function () {return "Point(" + formatNum(this.x) + ", " + formatNum(this.y) + ")";},
};