使用 Virtual Earth ASP.NET 控件进行数据可视化

• 下载示例代码 - 17.3 KB

引言

本文基本上是对 Virtual Earth 新的 ASP.NET 控件的介绍。在这里，我将解释如何搭建一个基本的网站，并在其中放置一个 Virtual Earth 地图，然后向您展示一些可用的基本可视化方法。Virtual Earth 是一个非常强大的地图工具包，有很多方面我将不会涵盖。

本文基于 Windows Live Tools 2008 年 11 月的 CTP 版本。

本文部分代码的预构建示例也可下载：Virtual Earth 示例 (17.3 KB)。

开始

首先，您需要为您的项目添加对 Virtual Earth 控件的程序集引用。

在您想使用 Virtual Earth 控件的每个页面中，您都必须在文件顶部添加这样一行：

<%@ Register Assembly="Microsoft.Live.ServerControls.VE"
    Namespace="Microsoft.Live.ServerControls.VE"
    TagPrefix="ve" %>

这将注册程序集，允许您使用该控件。

当您查看 ASPX 页面时，您会发现在工具箱中增加了与 Virtual Earth 相关的工具。在本帖中，我们将要研究的是 Map 控件。

从工具箱中，您可以将 Map 控件拖到设计器表面。它生成的代码将设置一个默认的初始位置和缩放级别，该级别以美国大陆为中心。

默认情况下，该控件是一个 400x400 像素的正方形，并被命名为 Map1。

<ve:Map ID="Map1" runat="server" Height="400px" Width="400px" 
    ZoomLevel="4" />

首先，我们将把默认设置更改为更接近我家乡（至少是我的家乡）的地方，并将其中心定位在苏格兰中部和南部，并稍微放大一些。我也不喜欢 Map1 这个名字，所以我也将更改它。

<ve:Map ID="VEMap" runat="server" Height="600px" Width="400px" 
    ZoomLevel="8" Center-Latitude="55.75" Center-Longitude="-3.5" />

首先我应该评论的是缩放级别，因为它对任何人都没有什么意义。我个人希望能够说“这是我想要查看区域的边界框，您自己想办法并帮我处理纵横比”。话又说回来，也许是因为我在大学的毕业设计中编写了一个 GIS 系统时，我就是这样做的。我没有限制用户使用特定且人为设定的缩放级别。其背后的数学原理并不复杂，现代显卡可以轻而易举地完成。尽管如此，我能理解为什么这样做。这意味着地图不是实时生成的，一切都基于检索到的预先存在的图形文件。这也就意味着服务器不必费力渲染地图。

缩放级别从 1 到 19。1 是缩放到整个世界，19 是缩放到街道级别。在此之间，似乎主要靠反复试验。

就目前而言，程序将在页面上显示地图，您可以像使用 Live Maps 一样进行缩放、平移、更改显示模式等操作。

这都很好。但是，如果您希望地图能够响应服务器端事件，您仍然需要做一些额外的工作才能正确地连接所有内容。Virtual Earth 服务器端事件是作为 AJAX 回发而不是页面回发来处理的。地图控件有自己的内部 UpdatePanel，您通常需要它来指示页面的一部分是“AJAX 化”的，可以说。因此，为了确保代码如我们所料那样工作，我们需要在 ASPX 文件中添加一些东西。

我们需要一个 ScriptManager。

<asp:ScriptManager ID="ScriptManager1" runat="server" 
     EnablePartialRendering="true">
</asp:ScriptManager>

在地图上显示点

在 Virtual Earth 的术语中，显示点是通过“图钉”（Pushpins）来完成的。图钉是我们可以在地图上放置的一种形状。

在代码隐藏中，我们有一个添加形状到地图的方法 (AddShape)，这是一个多步过程。首先，我们需要创建一个对象来表示点，然后创建一个对象来表示形状（稍后我们会讨论其他形状类型，但目前我们只处理图钉）。最后，我们将形状添加到地图上。

Page_Load 方法向地图添加了许多形状，这些图钉代表了 Scottish Developers 举办用户组会议的地点。代码如下：

protected void Page_Load(object sender, EventArgs e)
{
    // Glasgow Caledonian University
    AddShape(55.8662120997906, -4.25060659646988);

    // Dundee University
    AddShape(56.4572643488646, -2.97848381102085);

    // Microsoft Edinburgh (George Street)
    AddShape(55.9525336325169, -3.20506207644939);
    
    // Microsoft Edinburgh (Waterloo Place)
    AddShape(55.9535374492407, -3.18680360913277);
}
 
private void AddShape(double latitude, double longitude)
{
    LatLongWithAltitude point = new LatLongWithAltitude(latitude, 
        longitude);
    Shape shape = new Shape(ShapeType.Pushpin, point);
    VEMap.AddShape(shape);
}

通过这段代码，当应用程序运行时，我们会得到一个相当标准的输出。

目前，这都是视觉上的。并没有什么实际的功能。我们将添加一些非常基本的功能，这样当您将鼠标悬停在图钉上时，它会告诉您有关该图钉的一些信息。Shape 对象有一个 Description 属性，您可以在其中放入 HTML 片段。因此，这是更新后的代码：

protected void Page_Load(object sender, EventArgs e)
{
    // Glasgow Caledonian University
    AddShape(55.8662120997906, -4.25060659646988, 
        "<b>Glasgow Caledonian University</b>");

    // Dundee University
    AddShape(56.4572643488646, -2.97848381102085,
        "<b>Dundee University</b>");

    // Microsoft Edinburgh (George Street)
    AddShape(55.9525336325169, -3.20506207644939,
        "<b>Microsoft Edinburgh</b> (George Street)");
    
    // Microsoft Edinburgh (Waterloo Place)
    AddShape(55.9535374492407, -3.18680360913277,
        "<b>Microsoft Edinburgh</b> (Waterloo Place)");
}
 
private void AddShape(double latitude, double longitude, 
                      string description)
{
    LatLongWithAltitude point = new LatLongWithAltitude(latitude, 
        longitude);
    Shape shape = new Shape(ShapeType.Pushpin, point);
    shape.Description = description;
    VEMap.AddShape(shape);
}

当您将鼠标悬停在图钉上时，结果看起来像这样：

如果您想要默认的图钉外观，这一切都很棒。但是，您可能想自定义图钉，以便它们更符合您的要求。Shape 类有一个 CustomIcon 属性，您可以将其设置为一个图形对象。在下面的示例中，我使用了一个简单的 PNG 文件，上面有一个红色的圆圈和一个半透明的黄色填充。

现在的代码看起来是这样的：

private void AddShape(double latitude, double longitude, 
                      string description)
{
    LatLongWithAltitude point = new LatLongWithAltitude(latitude, 
        longitude);
    Shape shape = new Shape(ShapeType.Pushpin, point);
    shape.Description = description;
    shape.CustomIcon = "images/target.png";
    VEMap.AddShape(shape);
}

结果看起来是这样的：

您也可以使用动画 GIF 文件，它们会在地图上播放动画；但是，我建议您谨慎使用，因为它们很快就会变得分散注意力。

绘制线

在本节中，我将展示如何创建一个代表地图上点的 Shape 对象。Shape 构造函数接受一个描述对象类型和点的参数。如果您想绘制线，您需要选择“Polyline”类型并提供多个点。要构造一个折线 Shape 对象，需要一个点列表，点由 LatLongWithAltitude 对象表示。

List<LatLongWithAltitude> points = new List<LatLongWithAltitude>();

一旦填充完毕，就可以创建 Shape 了。

Shape result = new Shape(ShapeType.Polyline, points);

或者，也可以通过 Points 属性稍后进行点的添加。

线和图钉

创建线（或多边形，但我们稍后会讲到）形状时需要注意的一点是，默认情况下，还会显示一个图钉以配合该线，以便为用户提供一个可以悬停以便获取更多信息的对象。

如果不需要这些图钉，则需要将 IconVisible 属性设置为 false。

shape.IconVisible = false;

另一方面，如果需要为每条线添加图钉，则可以控制图钉出现的位置。默认情况下，它们位于线的中间某处。IconAnchor 属性可以设置为图钉出现的位置。例如，要将图钉设置为出现在线的起点，请使用：

shape.IconAnchor = shape.Points[0];

如上所示，您还可以对图钉进行其他自定义。

自定义线

线也有很多自定义方式。您可以在 Shape 对象上更改线的颜色和宽度。

上面示例中的数据是苏格兰的铁路服务，包括路线、起点和终点站、路线长度以及火车特许经营商等信息。

在该示例中，线的可视化依赖于两个属性。火车特许经营商体现在线的颜色上，而路线长度则体现在线的宽度上。较短的郊区路线是细线，而城际路线则更粗。

LineWidth 属性接受线的像素宽度，而 LineColor 属性接受一个 Color 对象（特别是来自 Microsoft.Live.ServerControls.VE 命名空间）。Color 对象允许您指定标准的红、绿、蓝值（每种 0-255）以及一个 alpha 混合值（介于 0 到 1.0 之间的双精度数）。

线泛化

到目前为止，这都很简单；但是，地图上显示的内容不一定与您放入 Shape 对象的内容一致。Virtual Earth 会泛化您创建的形状，据推测是为了提高性能。我怀疑其想法是以用户不会注意到的方式进行泛化；然而，在某些情况下，线条没有显示其原始点是非常明显的。

看看这两张地图。它们都显示了完全相同的数据。一张是另一张的放大版本（我放大了缩小版本，以便它们大小相同，便于比较）。

左边的地图显示了自然放大的版本。右边的地图显示了缩小的版本（然后我将其调整回与左边地图相同的大小，以便在本文中进行比较）。

由于苏格兰中部非常繁忙，有很多铁路线，请看看高地（苏格兰北部）的路线，以便更轻松地看到这种现象。以最北端的路线为例。左边的地图清晰地显示了它蜿蜒穿过山脉，而右边的地图显示路线稍微笔直一些。此外，右边的地图似乎甚至没有经过一些点。

绘制多边形

最后，最后一个 Shape 类型是多边形。与折线一样，它默认也会显示图钉。并且，与折线一样，您可以设置适用于多边形周界的线宽和颜色。

由于苏格兰的多边形数据集非常昂贵，我只创建了简单的矩形作为此示例中的多边形。这些数据代表了 Scottish Developers 用户组活动参与者的位置。

实际上只有一个额外的属性可用。那就是 FillColor。它也像 LineColor 属性一样接受一个 Color 对象。

shape.FillColor = new Color(red, green, blue, alpha);

基本上就是这样了。关于多边形，没有太多可以说的了。

摘要

Virtual Earth 是一个功能强大的基于 Web 的地图工具，在本文中，我只关注了它的一方面，即使用 Shape 对象进行数据可视化。

历史

• 1.0 初始版本 (2008 年 12 月 6 日)。