npm 包 sphericalmercator 使用教程-JavaScript中文网-JavaScript教程资源分享门户

npm 包 sphericalmercator 使用教程

前言

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

sphericalmercator 介绍

sphericalmercator 具有以下特点：

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

sphericalmercator 的安装

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

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

sphericalmercator 的使用

初始化

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

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

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

转换坐标

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

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

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

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

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

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

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

sphericalmercator 的 API

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

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

示例代码

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

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

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

输出：

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

总结

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

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/600670a58ccae46eb111f1b3