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

阅读时长 5 分钟读完

简介

ember-flexberry-gis-csw 是一个能够帮助你在 Ember.js 框架中使用 OGC 服务(如 CSW 服务)的插件。本插件基于 ember-flexberry-gis 库,并且它使用OGC CSW Standard来请求和获取地理信息数据。因此,使用本插件可以让您在 Ember.js 应用程序中轻松地管理地理信息,无论您是在构建 WEB GIS 还是在进行其他 Web 应用程序开发。

在本篇文章中,我们将深入介绍这个 npm 包的工作原理,并给出一些使用实例来指导你如何继承这个组件。

安装

安装本插件非常简单。首先,您需要初始化您的 Ember 应用程序,然后使用以下命令安装本插件:

当您成功安装完后,您可以在它的目录中找到一些关于如何使用该插件的示例文件。

如何使用

在您的应用程序中使用插件

使用插件非常简单,您只需要在需要使用该插件的页面中引入 ember-flexberry-gis-csw 组件即可。它可以通过以下代码展示:

如果需要更进一步的配置,您可以根据您的需要添加下列参数:

组件参数解析

在上面的代码段中,您可以看到我们有以下几个参数:

  • url:指向您服务器上 CSW 目录服务终端的 url

  • language:如果您想检索元数据,您可以设置检索语言,默认值是 "en"

  • bbox:如果您想指定一个范围来请求数据,那么您可以设置范围数据的字符串。bbox 参数的格式如下:xxxx,yyyy,XXXX,YYYY,其中 x 值代表经度,y 值代表纬度。

  • recordTypes:如果存在特定的元数据类型,您可以在这里定义一个字符串数组。您需要告诉 CSW 服务记录的类型用来过滤检索的结果。例如,["csw:Record"] 参数表示您只希望结果列表中包含 CSW 记录。

  • maxRecords:您可以使用此参数指定查询应该返回的最大记录数。默认值是 20。

实例

下面是一个公共经纬度范围的查询实例:

在上面的实例中,我们未指定 recordTypes 参数,因此 CSW 返回给我们所有的记录类型,而且我们没有指定 maxRecords,默认情况下我们的结果集不应该超过20个。

【注意】:这个实例请求一个列表来表示该地区中可用的地理数据,但它并不能返回实际的数据,在下面的实例中我们将使用查询到的 URL 来加载实际的地理数据。

下面是一个自定义的记录类型和最大记录查询实例:

在上述代码中,我们请求服务器获得来自自定义的记录类型和最多 50 条记录,这些信息支持我们增加更多的过滤条件来针对特定的用例查询到更多的信息。

现在我们假设您通过上述请求获得了一些可用的元数据并希望加载其中一个 Layer 图层。下面的代码展示了如何加载该图层的实例:

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

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

在本示例中,我们将 CSW 记录对象转换为 Ember 对象。然后我们可以通过获取该对象二级属性的名称和值和 CSW 服务器交互,以实际加载图层。您还可以在获取到 url 后采用 AJAX 获取该地址,并将结果交给 GIS 管理工具来实现图层加载。我们建议您在实际使用之前使用代码进行微调,以满足您应用程序的特定需求。

结论

在本篇文章中,我们探讨了如何安装并使用 npm 包 ember-flexberry-gis-csw 的细节。我们还提供了一些实例代码,以便您可以更好地理解使用本插件的流程。无论您是创建 WEB GIS 还是在其他 Web 应用程序中处理地理数据,使用本插件都会变得轻松愉快。

您可以到 项目官网 获取更多的详细信息。感谢您的阅读和使用!

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005602981e8991b448de587

纠错
反馈