Technische Einführung zur Entwicklung von AR-Apps mit Bing Maps

Augmented Reality mit Bing Maps
Kommentare

Dieser Artikel zeigt die einfachen Umsetzung einer Augmented-Reality-(AR-)App als so genannte Windows-8-Store-Anwendung, aufbauend auf dem frei verfügbaren Augmented-Reality-Codeplex-Projekt GART.

Im Artikel wird demonstriert, wie mit wenig Aufwand eine einfache, georäumlich unterstützte AR-Anwendung erstellt werden kann. Der Schwerpunkt liegt dabei auf der Vermittlung des Grundkonzepts einer Integration der Bing-Maps-Plattform in das GART-Projekt.

Mit dem Erscheinen von mobilen Endgeräten in industriellen Stückzahlen, die mit Kompass, örtlichen Sensor sowie Gyrometer ausgestattet sind, scheint der Markt für Augmented-Reality-Applikationen sowohl für Endanwender und auch im Enterprise-Sektor vorbereitet. Diverse Marktforschungsinstitute taxieren den Umsatz, der mit AR-Apps im nächsten Jahr erwartet wird, auf ca. 1 Milliarde Euro.

Augmented-Reality-Apps

Im weiteren Sinne werden bei einer Augmented-Reality-Applikation digitale Informationen aus der Realität (z. B. ein Videostream) mit digitalen Zusatzinformationen angereichert. Im Sinne dieser Definition werden wir uns mit einer speziellen Form der Augmented Reality, der „Geospatial Augmented Reality“, beschäftigen. Diese umfasst insbesondere Szenarien, in denen in Abhängigkeit vom physischen Standort des Users und der Ausrichtung des mobilen Endgeräts, als Zusatzinformationen Points of Interest (z. B. Tankstellen, Hotels, Restaurants), deren Lage (auf dem Kamerastream sowie auf einer Landkarte) wie auch der kürzeste Weg dorthin, angezeigt wird.
Die webbasierte Microsoft-Kartenplattform Bing Maps existiert bereits seit dem Jahre 2001 und liefert neben Kartendaten auch Routingfunktionen und über den Spatial Data Service (SDS) eine Points-of-Interest-Datenbank inklusive einer Umkreissuche. Für unsere Applikation benutzen wir als vereinfachte AR-Unterstützung das frei verfügbare Codeplex-Projekt GART und bauen auf einem frei verfügbaren Sample-Sourcecode des Microsoft Tech Ranger Ricky Brundritt auf.

Vorbereitungen und Einbindung des GART-Projekts in Visual Studio

Um die Bing-Maps-Plattform verwenden zu können, muss auf www.bingmapsportal.com ein Account angelegt und ein Windows-Store-App-Key generiert werden, der später in der Applikation zur Authentifizierung für die Bing-Maps-Plattform dient. Wir öffnen Visual Studio 2012 (oder 2013) und legen ein neues Projekt namens BingMapsAR an. Im Dialogfenster wählen wir C# | WINDOWS STORE und wählen die „Blank App“-Vorlage. Wir fügen via ADD REFERENCE | WINDOWS eine Referenz für die Bing Maps for Windows Store Apps SDK (C#, C++ and Visual Basic) ein. Auf der Sourcecode-Seite des GART-Codeplex-Projekts müssen nun die Quellen heruntergeladen und in das Verzeichnis kopiert werden, in dem das Projekt liegt. Über ADD | EXISTING PROJECT wird nun die Gart.Win8.csproj-Projektdatei, die sich im Verzeichnis GeoARToolkit\Lib\Win8\GART.Win8 befindet, hinzugefügt und im BingMapsAR-Projekt referenziert. Die Solution sollte nun bereits kompilierbar sein. Die eigentliche Implementierung des GART-Projekts findet über das Hauptcontrol ARDisplay statt. Über ARDisplay werden folgende Subcontrols bzw. deren Funktionalitäten ermöglicht:

VideoPreview – zur Anzeige des Videopreviews der rückwärts gerichteten Kamera
WorldView – zur Anzeige des virtuellen Raums, enthält auch die Berechnungen zur Synchronisation von Kamerabild und virtuellem Raum
HeadingIndicator – zur Richtungsanzeige
OverheadMap – zur Anzeige der Bing Map, zentriert auf den aktuellen Anwenderstandort und mit Anzeige der naheliegenden Standorte

Diese (Sub-)Controls können sehr leicht via XAML-Templates und Styles angepasst werden. Das ARDisplay-Control besitzt zudem die wichtige Eigenschaft ARItems, die benutzt wird, um eigene Daten hinzuzufügen und anzeigen zu können. Im gewählten Ansatz werden die Points of Interest des Bing Maps SDS hinzugefügt. Im BingMapsAR-Projekt wird nun das Verzeichnis Models hinzugefügt, ADD | NEW ITEM ausgewählt und eine Class-Datei PoiItem.cs angelegt. Microsoft bietet hierfür und zum Ausparsen der Responses ein komplettes Tutorial inklusive aller notwendigen Sourcecodes an. Durch Markieren der entsprechenden Checkboxes in der Capabilities-Registerkarte des App-Manifests kann die Anwendung auf Internet, Location und Webcam zugreifen. In der MainPage.xaml ist nun die Referenz für GART und für das Bing-Maps-Control hinzuzufügen, und sukzessive ein Data-Template PoiItem zu erstellen. Dieses Data-Template definiert, wie ein Standortelement auf dem Videostream angezeigt wird. Analog hierzu wird ein weiteres Datatemplate erstellt, das wiederum definiert, wie ein Standortelement auf der Bing-Maps-Karte erscheint. Daraufhin muss nun im Hauptgrid der Applikation das ARDisplay-Control mit den bereits erläuterten (Unter-)Controls Videopreview, Worldview und OverheadMap eingefügt werden (Listing 1).

<Page
  x:Class="BingMapsAR.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:BingMapsAR"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:ARControls="using:GART.Controls"
  xmlns:m="using:Bing.Maps"
  mc:Ignorable="d">

  <Page.Resources>
    <DataTemplate x:Key="PoiItem">
      <Border BorderBrush="Black" BorderThickness="2" CornerRadius="8" Background="#FF003847" Width="250">
        <Grid Margin="4" Tapped="PoiItem_Tapped">
          <TextBlock Text="{Binding Name}" Margin="5"/>
        </Grid>
      </Border>
    </DataTemplate>

    <DataTemplate x:Key="PoiPushpin">
      <m:Pushpin m:MapLayer.Position="{Binding GeoLocation}" Background="#FF003847"/>
    </DataTemplate>

    <Style TargetType="ARControls:OverheadMap">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="ARControls:OverheadMap">
            <Grid>
              <m:Map x:Name="Map">
                <m:MapLayer>
                  <m:MapItemsControl ItemTemplate="{StaticResource PoiPushpin}" ItemsSource="{Binding}"/>
                </m:MapLayer>
              </m:Map>
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </Page.Resources>

  <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
    <ARControls:ARDisplay x:Name="ARDisplay" LocationEnabled="True" MovementThreshold="100" LocationChanged="ARDisplay_LocationChanged" ServiceErrors="ARDisplay_ServiceErrors">
      <ARControls:VideoPreview x:Name="VideoPanel"/>
      <ARControls:WorldView x:Name="WorldView" ItemTemplate="{StaticResource PoiItem}"/>
      <ARControls:OverheadMap x:Name="OverheadMap" Credentials="{StaticResource BingCredentials}" Width="300" Height="200" Margin="10" VerticalAlignment="Top" HorizontalAlignment="Right"/>
    </ARControls:ARDisplay>
  </Grid>
</Page>

In Listing 2 sind die erforderlichen Event Handler für die Controls der MainPage.xaml enthalten. Dabei ist zu beachten, dass ein Event Handler enthalten ist, der beim Beenden des Ladevorgangs ausgelöst wird. In diesem Event wiederum wird insbesondere der Anwendungsfall „Änderung im Hauptfenster“ behandelt, um Ressourcen zu schonen. Die Dienste sollen nur angesprochen werden, wenn die App auch verwendet wird.

using Bing.Maps;
using BingMapsAR.Models;
using GART.Data;
using System;
using System.Runtime.Serialization.Json;
using System.Text;
using System.Threading.Tasks;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;

namespace BingMapsAR
{
  public sealed partial class MainPage : Page
  {
    /// Search Radius in meters
    private double SearchRadius = 300;

    /// Maximium number of items returned by the Bing Spatial Data Services
    private const int MaxResultsPerQuery = 30;

    private Location LastSearchLocation;

    public MainPage()
    {
      this.InitializeComponent();
      this.Loaded += MainPage_Loaded;
    }

    private void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
      Window.Current.CoreWindow.VisibilityChanged += async (s, a) =>
      {
        if (a.Visible)
        {
          // Start or restart the services used by the ARDisplay
          await ARDisplay.StartServices();
        }
        else
        {
          // Stop the services used by the ARDisplay to free up those resources while the app is not in use.
          ARDisplay.StopServices();
      }
    };
  }

  private void ARDisplay_ServiceErrors(object sender, GART.ServiceErrorsEventArgs e)
  {
  }

  private async void ARDisplay_LocationChanged(object sender, EventArgs e)
  {
  }

  private void PoiItem_Tapped(object sender, TappedRoutedEventArgs e)
  {
  }
}

Im ARDisplay_LocationChanged-Ereignis ist die Logik für die Suche nach nahe gelegenen Orten sowie deren Aufnahme in das ARDisplay zu hinterlegen. Da in den Bing Maps Spatial Data Services zwei unterschiedliche Datenquellen für Nordamerika und Europa existieren, muss, basierend auf einer einfachen Abfrage zum Längengrad, die richtige Datenquelle zum aktuellen Nutzerstandort angesprochen werden. Für den Abfrage-URL werden nun alle Parameter zusammengesetzt. Wir iterieren in der Response durch die Ergebnisse und fügen sie als PoiItem-Einträge dem ARDisplay hinzu (Listing 3).

private async void ARDisplay_LocationChanged(object sender, EventArgs e)
{
  // Last search location is now this location
  LastSearchLocation = ARDisplay.Location;

  if(LastSearchLocation != null)
  {
    // Remove items from ARDisplay
    ARDisplay.ARItems.Clear();

    // Create Search URL for Bing Spatial Data Service
    string baseURL;

    // Switch between the NAVTEQ POI data sets for NA and EU based on where the user is.
    if (LastSearchLocation.Longitude < -30)
    {
      // Use the NAVTEQ NA data source: http://msdn.microsoft.com/en-us/library/hh478192.aspx
      baseURL = "http://spatial.virtualearth.net/REST/v1/data/f22876ec257b474b82fe2ffcb8393150/NavteqNA/NavteqPOIs";
    }
    else
    {
      // Use the NAVTEQ EU data source: http://msdn.microsoft.com/en-us/library/hh478193.aspx
      baseURL = "http://spatial.virtualearth.net/REST/v1/data/c2ae584bbccc4916a0acf75d1e6947b4/NavteqEU/NavteqPOIs";
    }

    string poiRequest = string.Format("{0}?spatialFilter=nearby({1:N5},{2:N5},{3:N2})&$format=json&$top={4}&key={5}",
    baseURL, LastSearchLocation.Latitude, LastSearchLocation.Longitude, SearchRadius / 1000, MaxResultsPerQuery, OverheadMap.Map.Credentials);

    Response = await GetResponse(new Uri(poiRequest));

    if (response != null &&
    response.ResultSet != null &&
    response.ResultSet.Results != null &&
    response.ResultSet.Results.Length > 0)
    {
      // Loop through the results and create PoiItems that can be added to the ARDisplay
      foreach (var r in response.ResultSet.Results)
      {
        Location loc = new Location(r.Latitude, r.Longitude);

        PoiItem item = new PoiItem()
        {
          Name = r.DisplayName,
          AddressLine = r.AddressLine,
          Locality = r.Locality,
          PostalCode = r.PostalCode,
          EntityTypeID = r.EntityTypeID,
          Phone = r.Phone,
          GeoLocation = loc,
          Distance = Math.Round(ARHelper.DistanceTo(loc, LastSearchLocation))

        };
        ARDisplay.ARItems.Add(item);
      }

      // Set the map view to show all the locations.
      OverheadMap.Map.SetView(ARDisplay.Location, 15);
    }
  }
}

Fazit

Im beschriebenen Ansatz wurde versucht zu verdeutlichen, wie einfach es ist, eine simple Augmented-Reality-Applikation für die Windows-/Windows-Phone-8.1-Plattform mit den Bing Maps SDKs und dem GART-Projekt umzusetzen. Die zur Umsetzung in Frage kommenden Szenarien, auch für den Einsatz in Unternehmen, erscheinen zahlreich. Im Prinzip sind alle Anwendungsfälle, in denen räumlich orientierte Zusatzinformationen zur Realität sinnvoll sein können, prädestiniert für den Einsatz solcher Applikationen. Die Bing Maps for Enterprise Plattform bietet hierfür nicht nur eine umfangreiche POI-Datenbank zur standardisierten Nutzung von Zusatzinformationen an, sondern auch die Möglichkeit, stattdessen oder zusätzlich, eigene Daten in der Cloud zu speichern und räumlich abzufragen.

Aufmacherbild: Happy travel woman look map in London with Big Ben tower, London, UK, asian beauty von Shutterstock / Urheberrecht: aslysun

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -