npm 包 ember-flexberry-gis-yandex 使用教程

介绍

ember-flexberry-gis-yandex 是一个基于 ember.js 框架的前端库,提供了一系列使用 yandex 地图的功能,包括地图显示、图层管理、标注、搜索及路径规划等。使用该库可以快速、简单地在 web 应用中集成 yandex 地图的各种功能。

安装

在使用 ember-flexberry-gis-yandex 前需要先安装依赖的 npm 包:

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

安装完成后,在需要使用该库的 ember 应用中引入:

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

使用

下面简单介绍一下如何使用 ember-flexberry-gis-yandex 中的一些功能:

1. 地图显示

在需要显示 yandex 地图的地方添加组件:

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

然后在该组件的 js 中设置地图的一些属性(例如显示的缩放级别、初始中心点等):

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

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

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

2. 标注

在地图上添加标注:

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

3. 搜索

在地图上搜索:

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

4. 路径规划

计算两点间的最短路径:

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

示例代码

下面是一个简单的示例代码,实现在地图上显示一个标注、搜索周边的商店以及路径规划:

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

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

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

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

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

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

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

总结

ember-flexberry-gis-yandex 这个 npm 包提供了很多可以直接使用的方法、组件,使得在应用中集成 yandex 地图变得异常简单,该库设计合理,易于扩展,非常适合开发小型的 GIS 应用。

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


猜你喜欢

  • npm包 frosttheme使用教程

    前言 Frosttheme是一款基于React的前端UI组件库,它可以帮助我们快速构建出优雅美观的网站前端页面。在本篇文章中,我们将详细介绍如何使用npm包来安装Frosttheme,以及如何使用它的...

    3 年前
  • npm 包 devless-sdk 使用教程

    简介 npm 是 Node.js 的包管理器,方便前端开发者在项目中导入需要的第三方库并使用。在本篇文章中我们将介绍如何使用 npm 包 devless-sdk 提供的功能,以帮助我们更加高效地进行前...

    3 年前
  • npm 包 mikit-framework 使用教程

    介绍 mikit-framework 是一个基于 React 的前端框架,旨在提供更加完整的解决方案并减少开发的工作量。mikit-framework 提供了一些常用组件、工具以及样式,同时也支持自定...

    3 年前
  • react-native-web-canvas

    react native web canvas 介绍 在WebView上封装一层,以便使用h5的canvas api 安装 --- ------- -----------------------API...

    3 年前
  • npm包vtooltip使用教程

    在前端开发中,我们经常需要添加提示框(Tooltip)来帮助用户理解页面上某个元素的作用,而vtooltip是一个非常强大的npm包,可以帮助我们快速实现各种类型的 tooltip 效果。

    3 年前
  • npm 包 lggrr 使用教程

    引言 前端工程中,日志记录是非常重要的一环。良好的日志记录可以方便排查问题以及对系统进行调试。但是,对于 JavaScript 项目,如果只使用 console.log() 来记录日志,则无法实现日志...

    3 年前
  • npm 包 create-jqwidgets-react-app 使用教程

    什么是 create-jqwidgets-react-app create-jqwidgets-react-app 是一个可以帮助开发者快速搭建基于 jqwidgets 和 React 技术栈的应用的...

    3 年前
  • npm 包 React-in-View 使用教程

    前言 React 是当下非常流行的前端开发框架,其组件化、虚拟DOM 及强大的渲染性能拉近了前端与后端的距离,极大提升了开发效率和用户体验。但是,在实际开发中,我们经常会遇到一些问题,其中之一就是如何...

    3 年前
  • npm 包 @hawkular/hawkinit 使用教程

    简介 @hawkular/hawkinit 是一个用于帮助前端开发者快速部署 hawkular 服务的 npm 包。Hawkular 是一款开源的监测和管理软件,它可以对各种系统的指标和资源进行实时监...

    3 年前
  • npm 包 ordinal-js 使用教程

    介绍 ordinal-js 是一个在 JavaScript 中实现序数化的 npm 包。 序数化,即将数字转化为序数,如将 1 转化为 '1st',2 转化为 '2nd',以此类推。

    3 年前
  • NPM包@hawkular/hawkular-charts使用教程

    介绍 @hawkular/hawkular-charts是一个用于创建突出显示数据的图表库。它是一个基于React的可重用组件库,它提供了各种类型的图表,如条形图、折线图、面积图等。

    3 年前
  • npm 包 electron-downloader 使用教程

    简介 electron-downloader 是一个基于 Electron 的跨平台下载器。它提供了简单易用的 API 和可扩展的插件机制,可以轻松地实现文件下载功能。

    3 年前
  • npm 包 t63 使用教程

    什么是 t63? t63 是一款用于前端框架和组件测试的npm包,它由 Node.js 编写,可以在 Node.js 环境下使用。 t63 的安装与使用 安装 t63 请使用 npm 在全局安装 t6...

    3 年前
  • npm 包 @dmaksimovic/vue-countdown 使用教程

    前端开发中,我们经常需要对时间进行倒计时等操作。@dmaksimovic/vue-countdown 是一个适用于 Vue.js 的 npm 包,可以快速、简单地实现倒计时功能。

    3 年前
  • npm 包 crapp 使用教程

    引言 npm 是全球最大的 Node.js 包管理工具和社区,它赋予了前端开发的极大方便,使得从原始的静态页面到现在复杂的交互式 web 应用的开发变得更为容易。在各种复杂的前端框架和工具之中,cra...

    3 年前
  • npm 包 poetic-material-ui-color-picker 使用教程

    简介 poetic-material-ui-color-picker 是一个为 React 应用提供的颜色选择器组件,使用 Google Material Design 风格和动画,提供了多种颜色模式...

    3 年前
  • npm 包 asn1.js-rfc5280-static 使用教程

    在前端开发中,我们经常需要解析和生成 ASN.1 编码的数据。asn1.js-rfc5280-static 是一个能够解析和生成 ASN.1 编码数据的 npm 包,本文将介绍它的使用方法。

    3 年前
  • npm 包 gulp-dos2unix-js 使用教程

    简介 在前端开发过程中,我们常常需要处理文本文件的格式。比如说,有时候我们需要将 Windows 系统下编写的文本文件转换为 Unix/Linux 系统下可识别的格式。

    3 年前
  • npm 包 periodo-date-parser 使用教程

    什么是 npm 包 periodo-date-parser? periodo-date-parser 是一个非常实用的 npm 包,它可以将不同格式的时间字符串转化成 javascript Date ...

    3 年前
  • npm 包 littlefork-cli 使用教程

    简介 littlefork-cli 是一个基于 Node.js 开发的命令行工具,它提供了一些有用的功能,例如快速创建项目模板、自动化构建等。这个工具可以帮助前端开发者提高开发效率,使得开发过程更加顺...

    3 年前

相关推荐

    暂无文章