闪电查看器

“闪电查看器”是一款从WebSocket 接收模拟闪电数据，并将其实时显示在地图上的应用程序。它拥有响应式用户界面，能够很好地适应移动设备、平板电脑和桌面设备的屏幕尺寸，无论横屏还是竖屏模式均可流畅显示。 雷击位置在地图上以图标形式显示，另有独立的叠加层显示最近一次雷击的距离和时间。这些数据图层可通过点击“地图图层”按钮调出的切换开关进行隐藏或显示。此外，还有一个用于切换地图类型的开关，以及一个将地图中心定位到用户当前位置的按钮。

运行示例

您可以通过以下方式运行示例：

• Qt Creator

  打开Welcome 模式，并从Examples 中选择该示例。有关更多信息，请参阅Qt Creator ：教程：构建和运行。

• Qt Extension for Visual Studio Code

  在Command Palette 中运行Qt: Open Qt examples 命令，然后从列表中选择该示例。有关更多信息，请参阅Qt Extension for Visual Studio Code ：教程：构建和运行。

应用程序结构及相关类

该应用程序遵循模型-视图-控制器（MVC）模式。LightningItemModel 类作为模型，它存储一组LightningItemData 对象，并提供用于插入新数据以及获取最新比赛信息的方法。视图由多个QML组件定义，这些组件负责显示数据和用户界面，并处理用户交互。Controller 类负责管理LightningItemModel 与QML组件之间的数据流。LightningProvider 类会建立一个WebSocket 连接，连接到在线服务器，并从该服务器接收每道模拟闪电的JSON消息。它解析这些消息，并通过连接到Controller 中槽（slot）的信号，将数据传递给LightningItemModel ：

connect(m_provider.get(), &LightningProvider::dataReady, this, &Controller::onDataReceived);

每次闪电由一个LightningItemData 结构体表示。该结构体包含闪电发生的时间戳、纬度和经度，并包含一些方法，可返回其与作为QGeoCoordinate 提供的用户位置之间的距离和方向。LastStrikeInfo 结构体则保存了关于最近一次闪电的信息。

LightningView.qml 作为应用程序的主视图。它负责通过MapView.qml 组件显示地图和闪电数据，并通过ActionsLayer.qml 组件显示用户控件。应用程序启动时，LightningSplash.qml 组件会显示在主视图之上。如果 Qt Lottie Animation 模块可用，则该启动画面将通过qt_target_qml_from_lottie() CMake 函数，显示从 Lottie 文件导入的矢量动画；否则，将显示静态图像。

MapView.qml 负责地图的缩放和平移操作。它使用PositionSource 获取用户的当前位置，并使用Map 显示地图。此外，它还包含一个LightningMapLayer.qml 用于显示闪电数据，以及一个DistanceTimeLayer.qml 用于显示最近一次闪电击中的信息。

ActionsLayer.qml 提供了一个用于重新居中地图的按钮，以及一个自定义开关控件SwitchMap.qml ，用于在不同的地图类型之间切换。它还包含一个地图图层按钮，用于显示地图图层切换开关。这些切换开关在MapLayersItem.qml 中定义。在纵向模式下，它们显示在地图图层按钮旁边；而在横向模式下，则放置在MapLayersDrawer.qml 中定义的Drawer 中。

雷击数据源

该应用程序从 Qt 维护的服务器接收模拟的雷击数据。该服务器提供了一个 WebSocket API，可通过以下 URL 接受连接：

wss://ewea0y4bn0.execute-api.eu-north-1.amazonaws.com/production/

连接到服务器后，应用程序通过向服务器发送以下 JSON 消息来触发实时数据流：

"{\"action\": \"simulatelightningdata\"}"

源文件

示例项目 @ code.qt.io