npm包wgs84使用教程

在前端Web开发中,地理坐标的处理是一个非常重要的问题,经纬度计算和坐标系转换经常会遇到。WGS84是全球地理坐标体系,是目前最常用的GPS全球定位系统的地球模型。

本文主要介绍使用npm包wgs84实现WGS84坐标系与国标坐标系之间的转换,对前端开发工程师进行具体的学习和指导。

1. 安装wgs84

npm包wgs84可在npm官网上下载自己需要的版本进行安装。首先在终端进入项目文件夹,然后使用下面的命令进行安装:

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

安装成功后,npm包wgs84就已经准备好了。接下来,我们来看看它的具体用法。

2. 使用wgs84进行坐标系的转换

在使用之前,需要先将wgs84引入到项目中:

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

2.1 经纬度坐标系转平面直角坐标系(GCJ02、BD09)

将经纬度转换为平面直角坐标系可以满足具体的地图功能,目前常用的坐标系有GCJ02(国测局坐标系)和BD09(百度坐标系)。下面的示例代码使用wgs84将经纬度的坐标系(GPS坐标系)转换为GCJ02坐标系和BD09坐标系坐标:

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

2.2 平面直角坐标系转经纬度坐标系(GCJ02、BD09)

将平面直角坐标系转换为经纬度坐标系可以满足具体的地理位置功能,我们通过wgs84将GCJ02坐标系和BD09坐标系转换为经纬度坐标系。

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

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

2.3 坐标点距离计算

在地图模块中,两点间距离计算是必不可少的,下面通过wgs84进行两点距离计算的示例代码:

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

3. 总结

通过npm包wgs84实现了GPS坐标系和百度坐标系转换,并通过示例代码演示了这个过程。在实际应用中,wgs84融合了国测局的坐标系处理算法,可以用来计算距离、坐标转换等功能。对于经纬度处理,wgs84包是非常方便实用的工具。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/77377


猜你喜欢

  • npm 包 i18n-extractor 使用教程

    简介 i18n-extractor 是一个用于提取 JavaScript 代码中的国际化文本的 npm 包。它可以自动扫描代码,并将代码中用到的文本提取出来生成一个翻译文件,方便后续的多语言翻译工作。

    5 年前
  • npm 包 iconizr 使用教程

    iconizr 是一个 npm 包,它可以帮助你将多个图标文件转换为一个 SVG 文件,以便在网页上使用。使用 iconizr 可以大大减小网页的请求次数,从而提高网页加载速度。

    5 年前
  • npm 包 igneous 使用教程

    前言:Igneous 是一个基于 Node.js 的轻量级前端构建工具。它提供了模块化的开发方式,并支持多种前端框架。本文将会详细介绍 igneous 的使用方法,并提供示例代码以供参考。

    5 年前
  • npm 包 objectid 使用教程

    简介 npm 包 objectid 是一个生成 MongoDB ObjectId 的 JavaScript 库。 ObjectId 是 MongoDB 中文档的唯一标识符,由 12 个字节组成,其中前...

    5 年前
  • npm 包 settings 使用教程

    一个好的前端项目需要用到很多 npm 包,而有时候,我们需要根据不同情况进行个性化的定制化配置,这时候, settings 包就派上用场了。 settings 是一个轻量级的 npm 包,用于存储和...

    5 年前
  • npm 包 hype 使用教程

    在前端开发中,我们经常需要创建一些有趣的动画或者特效来吸引用户的注意力。这些特效通常是使用 CSS 和 JavaScript 实现的。然而,手动编写这些特效是一项耗时且繁琐的任务。

    5 年前
  • npm 包 iris-cli 使用教程

    介绍 iris-cli 是一个快速创建基于 React 的前端项目的命令行工具。它提供了一些常用的功能,如路由生成、组件生成、样式生成、测试等,可以极大地提高项目开发效率。

    5 年前
  • npm 包 findme 使用教程

    前端工程师一般都会使用 npm 包管理工具来安装和管理前端项目中所需的库文件。在使用过程中,找不到合适的包也是很常见的问题。这时,我们可以通过使用一个叫做 findme 的 npm 包来快速找到符合我...

    5 年前
  • npm 包 headerblock 使用教程

    什么是 headerblock? headerblock 是一个基于 Node.js 环境的 npm 包,可以帮助我们在生成 Markdown 文档时更方便地添加标题块(headerblock)。

    5 年前
  • npm 包 squirrel 使用教程

    前言 在前端开发过程中,我们经常需要调试 JavaScript 代码或者对代码进行性能优化。在这些过程中,我们可能会需要输出日志信息,比如函数执行时间,函数返回值等等。

    5 年前
  • npm 包 scaffolder 使用教程

    前言 在前端开发中,我们经常需要创建新的项目或者在已有的项目中新增模块,这个过程往往需要我们手动创建文件夹、编写模版代码等操作,费用很多时间和精力。 因此,为了方便快捷的完成这些工作,我们可以使用 S...

    5 年前
  • npm 包 testcli 使用教程

    简介 testcli 是一个 npm 包,它提供了创建 Node.js 项目的脚手架,它可以为您创建基本的项目结构,并且提供示例代码以及开发工具链,适用于快速构建 Node.js 项目。

    5 年前
  • npm 包 resolveme 使用教程

    前言 在前端开发中,我们经常需要解决各种问题,其中,一个最常见的问题就是依赖包的引入问题。npm 包 resolveme 可以帮助我们解决这个问题。本篇文章将详细介绍如何使用 npm 包 resolv...

    5 年前
  • npm 包 interleave 使用教程

    interleave 是一个实用的 npm 包,它可以帮助你将两个数组交错合并成一个新数组。该库可以广泛应用于前端开发中,例如 在一个自定义滚动条组件中,需要将一个滚动条的滑块、滚动条轨道和滚动条滑块...

    5 年前
  • npm包inliner2使用教程

    在前端开发过程中,经常会遇到需要做资源内联的情况,这时候我们可以借助npm包 inliner2 来解决这个问题。本文将会为大家详细介绍 inliner2 的使用教程以及注意事项,希望能够帮助到大家。

    5 年前
  • npm 包 inliner 使用教程

    在前端开发过程中,我们常常需要将一些外部资源(如样式、脚本、图片等)嵌入到 HTML 文件中,以减少 HTTP 请求的数量,从而加快页面的加载速度。在实现这一过程中,npm 包 inliner 是一种...

    5 年前
  • npm 包 inline-source 使用教程

    在前端开发中,我们常常会遇到需要在 HTML 页面中嵌入一些 JavaScript 和 CSS 的情况。不过,如果我们直接在 HTML 文件中引用外部文件,会使得页面加载速度变慢,因此我们通常需要将这...

    5 年前
  • npm 包 proteus 使用教程

    什么是 proteus? proteus 是一个轻巧且高效的 JavaScript 库,它能够将 JavaScript 对象转换为不同的格式,比如 Markdown,JSON 和 XML。

    5 年前
  • npm 包 `sake` 使用教程

    npm 是一个 JavaScript 的软件包管理工具,它使得开发人员可以轻松地共享和重用代码。sake 是一个基于 npm 的命令行工具,它可以帮助前端开发人员更快地进行日常编码中的任务。

    5 年前
  • npm 包 infuse 使用教程

    什么是 infuse? infuse 是一款用于 JavaScript 应用程序中处理异步或并行任务的工具。 它提供了类似于 Promise 的 API,但具有更高级别的功能,例如任务池、任务数量限制...

    5 年前

相关推荐

    暂无文章