npm 包 osrm-text-instructions 使用教程

在前端开发中,我们经常需要使用一些关于地图和路线规划的信息,例如在网页中展示如何到达某个地方或计算两个地点之间的距离。npm 包 osrm-text-instructions 提供了一种方便的方法,使我们能够轻松地将路线规划信息转换为自然语言描述。

什么是 osrm-text-instructions?

osrm-text-instructions 是一个 JavaScript 库,用于将从开源路线规划器 OSRM 返回的路线规划指令转换为自然语言。该库提供了一个简单的接口,使开发者可以使用 JavaScript 将路线规划指令转换为文本形式,方便在页面上显示。

安装和使用

安装 osrm-text-instructions 简单。在项目的根目录下执行以下命令即可:

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

安装成功后,我们就可以在项目中使用该库了。下面是一个使用示例:

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

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

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

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

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

在上面的代码中,我们首先引用了 osrm-text-instructions 的库文件,接着创建了一个路线规划指令的数组,并将其传递给了 osrmTextInstructions 的 compile 方法,该方法返回的就是一个自然语言描述的字符串,它表示了输入的路线规划指令。

在控制台上运行代码,我们会得到如下输出:

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

参数说明

compile 方法的参数包含以下两个:

  • directions:表示路线规划指令的数组,由 OSRM 返回;
  • language:指示返回字符串的语言。

directions

directions 参数是一个包含路线规划指令的数组,每个元素包含以下几个属性:

  • distance:表示路线规划指令的距离(单位为米);
  • duration:表示路线规划指令的时长(单位为秒);
  • type:表示路线规划指令的类型,包括:Continue、Turn、Roundabout、Notification、Depart、Arrive;
  • modifier:表示路线规划指令的状态修饰符,例如 left、right、straight;
  • text:表示路线规划指令的文本描述;
  • pronunciation:表示路线规划指令的发音。

language

language 参数指定所需字符串的语言,可以是任何 ISO 639-1 语言代码,默认为英语(en)。

路线规划指令类型

osrm-text-instructions 支持多种路线规划指令类型,包括:

  • Continue:继续前行,没有变道或转向;
  • Turn:转弯,进入一个新的道路;
  • Roundabout:在环形交叉口中,按照指示进入或离开环路;
  • Notification:在交汇处,通知用户过马路或进入新的道路;
  • Depart:从起点开始行驶;
  • Arrive:到达终点。

总结

通过使用 osrm-text-instructions,我们可以轻松地将来自 OSRM 的路线规划指令转换为自然语言描述,方便我们在前端页面中展示给用户。希望这个简单的教程能够帮助你快速上手使用 osrm-text-instructions,为你的项目带来更好的用户体验。

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


猜你喜欢

  • npm 包 yoga-layout-prebuilt 使用教程

    什么是 yoga-layout-prebuilt yoga-layout-prebuilt 是一个基于 Flexbox 布局算法的 JavaScript 库。它的主要作用是帮助前端工程师实现复杂的布局...

    4 年前
  • npm 包 videojs-contrib-media-sources 使用教程

    在前端开发中,视频播放是一个非常常见的功能。而要实现高质量的视频播放,需要使用一系列技术和工具。其中,videojs-contrib-media-sources 是一个功能强大、易于使用的 npm 包...

    4 年前
  • npm 包 algolia-frontend-components 使用教程

    Algolia 是一家提供搜索 API 和工具的公司,他们为前端开发人员提供了一些开箱即用的搜索 UI 组件,而 algolia-frontend-components 就是其中之一。

    4 年前
  • npm 包 metalsmith-livereload 使用教程

    Metalsmith 是一款静态网站生成器,其使用简单,但是需要手动刷新浏览器才能查看修改后的效果。为了避免手动刷新带来的不便,我们可以使用 metalsmith-livereload 这个 npm ...

    4 年前
  • npm 包 metalsmith-changed 使用教程

    什么是 metalsmith-changed? metalsmith-changed 是一个基于 metalsmith 的 npm 包,用于增量构建网站。当我们在本地开发过程中,经常会修改一些文件,而...

    4 年前
  • npm 包 metalsmith-discover-partials 使用教程

    前言 Metalsmith 是一个简单的文件处理器,它可以将一些目录中的文件编译成静态网站。在构建网站的过程中,经常需要使用到模板引擎来生成 HTML 文件,而在模板引擎中,局部模板是一个非常常用的概...

    4 年前
  • npm 包 metalsmith-headings 使用教程

    在前端开发中,常常需要对文档进行处理,比如生成文档目录,按目录进行分割等等。Metalsmith-headings 是一个可以帮助前端开发人员对文档进行处理的 npm 包,本文就详细介绍如何使用它进行...

    4 年前
  • npm 包 metalsmith-packagejson 使用教程

    什么是 metalsmith-packagejson metalsmith-packagejson 是一个简单易用的 npm 包,它可以帮助前端工程师快速创建符合标准的 package.json 文件...

    4 年前
  • npm 包 algoliasearch-helper 使用教程

    Algoliasearch-helper 是一个用于 Algolia 搜索服务的 npm 包,在前端 Web 开发中有着广泛的应用。它提供了一系列的工具方法,可帮助我们简化 Algolia 搜索请求的...

    4 年前
  • npm 包 Webpackify 使用教程

    什么是 Webpackify? Webpackify 是一个基于 Node.js 平台的 npm 包,它是一个可以将你的 JavaScript 代码转换为浏览器可识别的文件的工具。

    4 年前
  • npm 包 @wdio/sauce-service 使用教程

    前言 @wdio/sauce-service 是一款基于 WebdriverIO 的 npm 包,用于与 Sauce Labs 云端测试服务集成,可以帮助前端开发者轻松快速地在 Sauce Labs ...

    4 年前
  • npm 包 babel-helper-is-react-class 使用教程

    在前端开发中,我们经常使用 React 来构建界面。而在使用 React 进行开发时,我们可能会需要对代码进行转换和处理,以确保最终生成的代码能够被浏览器所理解。这就是 babel 的作用。

    4 年前
  • npm 包 babel-plugin-transform-react-pure-class-to-function 使用教程

    在 React 开发中,我们经常需要使用类组件来创建 React 组件。然而,最近的一些研究表明,将一些纯组件(即没有状态和生命周期方法)编写为函数式组件是一个更好的做法。

    4 年前
  • npm 包 shipjs-lib 使用教程

    导语 Ship.js 是一种自动化版本控制工具,它可以协助前端工程师简化协作、发布工作,同时提供常见的安全措施(例如,在发布版本之前进行代码审查、测试、自动化版本控制等)。

    4 年前
  • npm 包 shipjs 使用教程

    什么是 shipjs? shipjs 是一款 npm 包,用于自动化地进行软件发布。它能够自动执行版本号的变更、生成 changelog、打 tag、提取发布更新等操作。

    4 年前
  • npm 包 mdast-add-list-metadata 使用教程

    前言 在前端开发中,我们经常需要对文本进行一些处理,其中对于 Markdown 文档的操作比较常见。在 Markdown 中,有一种列表的语法,可以用于展示一些有序或无序的信息。

    4 年前
  • npm 包 gulp-combine-media-queries 使用教程

    简介 随着 Web 页面的逐渐复杂化,CSS 代码的规模也越来越庞大。为了确保速度和可维护性,我们需要通过一些方式优化 CSS 代码的性能。 gulp-combine-media-queries 是一...

    4 年前
  • npm 包 remark-breaks 使用教程

    在前端开发过程中,我们经常需要处理文本的换行符。然而,在 Markdown 中,要产生一个真正的换行符却并不容易。这时,npm 包 remark-breaks 就可以派上用场了。

    4 年前
  • npm 包 remark-shortcodes 使用教程

    简介 remark-shortcodes 是一个方便的 npm 包,用于在 Markdown 文本中引入自定义的 HTML 标签。类似于 WordPress 中的短代码,用户可以通过简洁的方式快速插入...

    4 年前
  • npm包babel-plugin-transform-remove-import 使用教程

    简介 babel-plugin-transform-remove-import 是一个可以将指定的import语句从代码中删除的 babel 插件。 该插件在前端开发中常常用于优化我们的代码。

    4 年前

相关推荐

    暂无文章