【科技前沿】零代码构建台风监测大屏：Experience Builder赋能风云气象卫星(FY-4A)应用

标签：Web 科技前沿 FY 地图 Experience GeoScene 大屏图层台风

本教程首发于极思课堂，极思课堂（极思课堂 - GeoScene Online）是易智瑞信息技术有限公司面向公司客户、合作伙伴、GIS从业者、高校教师与学生以及热衷于GIS技术的极客们打造的一站式GIS前沿技术学习平台。欢迎大家访问、学习与关注。

课程原文链接：

极思课堂 - GeoScene Onlinehttps://www.geosceneonline.cn/learn/lesson/d1be0a29d94a461c869641ef7b256ff7

1 课程简介

在上一篇文章中，我们展示了如何利用 GeoScene Pro 软件对气象数据进行可视化处理，特别是以超强台风“山竹”为例，详细讲解了如何利用风云气象卫星云图结合台风矢量数据，进行台风登陆过程的实时模拟。

在本节课程中，我们将继续上一节课程的内容，展示如何将在 GeoScene Pro 中做好的数据上传至 GeoScene Enterprise 中，并结合风场数据，使用 Experience Builder 零代码快速搭建台风监测大屏。最后将介绍如何在 GeoScene Online 中根据已有模板创建自己的大屏应用。

2018年第22号台风 - 山竹 Mangkhut 监测大屏

2 软件及数据

2.1 软件及版本要求

A. 桌面端GIS软件：GeoScene Pro （2.1及以上版本）

B. Web端GIS软件：GeoScene Enterprise（4.1及以上版本）或 GeoScene Online（高级账户）

2.2 Q&A

Q：为什么 GeoScene Enterprise 需要4.1及以上版本？

A：本课程中使用到的部分功能，如 Map Viewer 中的 “多维” 功能以及 Experience Builder 中的 “时间轴” 微件均为 GeoScene Enterprise 4.1及以上版本所独有。若您的 GeoScene Enterprise 版本为 4.0及以下版本，则无法实现本教程所展示的最终效果。

Q：如果我没有GeoScene Enterprise （4.1及以上版本）账户怎么办？

A：若您没有 GeoScene Enterprise（4.1及以上版本），您可以注册并使用 GeoScene Online 。GeoScene Online的 Map Viewer 和 Experience Builder 模块与 GeoScene Enterprise中的相应模块完全相同。此外，教程使用的样例数据、预配置好的地图以及最终的Web App也已经同步发布在 GeoScene Online 中，点击教程中相应的链接即可访问。

Q：为什么 GeoScene Online 需要高级账户？

A：本教程中，将影像数据发布到 GeoScene Online 需要 GeoScene Online 高级账户。查看本教程中所使用的服务及Web App不需要高级账户。

2.3 数据来源

A. MERRA-2 全球再分析数据集

MERRA-2 是一套长时间序列的再分析数据集，其中包括各种气象变量，像净辐射、温度、相对湿度、风速、湍流蒸散等。同时，MERRA-2数据覆盖全球，空间分辨率为0.5 ° x 0.625 °，时间分辨率为1小时。这种气象数据在定量遥感中的应用十分广泛。

在本课程中，我们使用的是 MERRA-2 M2T1NXSLV 数据集 (又称 tavg1_2d_slv_Nx数据集) 。该数据集包括常用垂直气象数据，如 2 米（或 10 米、850 百帕、500 百帕、250 百帕）的气温、50 米（或 2 米、10 米、850 百帕、500 百帕、250 百帕）的风分量、海平面气压、地面气压和可降水水汽总量（或冰水、液态水）。数据字段的时间戳为从 00:30 UTC 开始的每小时的中心时间，例如 00:30, 01:30, ... , 23:30 UTC。

本课程中，我们下载了2018年9月9日至2018年9月20日的 MERRA-2 M2T1NXSLV 数据。

MERRA-2 M2T1NXSLV 数据集

B. 风云4号（FY-4）气象卫星

风云四号（FY-4）气象卫星是我国第二代静止气象卫星。作为新一代静止轨道定量遥感气象卫星，卫星的辐射成像通道由FY-2G星的5个增加为14个，星上辐射定标精度0.5 K、灵敏度0.2 K、可见光空间分辨率0.5km，与欧美第三代静止轨道气象卫星水平相当，其数据稳定便于获取，同时成像质量好，有利于对于气象的观测。

先进的静止轨道辐射成像仪（Advanced Geostationary Radiation Imager，AGRI）是风云四号静止气象卫星的主要载荷之一，通过精密的双扫描镜机构实现精确和灵活的二维指向，可实现分钟级的区域快速扫描；采用离轴三反主光学系统，高频次获取超过14个波段的地球云图，并利用星上黑体进行高频次红外定标，以确保观测数据的精度。

风云系列卫星的数据可以从风云卫星遥感数据服务网下载。本课程中使用FY-4A卫星AGRI成像仪全圆盘4KML1数据产品，格式为HDF。选择的时间范围为2018年9月10日-9月18日之间的数据。

FY-4A AGRI L1级数据

C. 台风路径矢量数据

台风路径数据集【1945-2022】记录了1945年至2022年期间西太平洋范围内的台风路径信息，包括台风编号、名称、登陆地点、强度、路径等多个指标。

3 台风监测大屏—结构设计

3.1 Experience Builder 是什么？

GeoScene Experience Builder 是 GeoScene Enterprise 和 GeoScene Online 提供的一款 Web 端零代码应用构建器，用户可以通过 Experience Builder 使用与 2D 和 3D 数据交互的灵活布局、内容和微件来创建独特的 Web 体验。

3.2 台风监测大屏-主屏

台风监测大屏-主屏

在本例中，我们设计的台风监测大屏—主屏主要目的为展示台风“山竹”的行进路径。

主屏以矢量数据展示为主，在二维地图中加载了台风点位（点）、台风路径（线）、台风风圈、台风24/48小时警戒线等矢量要素。用户点击台风风圈或台风点位，能够在弹窗中查看对应时刻台风的各项指标。

配合下方的时间轴微件，用户可选择特定时间点查看对应时间的台风位置和风圈，也可以按时间进行播放，动态查看台风的演进过程。

在主屏上方，我们还设置了台风信息滚动显示栏，可以滚动播放每一时刻台风的各项指标，如台风级别、风力等级、风速、气压等信息，方便用户掌握台风的各项信息。

3.3 台风监测大屏-分屏

台风监测大屏-分屏

卫星云图能够直观的展示台风当前位置与形态，而风场数据通过流渲染器的渲染后能清晰的展示风向与强度。以上两种数据与前面的台风矢量数据叠加显示，能够更为直观且炫酷的展示某一时刻台风的具体形态。

因此，我们在侧边栏下方区域中，设计了一系列以时间为标准的卡片，点击卡片中的按钮可以跳转至相应时间的地图，如在上图中为点击了 “2018年09月15日 14:00:00” 时间卡片中按钮后的显示效果。地图中展示了该时刻风场、云图叠加台风矢量数据之后的效果。

在右侧的功能按钮中，我们提供了“图层”按钮与“底图”按钮，用户可灵活控制当前地图中图层的显隐性，例如只查看当前时间的风场效果或卫星云图，或更改底图。

4 台风数据处理与服务发布

在完成了大屏的结构设计后，需要对原始数据进行处理，形成最终在大屏中显示的效果。

4.1 风场数据处理与服务发布

在《 GeoScene 全球风场数据处理与可视化：使用流渲染器可视化全球风场》课程中，我们详细讲解了如何在GeoScene Pro中对下载的MERRA-2 M2T1NXSLV 数据进行处理，发布成服务，并使用Map Viewer中的流渲染器进行可视化的全过程。

在本课程中，我们使用相同的工作流对下载的2018年9月9日至2018年9月20日的 MERRA-2 M2T1NXSLV 数据进行处理。

需要注意的是，原始数据中的时间为UTC时间，需要在开始时使用Python脚本将原始数据中的UTC时间转换为北京时间，脚本如下：

将源数据中的UTC时间转换为北京时间（UTC+8）

在对研究区进行裁剪后，发布为影像服务，并在 Map Viewer中使用流渲染器进行可视化：

台风山竹-风场示例

4.2 风云卫星时序影像制作与服务发布

在上一节课程《风云气象卫星应用：台风实时路径追踪与可视化》中，我们详细解说了如何在 GeoScene Pro 中将原始的风云卫星数据通过预处理流程以及构建多维镶嵌数据集的流程形成了可按照时间播放的卫星云图时序影像。

注意：原始影像容量较大，为改善影像服务在浏览器中的加载速度，在确定大屏中展示的具体时间后，可在构建多维镶嵌数据集的过程中，只加载对应时间点的原始影像，如在本例中，我们仅使用9月11日至16日每天下午2点的影像，共6景，这样发布后的影像服务体量较小，在Web地图中能快速加载。

接下来，需要将多维镶嵌数据集发布至 GeoScene Enterprise 中。建议首先将多维镶嵌数据集转换为云栅格格式（*.crf）文件，再发布成服务。

云栅格格式 (CRF) 支持多维栅格存储，并且是生成多维栅格的地理处理工具的默认输出栅格格式。云栅格格式文件针对在分布式处理和存储环境中读写大文件进行了优化。在云栅格格式文件中，多维栅格数据将被划分为较小的切片包，允许多个进程同时写入一个输出。并且还支持在云栅格格式文件上构建多维转置，从而提高跨维度提取数据时（例如创建时态图图表时）的性能。

在 GeoScene Pro 左侧的内容窗格中，选中 “山竹云图” 多维镶嵌数据集，并点击右键中的 “数据” - “导出栅格” 选项。

导出多维镶嵌数据集

在打开的 “导出栅格” 地理处理工具窗口中，选择输出格式为 “CRF” 并勾选 “以多维方式处理” 选项。为进一步改善发布后服务的加载速度，还可以勾选“裁剪几何”选项，输入研究区矢量面，只保留对应研究区范围内的影像。

将多维镶嵌数据集导出为云栅格格式（*.crf）同时进行裁剪

在 GeoScene Pro 右侧的目录窗格中，在文件夹中选中新生成的 “山竹_6景_裁剪.crf”文件，点击右键菜单栏中的“共享为Web图层”选项，将本地文件发布为 GeoScene Enterprise 或 GeoScene Online 上的影像服务（影像服务示例地址）。

本地文件发布为影像服务

4.3 台风矢量数据处理与服务发布

同样，参照在上一节课程《风云气象卫星应用：台风实时路径追踪与可视化》中的步骤对台风矢量数据进行处理，并将矢量数据发布为 GeoScene Enterprise 或 GeoScene Online 中的要素服务。

台风矢量数据发布

5 Web地图制作

在数据服务发布后，即可着手制作Web地图。在我们的大屏原型中，有两种类型的Web地图：

台风路径总览Web地图：图层为台风矢量数据，可通过时间滑块展示台风整体移动情况。
特定时间-台风详情Web地图：图层为台风矢量数据、风云卫星云图数据和风场数据，展示某一特定时间点台风的详细情况。

下面将分别解析两种Web Map的制作过程。

5.1 台风路径总览Web地图制作

台风路径总览Web地图包括以下几个图层：

山竹实时路径点图层：该图层需要启用时间，和时间滑块配合能显示特定时间台风“山竹”的位置，该图层支持弹窗显示详细台风信息；
山竹风圈图层：该图层需要启用时间，和时间滑块配合能显示特定时间台风“山竹”的风圈，该图层支持弹窗显示详细台风风圈信息；
山竹路径点图层：使用不同颜色表示不同级别的台风，该图层支持弹窗显示详细台风信息；
山竹路径线图层：使用不同颜色表示不同级别的台风，该图层支持弹窗显示详细台风信息；
24小时警戒线图层：显示台风24小时警戒线；
48小时警戒线图层：显示台风48小时警戒线。

其中，弹窗中显示的信息从属性字段中实时抽取。

制作信息弹窗

最终，台风路径总览Web地图效果如下所示：

台风路径总览Web地图

5.2 特定时间—台风详情Web地图制作

特定时间—台风详情Web地图包括以下几个图层：

山竹实时路径点图层：展示特定时间点的台风点位，该图层支持弹窗显示详细台风信息；
山竹风圈图层：展示特定时间点的台风风圈，该图层支持弹窗显示详细台风风圈信息；
山竹路径点图层：使用不同颜色表示不同级别的台风，该图层支持弹窗显示详细台风信息；
山竹路径线图层：使用不同颜色表示不同级别的台风，该图层支持弹窗显示详细台风信息；
24小时警戒线图层：显示台风24小时警戒线；
48小时警戒线图层：显示台风48小时警戒线；
风场图层：展示特定时间点风场；
风云数据图层：展示特定时间点风云卫星云图。

在制作特定时间-台风详情Web地图时，我们用到了 Map Viewer 推出的新功能—“多维切片” ，这允许用户在 Map Viewer 中展示和分析多维数据。多维切片使得用户能够根据多个维度（如时间、空间和其他属性）来查看和理解数据，提供了更丰富的数据展示和分析能力。这一特性特别适合于需要在地图上展示和分析复杂数据集的场景，如环境监测、城市规划等。

在本例中，我们可以使用多维切片功能，在Map Viewer中对上传的风场和风云卫星云图多维数据进行切片，只展示某一个时间点的栅格数据。

在下图中展示了制作2018年9月11日下午两点的台风详情Web地图时，使用多维切片功能在Map Viewer中显示与给定时间最接近的风场影像和风云卫星云图。

对多维影像图层进行切片

同时我们使用过滤器对矢量图层（山竹实时路径图层和山竹风圈图层）进行过滤，配合显示当前时间点的台风点位和台风风圈。

对矢量图层进行过滤

最终， 2018年9月11日下午两点的台风详情Web地图效果如下所示：

2018年9月11日下午两点的台风详情Web地图

参照上面的步骤完成所有时间点的Web地图：

6 在 Experience Builder 中进行大屏搭建

在Web地图制作完成后，我们可以在 Experience Builder 中进行大屏搭建。

6.1 大屏主体搭建

在GeoScene Portal中的“个人中心”页面，点击“创建应用程序”按钮，选择“Experience Builder”。

使用Experience Builder创建一个新的Web体验

在模板列表页面选择“默认”标签栏中的第一个“空白全屏”模板。

选择“空白全屏”模板

创建一个空的空白全屏页面

接下来使用“固定面板”微件创建标题栏，并在标题栏中使用“影像”微件放置组织logo，使用“文本微件”创建大屏标题。

创建大屏标题栏

接下来，在标题栏下方插入一个“侧边栏”微件，并将侧边栏微件铺满大屏除标题栏外的所有空白处。然后我们需要在侧边栏的左侧窗口中建立视图导航栏，首先在上方创建一个台风总览卡片，卡片中含有地图缩略图，地图信息提示文字，按钮等要素。在下方为台风移动轨迹展示卡片区，我们首先插入一个“列”微件，然后在向“列”微件中插入不同时间的台风卡片，一共六个，卡片元素和上面总览卡片相似。使用“列”微件的好处是会将插入的多个台风卡片整齐排列，且自动生成滑动条，用户可通过滑动条查看所有的卡片，体验较好。

创建侧边栏微件

接下来，我们需要对侧边栏右侧的显示区域进行填充。在这里，因为我们在左侧的导航栏中设置了7个卡片，每个卡片对应一个地图。我们的逻辑是点击每个卡片中的“查看详情”按钮后，侧边栏右侧的区域即显示相对应的地图。

针对这种情况，我们可以使用Experience Builder中的“部分”微件，在“部分”微件中可以创建多个视图，在每个视图中可以分别创建不同的地图，然后再通过按钮实现不同视图之间的切换。

所以我们在侧边栏的右侧区域中插入一个“部分”微件，铺满整个区域，首先创建第一个视图，命名为“总览”，该视图对应侧边栏左侧的“总览”卡片。接下来在视图中插入一个“地图”微件，并铺满整个区域，这个“地图”微件稍后将用来加载上一章节中我们制作的“台风路径总览Web地图”。然后将“总览”视图复制六份，分别对应导航栏左侧中的六个不同时间卡片。

配置侧边栏右侧显示区

6.2 大屏主界面配置

接下来，我们配置台风大屏的主屏，首先设置侧边栏右侧视图中的“地图”微件，将“地图”微件展示的地图选为“台风路径总览Web地图”。

设置总览视图中的地图微件

接下来设置侧边栏左侧导航栏中的总览卡片，需要设置卡片中的缩略图，以及将按钮设置为切换到视图中的“总览”视图。

设置总览卡片中图案和按钮

接下来在地图下方插入一个“时间轴”微件，时间轴微件允许用户通过拖动时间轴来查看地图中开启了时间的要素。在本案例中，结合时间轴能够查看地图中不同时刻台风的位置以及风圈。

向地图中添加时间轴微件

最后，我们在地图上方插入“文本列表”微件，文本列表微件能够以滚动的方式显示台风的各项信息，如风向、风速等，可以起到很好的展示效果。

插入文本列表微件

6.3 大屏分屏配置

接下来以类似的方式配置大屏的各个时间分屏。

以2018年9月11日的分屏为例，首先设置地图微件，然后设置侧边栏左侧导航栏中的缩略图和按钮行为。

设置9月11日的分屏中的地图

设置9月11日的分屏中的按钮行为

7 台风监测大屏效果展示

经过配置后的 2018年第22号台风 - 山竹 Mangkhut 监测大屏效果如下：

2018年第22号台风 - 山竹 Mangkhut 监测大屏

8 台风监测大屏模板应用

如果您拥有 GeoScene Online 的账号，可以直接使用我们上传至 GeoScene Online 中易智瑞-台风监测大屏模板。具体有以下两种方式：

8.1 在项目详情页中根据模板创建Web体验

访问易智瑞-台风监测大屏模板项目详情页，点击右侧的 “创建 Web 体验” 按钮，即可依据模板在当前账户生成一个完全相同的台风监测大屏，用户替换成自己的数据后即可发布分享。

易智瑞-台风监测大屏项目详情页

替换数据后发布使用

8.2 在 Experience Builder 中根据模板创建Web体验

用户在 Experience Builder 中新建一个Web体验时，在选择模板以开始页面中，选择 “我的组织”标签页，即可看到 GeoScene Online 中成员目前共享的所有模板，选择相应模板并点击 “创建” 按钮开始创建新的Web体验。

查看 GeoScene Online中共享的所有模板并点击创建进行应用

9 课程回顾及小结

风云气象卫星应用系列课程目前包含上下两个课程：

上篇：《风云气象卫星应用：台风实时路径追踪与可视化》
下篇：《风云气象卫星应用：使用 Experience Builder 0代码快速搭建台风监测大屏》

在上篇课程中，我们展示了如何利 GeoScene Pro 软件对气象数据进行可视化处理，特别是以超强台风“山竹”为例，详细讲解了如何利用风云气象卫星云图结合台风矢量数据，进行台风登陆过程的实时模拟。

在下篇课程中，我们继续上篇中的工作，展示了如何将在 GeoScene Pro 中做好的数据上传至 GeoScene Enterprise 中，并结合风场数据，使用 Experience Builder 0代码快速搭建超强台风“山竹”监测大屏。并介绍了如何在 GeoScene Online 中根据已有模板创建自己的大屏应用。

标签：Web,科技前沿,FY,地图,Experience,GeoScene,大屏,图层,台风
From： https://blog.csdn.net/Goodbye_Old_Days/article/details/144742037