Windows 10 新特性 -- Bing Maps 3D地图开发入门(一)

本文主要内容是讲述如何创建基于 Windows Universal App 的Windows 10 3D地图应用，涉及的Windows 10新特性包括 Bing Maps 控件、Compiled data bindings (x:Bind)，SplitView 和Hamburger。

本文中的示例源代码已在github 上共享( https://github.com/gaoxuesong/navigado )。

获取Bing Maps密钥

在 Universal Windows App 中使用必应地图需要从 Bing Maps Developer Center 获取地图验证密钥，并将其添加到应用中。

创建新密钥：

  • 在浏览器中登陆 Bing Maps Developer Center ( https://www.bingmapsportal.com )，建议以您的 Microsoft 账户登陆。首次登陆选择要与必应地图帐户关联的帐户。如果你想要使用自己的 Microsoft 帐户，请单击"是"。否则，请单击"使用其他帐户登录"。
  • 创建必应地图帐户。依次输入"帐户名称"、"联系人姓名"、"公司名称"、"电子邮件地址"和"电话号码"。在接受使用条款后，单击"创建"。
  • 在"我的帐户"菜单下，单击"创建或查看密钥"。
  • 单击用于创建"新密钥"的链接。
  • 创建新密钥。完成"创建密钥"表格，然后单击"创建"。
    • 应用程序名称：此信息仅供你作参考之用，以将其与其他密钥区分开来。
    • 应用程序 URL（可选）：此信息仅供你作参考之用。
    • 密钥类型：选择Basic 或者 Enterprise。
    • 应用程序类型：选择Universal App以便在你的 Universal Windows App 中使用。

将创建的密钥复制到安全位置，在下面的步骤中我们会将其加入到Universal Windows App 中。

创建基于 Universal Windows App的地图应用

在Visual Studio 2015中创建新工程

打开 Visual Studio 2015（目前最新版为 Visual Studio 2015 RC），选择File > New Project。

展开Installed > Templates ，选择 Windows Universal > Blank App ( Windows Universal)，如下图所示。

设定工程的名称即在 Name 中输入应用的名称，本例为"navigado"。Navigado是世界语导航的意思。

设定工程保存的目录，即在 Location 中设定工程保存的目录。

点击 OK 即创建新的Windows 10 Universal App。

添加地图控件和绑定密钥

在 XAML 页面或代码中，MapControl 需要 Windows.UI.Xaml.Controls.Maps 命名空间的命名空间声明。

本例中是手动将 MapControl 添加到 MainPage.XAML 页面，并在该页面顶部手动添加命名空间声明：

xmlns:Maps="using:Windows.UI.Xaml.Controls.Maps"

若要在你的 Universal Windows App 中使用 MapControl 和地图服务 (Windows.Services.Maps)，则需要地图验证密钥。将该密钥添加到地图控件和地图服务对象（如果适用）。

若要验证 MapControl，请使用该密钥来设置 MapServiceToken 属性值。你可以在代码中设置该属性，也可以在 XAML 标记中设置。

在本例中采用 Compiled data bindings (x:Bind) 的方式将必应地图的密钥绑定至 XAML 文件中的 MapControl，代码如下：

File: MainPage.xaml

<Maps:MapControl

x:Name="myMapControl"

MapServiceToken="{x:Bind BingMapsToken, Mode=OneWay}"

Loaded="MapControlLoaded"/>

在 MainPage.xaml.cs中的 MainPage 类中设定 BingMapsToke 的值，BingMapsToken的值即是在第一步骤中获取的 Bing Maps的密钥。代码如下：

File: MainPage.xaml.cs

private String BingMapsToken = "BingMapsToken by Bing Maps dev center ";

显示3D地图和设定地图中心

在MainPage.xmal.cs代码文件的顶部手动添加命名空间声明。

using Windows.UI.Xaml.Controls.Maps;

using Windows.Devices.Geolocation;

在 MapControl 类的 MapControlLoaded方法中添加如下的代码，显示3D地图并设定地图中心：

File: MainPage.xaml.cs

public BasicGeoposition seattleLocation = new BasicGeoposition()

{

//Geopoint for Seattle

Latitude = 47.604,

Longitude = -122.329

};

public BasicGeoposition spaceNeedlePosition = new BasicGeoposition()

{

//Geopoint for Seattle

Latitude = 47.6204,

Longitude = -122.3491

};

private async void MapControlLoaded(object sender, RoutedEventArgs e)

{

myMapControl.Center = new Geopoint(seattleLocation);

myMapControl.ZoomLevel = 12;

if (myMapControl.Is3DSupported)

{

this.myMapControl.Style = MapStyle.Aerial3DWithRoads;

Geopoint spaceNeedlePoint = new Geopoint(seattleLocation);

MapScene spaceNeedleScene = MapScene.CreateFromLocationAndRadius(spaceNeedlePoint,

400, /* show this many meters around */

135, /* looking at it to the south east*/

60 /* degrees pitch */);

await myMapControl.TrySetSceneAsync(spaceNeedleScene);

}

else

{

//string status = "3D views are not supported on this device.";

this.myMapControl.Style = MapStyle.Aerial;

}

}

可使用MapControl 的 Is3DSupported 方法判断设备是否支持3D地图显示，代码

this.myMapControl.Style = MapStyle.Aerial3DWithRoads;

实现了地图的切换至3D模式。调用MapControl.TrySetSceneAsync 方法切换地图场景。

其中 使用BasicGeoposition 类实例化两个演示地点 seattleLocation 和 spaceNeedlePosition。

在地图上显示图钉、图像和地理空间形状

可通过将图钉、图像和形状添加到 MapElements 集合，在 MapControl 上显示集合中的图钉或者图像。

  • 通过使用 MapIcon 类显示图像（例如，图钉）和文本（可选）。使用 Image 属性设定自定义图像。
  • 定义和显示 MapPolygon 或 MapPolyline。

提示  在 XAML 标记中，无法以声明方式绑定到 MapElements 集合。

以下是未对 Title 属性指定任何值的MapIcon默认图像。

下面的示例显示了 Seattle 的地图并添加了自定义图像和标题的 MapIcon，来指示 Space Needle 的位置。您可以更具您应用的逻辑在需要的时候添加图钉，比如在OnNavigatedTo 方法中设定。本例中在MainPage.xmal.cs代码文件中的 MapControlLoaded 方法中添加图钉。

File: MainPage.xaml.cs

MapIcon seattleMapIcon = new MapIcon();

seattleMapIcon.Location = new Geopoint(seattleLocation);

seattleMapIcon.NormalizedAnchorPoint = new Point(0.5, 1.0);

seattleMapIcon.Title = "Parking here";

seattleMapIcon.Image = RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Assets/mappin.png"));

myMapControl.MapElements.Add(seattleMapIcon);

SplitView 和Hamburger

在Windows 10 应用设计的典型特征就是 SplitView 和 Hamburger，本文当然不会漏过此新特性。

在 MainPage.xaml 中添加如下代码：

<SplitView x:Name="Splitter" IsPaneOpen="False" DisplayMode="CompactInline">

<SplitView.Pane>

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="70"/>

<RowDefinition Height="*"/>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<ListView x:Name="NavLinksList" Grid.Row="1" Margin="0,12,0,0" SelectionMode="None" VerticalAlignment="Stretch"

IsItemClickEnabled="True" ItemClick="NavLinksList_ItemClick"

ItemsSource="{x:Bind NavLinks}" ItemTemplate="{StaticResource NavLinkItemTemplate}"/>

<StackPanel Grid.Row="2" Orientation="Horizontal" Margin="14,24,0,24" >

<SymbolIcon Symbol="Setting" />

<TextBlock Text="Settings" Margin="24,0,0,0" VerticalAlignment="Center"/>

</StackPanel>

</Grid>

</SplitView.Pane>

</SplitView>

<FontIcon HorizontalAlignment="Left"

Margin="14,40,0,0"

VerticalAlignment="Top"

x:Name="Hamburger"

FontFamily="Segoe MDL2 Assets"

Glyph=""

Foreground="Green"

PointerPressed="Button_Click" />

在 MainPage.xaml 中添加代码设定ListView 的ItemTemplate：

<Page.Resources>

<DataTemplate x:Key="NavLinkItemTemplate" x:DataType="local:NavLink">

<StackPanel Orientation="Horizontal" Margin="2,0,0,0">

<SymbolIcon Symbol="{x:Bind Symbol}"/>

<TextBlock Text="{x:Bind Label}" Margin="24,0,0,0" VerticalAlignment="Center"/>

</StackPanel>

</DataTemplate>

</Page.Resources>

ListView 的ItemsSource 以x:Bind方式绑定，绑定的数据源在 MainPage.xaml.cs 中设定：

private ObservableCollection<NavLink> _navLinks = new ObservableCollection<NavLink>()

{

new NavLink() { Label = "Map", Symbol = Windows.UI.Xaml.Controls.Symbol.Map },

new NavLink() { Label = "MapDrive", Symbol = Windows.UI.Xaml.Controls.Symbol.MapDrive },

new NavLink() { Label = "MapPin", Symbol = Windows.UI.Xaml.Controls.Symbol.MapPin },

new NavLink() { Label = "Camera", Symbol = Windows.UI.Xaml.Controls.Symbol.Camera },

};

public ObservableCollection<NavLink> NavLinks

{

get { return _navLinks; }

}

我们在ListView 中的ItemClick 事件可响应用户的交互。在MainPage.xaml.cs中实现 NavLinksList_ItemClick 方法，通过判断 ListView 中Item的 Lable 可知用户究竟点击了哪一个Item，即可执行不同的业务逻辑。在本例中，我们添加Lable为"Map"的响应切换地图显示模式，其代码如下：

private void NavLinksList_ItemClick(object sender, ItemClickEventArgs e)

{

String label = (e.ClickedItem as NavLink).Label;

switch (label)

{

case "Map":

if (myMapControl.Is3DSupported)

{

if ( this.myMapControl.Style == MapStyle.Aerial3DWithRoads)

{

this.myMapControl.Style = MapStyle.Road;

}

else

{

this.myMapControl.Style = MapStyle.Aerial3DWithRoads;

}

MapIcon seattleMapIcon = new MapIcon();

seattleMapIcon.Location = new Geopoint(seattleLocation);

seattleMapIcon.NormalizedAnchorPoint = new Point(0.5, 1.0);

seattleMapIcon.Title = "Parking here";

seattleMapIcon.Image = RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Assets/mappin.png"));

myMapControl.MapElements.Add(seattleMapIcon);

}

break;

default:

break;

}

}

在前面的代码中我们将FontIcon的x:Name 属性设定为Hamburger，现在 MainPage.xaml.cs 中添加PointerPressed 事件响应Button_Click 即实现了Windows 10 的Hamburger。

private void Button_Click(object sender, RoutedEventArgs e)

{

Splitter.IsPaneOpen = (Splitter.IsPaneOpen == true) ? false : true;

//StatusBorder.Visibility = Visibility.Collapsed;

}

代码运行效果如下：

如果您的设备支持多点手势触控，则旋转地图，效果超酷。旋转后可清晰看到图钉的文字"Parking here"。

点击 Hamburger 的 "Map"按钮切换地图显示模式，如下图所示。


激活设备的开发者模式

使用 Visual Studio 2015 开发 Windows 10 应用时，您会看到下图的提示，提醒您激活开发者模式。

那么如何激活开发者模呢？

如果您的Windows 10已经升级至 Pro Insider Preview Evaluation Copy. Build 10130 以上，或者您看此文时Windows 10 正式版已经发布，那么在 Settings 选择 Update & security > For developers ，选择 Developer Mode 激活开发者模式。

Windows 10 Phones

在 Settings 选择 Update & security，然后选择 For developers 。

Windows 10 desktop

Use gpedit to enable your device

  • Open a cmd prompt with administrator privileges.
  • Run Gpedit.msc.
  • Go to Local Computer Policy > Computer Configuration > Administrative Templates > Windows Components > App Package Deployment
  • Edit the policies to enable the following:

    • Allow all trusted apps to install (Enables your device for sideloading apps)
    • Allows development of Windows Store apps and installing them from an integrated development environment (IDE) (Enables your device for development from Visual Studio)
  • Reboot your machine.

Use regedit to enable your device

  1. Open a cmd prompt with administrator privileges.
  2. Run regedit.
  3. Set the value of this DWORD to 1: HKLM\SOFTWARE\Microsoft\Windows\CurrentVersion\AppModelUnlock\AllowAllTrustedApps
  4. Set the value of this DWORD to 1: HKLM\SOFTWARE\Microsoft\Windows\CurrentVersion\AppModelUnlock\AllowDevelopmentWithoutDevLicense

Use PowerShell to enable your device

  1. Run Windows PowerShell with administrator privileges.
  2. Run the following command: PS C:\WINDOWS\system32> reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\AppModelUnlock" /t REG_DWORD /f /v "AllowDevelopmentWithoutDevLicense" /d "1"
  3. Run this command too: PS C:\WINDOWS\system32> reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\AppModelUnlock" /t REG_DWORD /f /v "AllowAllTrustedApps" /d "1"

作者：雪松

Microsoft MVP -- Windows Platform Development,

Hortonworks Certified Apache Hadoop 2.0 Developer

时间： 2024-10-27 07:14:57

Windows 10 新特性 -- Bing Maps 3D地图开发入门(一)的相关文章

Windows 10 新体验(一)：Windows 10预览版安装

10月2日微软开放了新一代桌面操作系统Windows 10预览版的下载.我尝试安装了Windows 10,和大家一起来分享一下. 很有意思的是,微软在10月1日凌晨举行了Windows发布会,推出了Windows 10操作系统,直接跳过了"Windows 9"的命名.哈哈~~前几天我们还一起猜测Windows 9的命名,没想到微软直接就命名为Windows Ten了. Windows 10装完的体验还可以,最起码我可以轻松找到关机按钮了.记得Windows 8的时候,关机按钮我可找了好

JDK 5 ~ 10 新特性倾情整理！

JDK 5 ~ 10 新特性倾情整理! 最近连 JDK11都在准备发布的路上了,大家都整明白了吗?也许现在大部分人还在用6-8,8的新特性都没用熟,9刚出不久,10-11就不用说了. 为了大家对JDK有一个全面的了解,下面我为大家整理了JDK5~10的所有关键新特性! JDK5新特性 自动装箱与拆箱 枚举 静态导入 可变参数(Varargs) 内省(introspector) 泛型(Generic) For-Each循环 JDK6新特性 Desktop类和SystemTray类 使用JAXB2来

jdk1.5-1.10新特性

从网上搜集摘录的jdk特性,在这里记录下来以便自我学习. jdk5新特性    1.自动装箱和拆箱    2.枚举    3.静态导入    4.可变参数    5.內省       是Java语言对Bean类属性.事件的一种缺省处理方法.例如类A中有属性那么,那我们可以通过getName,setName来得到其值或者设置新的值.通过getName/setName来访问name属性,这就是默认的规则.Java中提供了一套API用来访问某个属性的getter,setter方法,通过这些API可以使

Windows 10新体验（二）：谈谈桌面的那点事

昨天,和大家分享了Windows 10的安装过程,今天让我们一起体验一下界面的变化吧. 首先,当然要说说新的开始菜单,毕竟被Windows 8折磨了许久.显然,这是一个接近经典的开始菜单.但又和传统的菜单不一样.点击左下角的Windows图标后,不再会跳转到Metro界面,终于出现菜单了哈,这个新菜单,在我看来,它就是传统菜单和Metro的结合体. 开始菜单的左侧,是一些令人熟悉的传统元素,比如文档.照片.计算器等内容,右侧则是专为Metro应用设计的区域,你仍可以像在开始屏幕那样定制它们的大小

微软Surface Book推送Windows 10新固件更新：增强系统和电池

微软公司最近为Surface Book推出了新的Windows 10固件系统和驱动的更新,并且以MSI的文件格式上传到了微软的下载中心里面.此次更新的内容主要是改进了Surface Book的系统的稳定性以及电池的可靠性,针对的版本是搭载Windows 10创意者更新(Version 1703)的微软的Surface Book设备. Surface Book是微软公司在2015年10月6号推出的一款笔记本电脑.作为微软的首款笔记本产品,Surface Book采用的是13.5英寸的显示器,内置英

iOS 10 新特性

1.语音识别 苹果官方在文档中新增了API   Speech,那么在以前我们处理语音识别非常的繁琐甚至很多时候可能需要借助于第三方框架处理,那么苹果推出了这个后,我们以后处理起来就非常的方便了,speech具有以下特点: 可以实现连续的语音识别 可以对语 音文件或者语音流进行识别 最佳化自由格式的听写(可理解为多语言支持)和搜索式的字符串 官方文档: 核心代码: #import <Speech/Speech.h> //1.创建本地化标识符 NSLocale *local =[[NSLocale

[Android 新特性] 谷歌发布Android Studio开发工具1.0正式版(组图) 2014-12-09 09:35:40

Android Studio是谷歌于13年I/O大会推出的Android开发环境,基于IntelliJ IDEA. 类似 Eclipse ADT,Android Studio 提供了集成的Android开发工具用于开发和调试. 今日谷歌发布了Android studio的1.0正式版,增加了包括智能代码编辑,用户界面设计工具,性能分析工具等新功能,支持Android 5.0平台的开发. 谷歌也将推荐开发环境从Eclipse IDE调整为Android studio,还为Eclipse开发者提供了

Bing Maps必应地图

必应地图支持中英文地图的切换. 英文:<script charset="UTF-8" type="text/javascript" src="http://dev.ditu.live.com/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us"> 中文:<script id="mapurl" charset="UTF-8" type="t

Windows XP-android环境搭建-【 潭州安卓开发入门教程全】

最近我们课堂很多人都不会搭建环境,今天我们潭州安卓的老师就讲了一下怎么Windows XP-android环境搭建,我偷偷做了下笔记,希望对咱们更多学习安卓的同学有帮助,慢慢一步步跟着操作是不会有太大问题的. 注:本教程是讲解在Windows XP下搭建安卓开发环境的,不是XP系统的朋友请绕行! 在开始搭建之前,请大家先到本人的网盘中下载所需的6个文件. 下载球球裙:175229978 安装目录: 步骤1à安装JDK---------------------------------对应的安装文件