返回博客首页
← 所有文章

在您的 NativeScript 应用程序中添加平面图，使用 OfficeRnD API

2015年5月8日 — 作者 Valio Stoychev

这是一篇由来自我们伦敦合作伙伴 OfficeRnD (@officernd) 的 Miroslav Nedyalkov (@miro_nedyalkov) 撰写的客座博文。

数据可视化是每个现代移动应用程序的关键组成部分。平面图也不例外。使用良好的平面图平台，您可以轻松地让您的应用程序脱颖而出。例如，您可以

  • 使用平面图进行室内导航。
  • 让您的用户找到会议室或会客室。
  • 显示房间可用性和更多功能。

OfficeRnD 是一家提供 Web 和移动平面图 API 的软件公司。OfficeRnD 和 Telerik 团队合作，为官方 TelerikNEXT 会议应用程序提供平面图。该应用程序构建在 NativeScript 之上。您可以在此处查看它 - https://github.com/NativeScript/sample-TelerikNEXT。

我将引导您完成一个稍微简单的示例，说明如何在您的应用程序中嵌入平面图。您可以在 https://github.com/officernd/NativeScript-floor 查看整个项目。

创建您的平面图

让我们从使用 OfficeRnD 创建的现有平面图开始 - https://www.officernd.com/rooms/55468128ebfbd6b660588733。您可以免费创建自己的平面图 - 只需访问 https://www.officernd.com/ 并开始即可。

创建您的 NativeScript 应用程序

首先，您需要确保已安装 tns 命令行工具（此处有说明 https://github.com/NativeScript/nativescript-cli）。

要检查您是否已安装它，只需在控制台中键入：

tns --version
 

 

安装完成后，您应该准备样板项目

tns create NS-floorplans
 
tns platform add ios
 
tns platform add android

我们只需要一个带有标题和图像占位符的空白视图。最好向用户显示平面图正在加载的指示，因此我们还将添加一个 ActivityIndicator。您的 main-page.xml 应如下所示

<Page xmlns="http://www.nativescript.org/tns.xsd" loaded="pageLoaded">
 
 <GridLayout rows="auto, *">
 
   <StackLayout row="0">
 
     <Label text="{{ title }}" cssClass="title" />
 
   </StackLayout>
 
   <GridLayout row="1" cssClass="content">
 
     <Image imageSource="{{ image }}" stretch="aspectFit" horizontalAlignment="left" verticalAlignment="top" />
 
     <ActivityIndicator busy="{{ isLoading }}" horizontalAlignment="center" verticalAlignment="center" />
 
   </GridLayout>
 
 </GridLayout>
 
</Page>

基本上，我们需要将平面图标题和平面图图像填充到页面视图模型的 title 和 image 属性中。我们将从初始化视图模型开始。将其代码更改为：

var observable = require("data/observable");
var mainViewModel = new observable.Observable();
 
mainViewModel.set("title", "正在加载平面图");
mainViewModel.set("isLoading", true);
exports.mainViewModel = mainViewModel;

 

与 OfficeRnD 服务集成

OfficeRnD 使办公室（包括服务式和共享式）的管理人员能够管理和改善他们的空间。

我们通过交互式、多层平面图连接空间和人员。
Main Office

 

要与 OfficeRnD 集成，您需要知道平面图的 ID 以及您需要可视化的详细信息（图层） - 基本平面图、家具、可用性、区域图例等。我在这里不会详细介绍。如果您需要有关 API 的更多信息，请通过 [email protected] 联系我 - 我很乐意帮助您入门。

我们将使用的端点如下所示
https://www.officernd.com/api/v1/rooms/<planId>/export-uri?<parameters>

并返回一个包含导出图像 uri 的 json
{"uri":"<exported_image_uri>"}

例如
https://www.officernd.com/api/v1/rooms/55468128ebfbd6b660588733/export-uri?theme=professional&legend=false&labels=false&width=750

返回

{"uri":"//s3.amazonaws.com/Officernd/rooms/55468128ebfbd6b660588733/theme=professional_legend=false_labels=false_width=750_/59ae.png"}

我们将使用 http 模块发出此请求

getPlanImageUri =‘https://www.officernd.com/api/v1/rooms/55468128ebfbd6b660588733/export-uri?theme=professional&legend=false&labels=false&width=750';
 
console.log("正在加载: " + getPlanImageUri);
 
http.getJSON(getPlanImageUri)
 
   .then(function (res) {
 
       console.log("结果: " + JSON.stringify(res));
 
   });

获得图像的 uri 后，我们就可以在应用程序中显示它。我们将使用 image-source 模块，更具体地说，是 fromUrl 函数，如下所示

http.getJSON(getPlanImageUri)
 
   .then(function (res) {
       var uri;
       uri = "https:" + res.uri;
       console.log("正在下载: " + uri);
       return imageSource.fromUrl(uri);
   })
 
   .then(function (image) {
       console.log("下载完成!");
       return {
           title:’演示平面图’,
           image: image
       };
   });

我们快完成了。我们只需要将所有内容放在一起。让我们将此代码放在名为 officerndApi 的单独模块中：

var http = require("http"),
 
   imageSource = require("image-source"),
   getPlanImageUri =‘https://www.officernd.com/api/v1/rooms/55468128ebfbd6b660588733/export-uri?theme=professional&legend=false&labels=false&width=750';
  
function getPlanImage() {
   console.log("正在加载: " + getPlanImageUri);
return http.getJSON(getPlanImageUri)
   .then(function (res) {
       var uri;
       uri = "https:" + res.uri;
       console.log("正在下载: " + uri);
       return imageSource.fromUrl(uri);
   })
 
   .then(function (image) {
       console.log("下载完成!");
       return {
           title: ‘演示平面图’,
           image: image
       };
   });
}
  
exports.getPlanImage = getPlanImage;

并从视图模型调用 getPlanImage

api.getPlanImage()
   .then(function (res) {
       console.log("正在显示...");
       mainViewModel.set("title", res.title);
       mainViewModel.set("image", res.image);
       mainViewModel.set("isLoading", false);
   });

 

运行应用程序

借助 tns 命令行工具，这非常简单 - 只需输入

tns emulate ios

 

或

tns emulate android

应用程序将在相应的模拟器/模拟器中启动。

 

请查看完整示例的源代码，网址为 https://github.com/officernd/NativeScript-floor。