使用AstroCanvas预置模板搭建交通管理大屏

场景说明

交通管理大屏用于监控城市的交通状态，如进出城车辆、路况信息和交通指数等，效果如图1所示。本入门以使用AstroCanvas中预置模板构建一个交通管理大屏为例，向您介绍如何在AstroCanvas中快速构建可视化页面。

图1 交通管理大屏效果

操作流程

在AstroCanvas中开发大屏页面的流程，如图2所示。

图2 开发大屏页面流程

1. 注册账号并实名认证

   注册一个华为账号并进行实名认证，认证后需要为账号进行充值。如果您已有一个华为账号，可直接跳过如下操作，但需要确保账号有足够的金额。

2. 购买AstroCanvas实例

   在使用AstroCanvas前，您需要购买一个AstroCanvas实例。AstroCanvas实例是一个独立的资源空间，所有的操作都是在实例内进行，不同实例间的资源相互隔离。

3. 创建大屏&PC端项目

   在AstroCanvas中创建页面前，需要先创建一个项目。项目可以理解为是一种业务场景的集合，在项目中可以创建多个页面。

4. 构建可视化大屏页面

   通过AstroCanvas中预置的交通管理模板，快速创建一个可视化大屏页面。

5. 预览并发布大屏页面

   在线预览大屏页面效果，确保开发编辑效果与发布后运行效果一致。预览效果符合预期后，可直接发布大屏页面，并在线查看城市交通状况。

步骤一：注册账号并实名认证

使用AstroCanvas前，需要先注册一个华为账号并进行实名认证。如果您已有一个华为账号，可直接跳过如下操作，但需要确保账号有足够的金额。

1. 进入华为云官网，单击页面右上角的“注册”。
2. 参考注册华为账号并开通华为云中操作，完成注册。
3. 注册后参考个人账号如何完成实名认证或企业账号如何完成实名认证中操作，完成个人或企业账号实名认证。
4. 为账号进行重置。

   购买AstroCanvas实例时需要收费，请提前为您的账号进行重置，确保账号有足够的金额。

   • 关于AstroCanvas的价格说明，请参见计费说明。
   • 关于充值，请参见账户充值。

步骤二：购买AstroCanvas实例

在使用AstroCanvas前，您需要购买一个AstroCanvas实例。AstroCanvas实例是一个独立的资源空间，所有的操作都是在实例内进行，不同实例间的资源相互隔离。本入门以购买基础版实例为例，进行介绍。

1. 进入购买Astro大屏应用实例页面。
2. 实例版本选择“Astro大屏应用基础版”，按需设置购买时长，单击“立即购买”。
   图3 购买实例
   

3. 选择支付方式，单击“去在线支付”，完成订单支付。
   图4 确认付款
   

4. 订单支付成功后，单击“返回Astro轻应用控制台”。
   图5 返回控制台
   

   在Astro大屏应用控制台中，可以查看Astro大屏应用的安装状态。当“实例状态”变为“运行中”时，说明实例已安装好，可以正常使用。

   图6 Astro大屏应用控制台
   

步骤三：创建大屏&PC端项目

在AstroCanvas中创建页面前，需要先创建一个项目。项目可以理解为是一种业务场景的集合，在项目中可以创建多个页面。

1. 在AstroCanvas服务控制台，单击“进入首页”，进入AstroCanvas界面。
2. 在“项目列表”中，单击“+ 新建项目”。
   图7 进入新建项目页面
   

3. 在新建项目页面，选择“大屏&PC端”，输入项目名称（如交通管理），单击“新建”。
   图8 新建大屏&PC端项目
   

   系统自动进入该新建项目的“大屏&PC端项目”页面，如图9。

   图9 大屏&PC端项目页面
   

步骤四：构建可视化大屏页面

AstroCanvas中预置了一些可复用的页面样例作为模板（预置模板和自定义模板），通过模板创建新的页面，可充分利用已有资源，减少重复开发，提高交付效率。本入门以交通管理模板为例，向您介绍如何快速构建大屏页面。

1. 在“大屏&PC端项目”页面，单击“新建页面”。
2. 在预置模板中，选择“交通管理”，单击“使用此模板”。
   图10 选择交通管理模板
   

3. 输入页面标题（如A市交通管理分析大屏），单击“新建”。
   图11 设置页面标题
   

   系统自动进入大屏开发页面，如图12。您可以直接使用该大屏页面，也可以根据业务需求进行二次开发。

   图12 大屏开发页面
   

4. 单击页面上方的，完成大屏页面的创建。

步骤五：预览并发布大屏页面

在AstroCanvas中开发大屏页面时，支持直接在线预览效果，确保开发编辑效果与发布后运行效果一致。预览效果符合预期后，可直接发布大屏页面，并在线查看城市交通状况。

1. 在已创建的大屏页面中，单击页面上方的，预览页面效果。

   如果预览效果不符合预期，可进行微调，直至符合预期。

2. 单击，打开“发布链接”开关，获取页面访问地址。
   图13 打开发布链接
   

   单击，可生成新的链接，原链接将不可访问。单击，可复制该链接。

3. 设置访问限制。
   

   如果是新建项目，需要为发布链接设置访问限制，即“分享码访问”或“Token认证”必须设置其中一个，否则链接在运行态无法正常访问。本入门中，以设置分享码为例进行介绍。

   图14 分享码设置
   
   • 分享码设置：设置页面分享码后，只能通过分享码来访问页面，提高安全性。
   • 设置Token认证：通过设置Token认证，可对大屏交互时传递的参数进行签名鉴权，保证大屏的URL访问链接的参数不会被篡改，从而提高大屏数据及用户信息的安全性。
   • 设置内容安全策略：大屏页面嵌入第三方系统时（例如以iframe形式嵌入），如果涉及跨域访问，请开启内容安全策略。设置内容安全策略的主要目的是减少和报告XSS攻击，缓解跨站脚本攻击。除限制可以加载内容的域，还可指明哪种协议允许使用，缓解数据包嗅探攻击。

4. 设置完成后，在浏览器中打开发布链接地址，输入分享码后，单击，即可在线查看城市交通状态。
   图15 输入分享码