闪电浏览器

运行示例

要运行来自 Qt Creator，打开Welcome 模式，并从Examples 中选择示例。更多信息，请参阅Qt Creator: 教程：构建并运行。

概述

Lightning Viewer是一款从WebSocket 接收模拟雷击数据并实时显示在地图上的应用程序。它采用响应式用户界面，能很好地适应横向和纵向的手机、平板电脑和台式机屏幕。雷击会以图标形式显示在地图上，并有单独的叠加层显示上次雷击的距离和时间。这些数据层可以通过切换键隐藏或显示，按下地图层按钮即可进入。此外，还有一个用于切换地图类型的开关和一个将地图居中显示在用户位置的按钮。

应用程序结构

该应用程序采用模型-视图-控制器（MVC）模式。LightningItemModel 类是模型。它存储LightningItemData 对象的列表，并提供插入新数据和获取最新罢工信息的方法。视图定义在多个 QML 组件中，用于显示数据和用户界面，并处理用户交互。Controller 类管理LightningItemModel 和 QML 组件之间的数据流。LightningProvider 类打开WebSocket 与在线服务器的连接，接收每次模拟雷击的 JSON 消息。它解析信息，并通过连接到Controller 插槽的信号将数据传递到LightningItemModel ：

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

每次雷击都由LightningItemData 结构表示。它包含雷击的时间戳、纬度和经度，还包括返回雷击距离和雷击方向的方法，这些距离和方向来自作为QGeoCoordinate 提供的用户位置。LastStrikeInfo 结构包含上次雷击的相关信息。

LightningView.qml 作为应用程序的主视图。它负责通过组件 显示地图和闪电数据，并通过组件 显示用户控件。MapView.qml ActionsLayer.qml

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