npm 包 sphericalmercator 使用教程

前言

Web 地图中坐标系转换是非常重要且常见的操作，其中 Mercator 投影是 Web 地图中最常用的一种投影方式，因为它可以在不失真的同时在 Web 等比例缩放的地图上进行坐标的展示和实现。 sphericalmercator 是 Node.js 中一个非常流行的坐标系转换库，支持 Mercator 投影下的坐标系转换，通常用于将经纬度（WGS84）坐标转换成瓦片([x, y]) 坐标或者将瓦片坐标转换成地理坐标。这篇文章主要是一份详细的使用文档，帮助大家更好的使用这个工具。

sphericalmercator 介绍

sphericalmercator 具有以下特点：

1. 支持了 JavaScript 中最常见的 GIS 坐标系
2. 良好的设计，易于扩展
3. 完备的测试用例
4. 完善的文档和使用样例

sphericalmercator 的安装

在开始使用前，我们需要使用 npm 进行安装：

npm install sphericalmercator --save

sphericalmercator 的使用

初始化

首先我们需要学会如何初始化一个 sphericalmercator 实例 ：

let sm = new SphericalMercator({
  size: 256
})

我们可以看到，我们可以通过传入一个设置对象来进行 sphericalmercator 的初始化。其中，size 表示瓦片的大小，是一个可选参数，如果不传递的话，那么瓦片的大小默认为 256。

转换坐标

经度-纬度（WGS84）坐标到瓦片坐标的转换过程非常简单，我们只需要调用转换方法即可：

let ll = [-180, -90]
let z = 0

console.log(sm.px(ll, z)) // [ 0, 0 ]
console.log(sm.bbox(0, 0, z)) // [-180, -85.05112877980659, 180, 85.05112877980659]

我们用 ll 表示一个点的经度和纬度，使用 px 方法可以对经纬度进行转换，转化结果是对应的瓦片坐标，此处为 [0,0]。你也可以使用 bbox 方法将此瓦片的边界转换为经纬度范围。 这里需要注意的是，这个库的px()方法返回一个 npm 包标准的 [x,y]的数组格式，其分别表示 x 轴和 y 轴坐标值。当你按照这种方式瓦片的边缘（top、left、bottom 和 right）进行测量时，这里的值反转，这意味着你可以得到左上角点的值，而不是如你所想的左下角。所以要注意判断。

let ll = [-180, -90]
let z = 0
let tile = sm.px(ll, z)
let tilePos = sm.ll(tile, z)

console.log("pixel", tile)
console.log("position", tilePos)

我们可以通过 px 方法将 ll 点转成的[x,y]坐标值，再使用 ll 方法将瓦片坐标转成对应的经度-纬度，发现 px 转换出来的结果与经纬度转换后又是原来的值,如下所示:

sphericalmercator 的 API

SphericalMercator 类的大多数 API 方法都在前面部分有提到了，但这里有一个更完整的 API 列表：

1. `constructor({ size: sizeOfTile = 256, ...opts: { a, b, e, ...otherOpts } }) 初始化函数
2. px([ lon, lat ], zoom)：坐标转瓦片像素坐标
3. ll([ x, y ], zoom, tms_style = false, srs = "EPSG:4326")：瓦片像素坐标转坐标
4. bbox(x, y, zoom, tms_style = false, srs = "EPSG:4326")：将给定的瓦片位置（x/y）和缩放级别转换为投影下的边界坐标
5. xyz(bbox, zoom, tms_style = false, srs = "EPSG:4326")：转换给定 bbox 和 zoom 设置的父级瓦片坐标 x/y/z
6. tms_to_xyz(xyz[, tms_style = false])：将与 TMS 样式 URL 中转换的搜索引擎地图网{x}/{y}/{zoom}址参数相关的瓦片坐标转换为 std XYZ TMS 指数
7. xyz_to_tms(xyz[, tms_style = false])：将 XYZ TMS 瓦片坐标转换为与 TMS-Style 访问 {x}/{y}/{zoom} 类型的 URL 时相关的参数

示例代码

-- -------------------- ---- -------
----- ----------------- - ----------------------------
--- -- - --- -------------------
  ----- ---
--

--- -- - ------ ----
--- - - -
--- ---- - --------- --
--- ------- - ----------- --

-------------------- -----
----------------------- --------

输出：

pixel [0, 0]
position [-180, -89.99999999999999]

总结

以上是关于 sphericalmercator 的介绍与使用教程，如果有任何疑问或建议，请留言讨论。在前端开发中，坐标系处理是一个非常重要的操作， sphericalmercator 是其中一个不错的选择，希望这篇文章能够对大家有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600670a58ccae46eb111f1b3