LightningChart .NET：使用 WPF 创建交互式天气数据可视化地图

新闻资讯

关注工具软件产品最新动态，了解软件开发行业新趋势。

原创

软件开发

来源：LightningChart

图像处理

GIS/地图

.net

WPF

数据可视化

2024-03-15

图像处理

GIS/地图

.net

WPF

数据可视化

#LightningChart #LightningChart JS #LightningChart® .NET

使用 WPF 创建交互式天气数据可视化地图

天气数据可视化介绍

当试图了解复杂的天气模式和气候趋势时，天气数据可视化非常有用。天气数据可视化帮助我们可视化特定地区的天气，例如，在本教程中，我们将为美国创建一个天气数据可视化应用程序。可以观察不同的参数并将其包含在天气数据可视化应用程序中，这些参数可能包括大气中的水蒸气和某个区域上空的气流。

此类应用的一个例子是美国政府自 1890 年以来主动记录天气和气候数据，其中记录了包括温度、降水和雪深在内的参数。此后每天都会记录这些数据，类似的应用程序使用天气数据可视化将这些记录转换为可操作且富有洞察力的 2D 和 3D 交互式天气图。

天气数据很重要。公共管理、能源工业或水管理等部门的高层管理人员依靠天气数据来做出准确的决策。在这些领域工作的开发人员可能会被分配处理天气数据以及如何处理这些数据。今天，我们将创建一个天气数据可视化应用程序，将天气数据和高级可视化组件付诸实践。

项目概况

对于这个项目，我们将使用北美领土来表示降雨参数。我们将使用 IntensityGridSeries 工具生成与所获得的值相关的强度颜色。在此天气数据可视化图表应用程序中，我们将使用 XY 型图表，并使用 MD 文件来生成地图。云将基于图像创建，该图像将转换为位图并在我们方便时进行操作。

至于雨量，则以毫米为单位。一毫米的雨水相当于每平方米100升。我们将创建一个图例框，它将负责确定颜色的强度，大约每小时毫米数。让我们开始吧！

下载. WPF 天气可视化项目zip包

本地设置

对于这个项目，我们需要考虑以下要求来编译项目。

操作系统：32 位或 64 位 Windows Vista 或更高版本、Windows Server 2008 R2 或更高版本。
DirectX：9.0c（Shader 模型 3 及更高版本）或 11.0 兼容图形适配器。
Visual Studio：2010-2019 用于开发，不需要部署。
平台 .NET Framework：已安装版本 4.0 或更高版本。

现在转到下一个 URL 并下载 LightningChart .NET。然后，您将被重定向到登录表单，您必须在其中完成简单的注册过程。完成注册过程后，您将可以访问您的 LightningChart 帐户。

登录帐户后，您将能够下载 SDK。该 SDK 将是“免费试用”版本，但您将能够使用此数字信号处理滤波器应用程序教程的许多重要功能。下载 SDK 后，您将拥有一个如下所示的 .exe 文件：

安装后因此请继续安装直至完成。安装完成后，您将看到以下程序：

License Manager

在此应用程序中，您将看到购买选项。您将使用此试用版 SDK 创建的所有项目都将可用于未来的开发并启用所有功能。

LightningChart .NET Interactive Examples

现在，您可以看到 100 多个可用于 WPF、WinForms 和/或 UWP 的交互式可视化。

Visual Studio 项目

现在让我们使用 Visual Studio。使用 LightningChart 可视化工具和 Visual Studio 之间的主要区别在于，我们将能够分析和试验源代码中的许多功能。在 LC 可视化工具中，选择模板图并运行示例：

在窗口的右上角区域，您将看到以下选项：

对于试用版 SDK，我们将能够使用 WPF 框架。单击要使用的框架后，我们需要指定将在其中创建项目的文件夹：

最后，将创建项目并打开 Visual Studio 并准备好执行数字信号处理滤波器应用程序。

Code Review

主要代码将包装在 MainWindow.xaml.cs 内。在这里我们将找到 UI 控件的代码。

在代码中，我们将检查两个方法，它们将创建正确绘制 WPF 天气数据可视化图表所需的属性。该交互式示例是使用各种用户控件构建的，用于操作和更改图表的视觉属性。生成此图不需要这些控件，因此我们将重点关注负责生成对象的代码。

MakeSourceData()

我们将从 InitializeComponent 方法开始。这将允许我们加载 XAML 模板并访问其中的对象。

InitializeComponent();
MakeSourceData();

加载 XAML 组件后，我们就可以开始对此天气数据可视化应用程序实例进行编程。要处理图像、操作它们并将它们加载到图表中，我们需要将它们转换为位图。在我们项目的资源文件夹中，您可以找到一张图像，它将帮助我们创建雨“云”。该图像将被转换为位图，我们将使用 GetPixelColors 工具提取图像的颜色。

System.Drawing.Bitmap bitmapDataSource = new System.Drawing.Bitmap(Environment.CurrentDirectory + @"\Resources\EnvironmentalData200x150.png");
//Use fast method for getting pixel colors 
System.Drawing.Color[,] aPixelColors = ChartTools.GetPixelColors(bitmapDataSource);
int width = aPixelColors.GetLength(0);
int iHeight = aPixelColors.GetLength(1);
//The data array has value range of 0...1
m_aEnvironmentalData = new double[width][];
for (int column = 0; column < width; column++)
{
    m_aEnvironmentalData[column] = new double[iHeight];
    for (int row = 0; row < iHeight; row++)
    {
        m_aEnvironmentalData[column][row] = (aPixelColors[column, row].R + aPixelColors[column, row].G
            + aPixelColors[column, row].B) / (3.0 * 255.0);
    }
}

该工具允许我们一次获取所有像素的颜色，而不是为图像的每个像素获取颜色。最后，我们将按列和行获取图像的所有值，这些值将存储在变量 m_aEnvironmentalData 中。

建立Chart()

CreateChart 方法将构造图表对象，该对象将显示在 XAML 框架内。我们需要创建一个 LightningChart 类型的对象。该构造函数将允许我们创建图表的实例、指定图表的类型并访问不同的属性。

_chart = new LightningChart
{
    ChartName = "Stencil map chart"
};
_BeginUpdate

BeginUpdate 函数将允许我们停止绘制图表，这将允许我们设置我们想要自定义的属性。只要更新没有关闭，图表就不会显示我们所做的更改，这将有助于图表构建的性能。

_chart.BeginUpdate();

Chart 类型

我们需要指定活动图表视图或将创建的图表类型。在本例中，我们使用 XY 视图。有几种类型的视图：

XY
3D
饼图3D
极性
史密斯

_chart.ActiveView = ActiveView.ViewXY;

现在我们将通过 markdown 文档 (MD) 文件加载地图，您可以在我们项目的 Maps 文件夹中找到该文件。提取的对象将分配给 XY 图表的 Maps 属性。

string path = Environment.CurrentDirectory + @"\Maps\" + DefaultMap + ".md";
if (path != "")
{
    _chart.ViewXY.Maps.Path = System.IO.Path.GetDirectoryName(path);
}

地理矢量数据存储在 LightningChart 地图文件中，扩展名为 .md。 LightningChart 附带一组地图文件。 X 轴用于经度，Y 轴用于纬度。地图坐标为十进制，纬度原点位于赤道，经度原点位于英国格林威治。

Map Properties

我们将从设置地图的属性开始。在 X 轴和 Y 轴范围保持相同且其他数据显示在地图上的典型情况下，将 ViewXY.Maps.Optimization 设置为 CombinedLayers。这允许将地图图层渲染到相同的缓冲区图像中，从而实现更高效的渲染。

CalcGradient工具将计算两种颜色之间的渐变颜色，第一个参数是初始颜色，第二个参数是最终颜色。第三个值是以百分比表示的渐变颜色位置。

_chart.ViewXY.Maps.Type = DefaultMap;
_chart.ViewXY.Maps.AllowUserInteraction = false;
_chart.ViewXY.Maps.Optimization = Map.RenderingOptimization.CombinedLayers;
_chart.ViewXY.Maps.LandOptions.Fill.Color = Colors.DarkBlue;
_chart.ViewXY.Maps.LandOptions.Fill.GradientColor = Colors.Black;
_chart.ViewXY.Maps.LandOptions.Fill.GradientFill = GradientFill.RadialStretched;
_chart.ViewXY.Maps.LandOptions.LineStyle.Color = Colors.Silver;
_chart.ViewXY.Maps.LakeOptions.Fill.Color = Colors.DeepSkyBlue;
_chart.ViewXY.Maps.LakeOptions.Fill.GradientColor = ChartTools.CalcGradient(Colors.DeepSkyBlue, Colors.Black, 80);

背景颜色

背景填充支持：

纯色填充。设置 GradientFill = Solid 并使用 Color 定义颜色。
渐变填充，从颜色到渐变颜色。设置渐变填充 = 线性/径向/径向拉伸/圆柱形。使用 GradientDirection 控制线性和圆柱形渐变的填充方向。
位图填充，具有不同的平铺和拉伸选项。还支持位图色调和 Alpha 来进行半透明位图填充。

_chart.ViewXY.GraphBackground.Color = Color.FromArgb(255, 0, 0, 64);
_chart.ViewXY.GraphBackground.GradientColor = Colors.Black;
_chart.ViewXY.GraphBackground.GradientFill = GradientFill.Linear;

Automatic Axis Layouts

可以禁用自动轴布局。 XAxisAutoPlacement 控制 X 轴的垂直放置方式。 YAxisAutoPlacement 控制 Y 轴的水平放置方式。

_chart.ViewXY.AxisLayout.AutoAdjustMargins = false;
_chart.ViewXY.AxisLayout.XAxisAutoPlacement = XAxisAutoPlacement.Off;
_chart.ViewXY.AxisLayout.YAxisAutoPlacement = YAxisAutoPlacement.Off;
_chart.ViewXY.AxisLayout.XAxisTitleAutoPlacement = false;
_chart.ViewXY.AxisLayout.YAxisTitleAutoPlacement = false;

Removing Margins

可以从天气数据可视化应用程序中删除边距。代码如下：

_chart.ViewXY.Margins = new Thickness(0, 0, 0, 0);

IntensityGridSeries()

Environmental Series

现在我们将开始创建图例框，它将向我们显示每毫米降雨量的强度颜色。我们需要配置强度网格系列以在地理地图上渲染环境数据。

IntensityGridSeries environmentalSeries = new IntensityGridSeries(_chart.ViewXY, _chart.ViewXY.XAxes[0], _chart.ViewXY.YAxes[0]);
environmentalSeries.Title.Text = "Rain";
environmentalSeries.FullInterpolation = checkBoxFullInterpolation.IsChecked.Value;
environmentalSeries.Optimization = IntensitySeriesOptimization.DynamicValuesData;
environmentalSeries.AllowUserInteraction = false; //Disable mouse interaction to make DynamicValuesData optimization effective. 
environmentalSeries.LegendBoxUnits = "mm/h";
environmentalSeries.LegendBoxValuesFormat = "0.0";
environmentalSeries.SetRangesXY(-125, -65, 24, 49);
environmentalSeries.Data = new IntensityPoint[m_aEnvironmentalData.GetLength(0), m_aEnvironmentalData[0].GetLength(0)];

IntensityGridSeries 类需要三个参数才能工作：

需要它的所有者或父对象
X 轴
Y 轴

在这些属性中，我们可以找到一些对流程优化的关注。

FullInterpolation：启用 FullInterpolation 属性以在填充中使用增强的插值方法。请注意，这会导致更多的 CPU 和 GPU 使用。通过使用全插值，填充质量更好，但只有在数据数组大小相当小时才能看到。
优化：使用优化：DynamicValuesData 仅更新数据数组的值字段

IntensityPoint 结构，并调用 InvalidateValuesDataOnly 方法来更新图表。这样，更新速度会快得多，因为不会重新计算系列的几何形状。这仅适用于节点的数据 X 和 Y 值保持在同一位置的应用，例如热成像解决方案。

SetRanges：同时设置X和Y范围。与单独设置 RangeMinX、RangeMaxX、RangeMinY 和 RangeMaxY 属性相比，CPU 效率非常高。

添加数据

要添加数据，我们需要将之前映射的值设置为 data 属性。将环境系列添加到图表中：

_chart.ViewXY.IntensityGridSeries.Add(environmentalSeries);

将模板区域添加到环境数据中

IntensityGridSeries、IntensityMeshSeries 和 Maps 具有 StencilArea 功能，它允许屏蔽绘制数据的区域。

配置X轴

_chart.ViewXY.XAxes[0].ScrollMode = XAxisScrollMode.None;
_chart.ViewXY.XAxes[0].SetRange(-130, -65);
_chart.ViewXY.XAxes[0].ValueType = AxisValueType.MapCoordsDegMinSecNESW;
Color color = Colors.Turquoise;
_chart.ViewXY.XAxes[0].MajorGrid.Color = Color.FromArgb(40, color.R, color.G, color.B);
_chart.ViewXY.XAxes[0].LabelsColor = Colors.White;
_chart.ViewXY.XAxes[0].MajorDivTickStyle.Alignment = Alignment.Near;
_chart.ViewXY.XAxes[0].LabelsPosition = Alignment.Near;
_chart.ViewXY.XAxes[0].MajorDivTickStyle.Color = Colors.White;
_chart.ViewXY.XAxes[0].VerticalAlign = AlignmentVertical.Top;

我们可以通过选择 X 或 Y 列表来访问和配置每个轴。在本例中，我们仅使用 X、Y 和 Z 轴，因此我们选择索引 0。

Scroll模式

在进行实时监控应用时，必须滚动X轴才能正确显示当前监控位置，通常是最新信号点的时间戳。

将新信号点设置为系列后，将最新时间戳设置为 ScrollPosition 属性。 LightningChart 具有多种滚动模式，您可以使用 ScrollMode 属性访问这些模式。

None：为 ScrollPosition 设置值时不应用滚动。在实时监控以外的其他应用程序中使用图表时，通常会选择此选项。
Stepping：当采集的数据到达X轴末端时，所有系列数据的轴向左移动一个步进间隔。每次到达 X 轴末端时都会执行此移位。 SteppingInterval 属性定义为值范围。
Scrolling：X 轴保持静止，直到达到滚动间隙，之后所有系列的 X 轴连续向左移动。如果滚动应在滚动位置到达 X 轴末端时生效，请将 ScrollingGap 设置为 0。ScrollingGap 属性定义为图形宽度的百分比。
Sweeping：扫描模式可能提供最人性化的实时监控视图。扫掠使用两个 X 轴。第一个轴已完全收集，然后出现扫过的间隙。然后第二个 X 轴扫过第一个 X 轴。两个 X 轴均显示其值标签。 SweepingGap 属性定义为图形宽度的百分比。
Triggering：X 轴位置由超过或低于触发水平的系列值确定。使用触发属性设置触发选项。可以通过启用 Triggering.TriggeringActive 属性将触发设置为活动状态。
MajorGrid：水平网格线绘制在划分刻度的垂直位置上。主网格用于大分区刻度，小网格用于小分区刻度。使用 MajorGrid 和 MinorGrid 属性来编辑外观。
MajorDivTickStyle：通过启用 AutoDivSpacing 可以自动完成主分区间距。间距的计算尽可能方便用户，具体取决于标签字体大小和 AutoDivSeparationPercent 属性。增加该值可以减少主要分区的数量。
Minor divisions：使用 MinorDivCount 属性值在主要分区之间进行计算。
Major division度样式可以通过 MajorDivTickStyle 属性进行设置。使用 MajorDivTickStyle.Alignment 属性编辑刻度和标签方向。值标签绘制在主要刻度线旁边。分别使用 MinorDivTickStyle 属性编辑小分区属性。

_chart.ViewXY.YAxes[0].SetRange(23, 53);
_chart.ViewXY.YAxes[0].ValueType = AxisValueType.MapCoordsDegNESW;
color = Colors.Turquoise;
_chart.ViewXY.YAxes[0].MajorGrid.Color = Color.FromArgb(40, color.R, color.G, color.B);
_chart.ViewXY.YAxes[0].LabelsColor = Colors.White;
_chart.ViewXY.YAxes[0].MajorDivTickStyle.Alignment = Alignment.Far;
_chart.ViewXY.YAxes[0].MajorDivTickStyle.Color = Colors.White;
_chart.ViewXY.YAxes[0].Alignment = AlignmentHorizontal.Right;

设置图例框

图例框可以自动或手动放置。自动放置允许它们与图段的左/上/右/下侧或边距对齐。

使用 Position 属性控制位置。位置选项有：上中、左上、右上、左中、右中、左下、中下、右下、手动。

Offset 属性将位置从 Position 属性确定的位置移动给定量。手动定位计算图例框左上角到视图左上角的偏移量。

_chart.ViewXY.LegendBoxes[0].Layout = LegendBoxLayout.Vertical;
_chart.ViewXY.LegendBoxes[0].Fill.Color = Colors.Transparent;
_chart.ViewXY.LegendBoxes[0].Fill.GradientFill = GradientFill.Solid;
_chart.ViewXY.LegendBoxes[0].UnitsColor = Colors.White;
_chart.ViewXY.LegendBoxes[0].ValueLabelColor = Colors.White;
_chart.ViewXY.LegendBoxes[0].SeriesTitleColor = Colors.White;
_chart.ViewXY.LegendBoxes[0].Offset = new PointIntXY(0, -100);

成品图表

为了完成天气预报分析和可视化图表的配置，我们使用 EndUpdate 方法，该方法将恢复绘图控件，并使用分配的属性更新图表。图表对象将添加到 XAML 网格中，以便向用户显示。

_chart.EndUpdate();
_chart.Loaded += _chart_Loaded;
gridChart.Children.Add(_chart);
_chartInitialized = true;

结论

我们完成了这个天气图形教程，感谢您的阅读。在本教程中，我们创建了一个先进、高性能、交互式的美国地区温度参数天气测绘系统。

正如您所看到的，这个气象地图应用程序是完全可定制的，从开发人员的角度来看，每个属性和最终用户功能都可以根据需要进行定制。

LightningChart .NET 具有不同的地理地图，可用于生成任何世界天气地图和任何其他所需的地图应用程序。如果您有兴趣开发这些天气数据可视化应用程序，我建议您继续查看我们的文章并注册 LightningChart .NET 以开始使用我们的组件开发图表应用程序。

相关产品

最新文章

相关文章