Maggio 2017
Volume 32 Numero 5
Il presente articolo è stato tradotto automaticamente.
Applicazioni moderne - Analisi approfondita del controllo mappa
Da Frank La La
.png "Frank La Vigne")
Nel mio articolo il mese scorso, illustrato le funzionalità di base del controllo Bing Maps per applicazioni universali Windows piattaforma UWP () e come è facile per aggiungere una mappa per App UWP. Questo mese vi mostrerò come sfruttare alcune delle funzionalità più avanzate che consentono le app realmente risalto e fornire esperienze eccezionali per gli utenti. Verrà esaminata in dettaglio come incorporare le immagini avanzata e l'esperienza 3D di Bing Maps direttamente nelle app.
Per iniziare
Per un esame approfondito come aggiungere il controllo mappa e ottenere un MapServiceToken, consultare la colonna ultimo mese (msdn.com/magazine/mt797655). Ai fini di questo articolo, creare un nuovo progetto UWP vuoto in Visual Studio scegliendo Nuovo progetto dal menu File. Espandere in modo da modelli installati | Windows | Applicazione vuota (Windows Universal). Denominare il progetto DCTourismMap e quindi fare clic su OK. Immediatamente dopo, una finestra di dialogo verrà visualizzato chiesto quale versione di Windows deve essere destinata l'applicazione. Per questo progetto, le opzioni predefinite saranno corrette, pertanto è possibile semplicemente fare clic su OK. Nel file MainPage. XAML, aggiungere la seguente dichiarazione dello spazio dei nomi per il tag di pagina:
xmlns:maps="using:Windows.UI.Xaml.Controls.Maps"
Successivamente, aggiungere il controllo mappa alla pagina, aggiungendo il seguente codice XAML nel controllo della griglia della pagina (assicurarsi di inserire il valore di MapServiceToken ricevuto dal portale di Bing mappe in bingmapsportal.com):
<maps:MapControl x:Name="mapControl" MapServiceToken="{Insert Key Here}" >
</maps:MapControl>
È ora possibile eseguire la soluzione e verrà visualizzato un controllo mappa che copre l'intera schermata dell'applicazione. Con questo controllo sul posto, è possibile iniziare sfruttare i vantaggi di tutto ciò che offre il controllo Bing Maps per piattaforma UWP.
Marcatori di mappa personalizzata
Nel mio ultimo articolo, ho scritto sull'aggiunta di marcatori alla mappa. I marcatori semplicemente individuare una posizione su una mappa. Ma, il controllo mappa UWP anche consente agli sviluppatori di inserire controlli XAML personalizzati in una mappa e, insieme ai controlli XAML, comporta interattività avanzata. L'obiettivo consiste nel creare una mappa che illustra i vari punti di riferimento in Washington D.C. I marcatori nella mappa di ognuno di un'immagine della posizione e attiverà un sito Web informazioni quando si fa clic su di esso. Al termine, la mappa avrà un aspetto analogo figura 1.
.png "Mappa con i controlli di pulsante personalizzato inserito nel percorso specificato")
Figura 1 mappa con i controlli di pulsante personalizzato inserito nella posizione specificata
A tale scopo, sarà necessario il controllo mappa un MapItemsControl, DataTemplate e alcuni altri attributi aggiunti. In primo luogo, modificare il controllo mappa XAML in MainPage. XAML come quello mostrato nella figura 2.
Figura 2 modificato controllo mappa XAML in MainPage. Xaml
<maps:MapControl x:Name="mapControl" Loaded="mapControl_Loaded"
MapServiceToken="[Insert Key Here]">
<maps:MapItemsControl x:Name="sitesMapItemsControl" >
<maps:MapItemsControl.ItemTemplate>
<DataTemplate>
<Button Click="itemButton_Click"
maps:MapControl.Location="{Binding Location}" >
<StackPanel>
<Border Background=
"{ThemeResource ApplicationPageBackgroundThemeBrush}">
<TextBlock Text="{Binding Name}"/>
</Border>
<Image Source="{Binding ImageUri}" Width="100" Height="50"
Stretch="UniformToFill">
</Image>
</StackPanel>
</Button>
</DataTemplate>
</maps:MapItemsControl.ItemTemplate>
</maps:MapItemsControl>
</maps:MapControl>
Leggere attentamente il codice XAML e notare che MapItemsControl DataTemplate associato a un oggetto con proprietà diverse. Il passaggio successivo consiste nel creare un modello che contiene tali proprietà. In Esplora soluzioni, pulsante destro del mouse sul progetto, fare clic su Aggiungi e quindi fare clic su nuova cartella nel menu successiva. Denominare la cartella modelli e premere INVIO. Pulsante destro del mouse sulla cartella modelli, fare clic su Aggiungi e quindi scegliere Nuovo elemento. Nella successiva finestra di dialogo, scegliere classe dall'elenco dei modelli. Denominare il nuovo file di classe POI.cs e fare clic su OK (punto di interesse sta per punti di interesse).
Modificare il contenuto del file POI.cs simile al codice seguente:
using System;
using Windows.Devices.Geolocation;
namespace DCTourismMap.Model
{
public class POI
{
public string Name { get; set; }
public Geopoint Location { get; set; }
public Uri ImageUri { get; set; }
public Uri InformationUri { get; set; }
}
}
Successivamente, aprire il file MainPage.xaml.cs e aggiungere il gestore dell'evento nella figura 3 per allineare al centro la mappa di Washington D.C. e impostare un livello di zoom è incentrato sull'area intorno supermercato nazionale. Il metodo LoadPointsOfInterest crea e popola un elenco < punto di interesse >. L'ultima riga del metodo mapControl_Loaded imposta ItemsSource del MapItemsControl a questo elenco.
Figura 3 gestore eventi per centrare la mappa in Washington D.C. e creare l'elenco per inserire punti di interesse
private void mapControl_Loaded(object sender, RoutedEventArgs e)
{
this.mapControl.Center = new Geopoint(
new BasicGeoposition() { Latitude = 38.889906, Longitude = -77.028634 });
this.mapControl.ZoomLevel = 16;
sitesMapItemsControl.ItemsSource = LoadPointsOfInterest();
}
private List<POI> LoadPointsOfInterest()
{
List<POI> pointsOfInterest = new List<POI>();
pointsOfInterest.Add(new POI()
{
Name ="Washington Monument",
ImageUri= new Uri(
"https://upload.wikimedia.org/wikipedia/commons/e/ea/
Washington_October_2016-6_%28cropped%29.jpg"),
InformationUri = new Uri("https://www.nps.gov/wamo/index.htm"),
Location = new Geopoint(
new BasicGeoposition() { Latitude = 38.8895, Longitude = -77.0353 })
});
pointsOfInterest.Add(new POI()
{
Name = "White House",
ImageUri = new Uri(
"http://www.publicdomainpictures.net/pictures/20000/nahled/white-house.jpg"),
InformationUri = new Uri("https://www.whitehouse.gov"),
Location = new Geopoint(
new BasicGeoposition() { Latitude = 38.897734, Longitude = -77.036535 })
});
pointsOfInterest.Add(new POI()
{
Name = "The US Capitol",
ImageUri = new Uri(
"https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/US_
Capitol_west_side.JPG/320px-US_Capitol_west_side.JPG"),
InformationUri = new Uri("https://www.capitol.gov/"),
Location = new Geopoint(
new BasicGeoposition() { Latitude = 38.889892, Longitude = -77.009341 })
});
return pointsOfInterest;
}
Aggiunta di interattività
A questo punto, aggiungere il seguente codice del gestore eventi per il controllo button specificato in DataTemplate:
private void itemButton_Click(object sender, RoutedEventArgs e)
{
var buttonSender = sender as Button;
POI poi = buttonSender.DataContext as POI;
Launcher.LaunchUriAsync(poi.InformationUri);
}
Il gestore eventi recupera l'oggetto punto di interesse associato al controllo che ha attivato l'evento e trasferisce la proprietà InformationURI al metodo LaunchURIAsync della classe di utilità di avvio. Per gli URI dei siti, verranno avviati nel browser predefinito nel sistema e caricare l'URI ad esso inviato. La classe di utilità di avvio si trova nello spazio dei nomi Windows.System. È possibile aggiungere lo spazio dei nomi manualmente con un'istruzione using o lasciare che Visual Studio che illustrano in dettaglio di gestire. La classe di utilità di avvio è possibile eseguire molto più che sufficiente aprire un browser. Ulteriori informazioni sulla classe di utilità di avvio in bit.ly/2n4Zx0F.
Eseguire ora la soluzione e dovrebbe essere simile al figura 1. Facendo clic su uno dei marcatori attiverà un sito di riferimento.
Mappe in tre dimensioni
Uno degli aspetti più interessanti del controllo Bing Maps UWP è la possibilità di eseguire il rendering di immagini 3D di molti paesi del mondo. Per iniziare, creare un nuovo progetto utilizzando la procedura descritta nella sezione introduttiva. Tuttavia, questa volta, assegnare un nome 3DMaps la soluzione. Assicurarsi di aggiungere la dichiarazione dello spazio dei nomi per il file MainPage. XAML per includere lo spazio dei nomi di mappe. Inserire il codice XAML illustrato nella figura 4 nel nodo pagina di MainPage. XAML per il controllo mappa e una serie di pulsanti per controllare la visualizzazione 3D della mappa.
Figura 4 XAML per creare l'interfaccia per l'applicazione mappa 3D
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="30*"/>
<RowDefinition Height="80*"/>
<RowDefinition Height="549*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Grid.Row="0">
<Button Name="btn3DView" Content="3D View" Click="btn3DView_Click" />
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Row="1">
<TextBlock FontWeight="Bold">Heading: </TextBlock>
<TextBlock Text="{Binding ElementName=mapControl,Path=Heading,
Mode=OneWay}"></TextBlock>
<TextBlock FontWeight="Bold">Pitch: </TextBlock>
<TextBlock Text="{Binding ElementName=mapControl,Path=ActualCamera.Pitch,
Mode=OneWay}"></TextBlock>
</StackPanel>
<maps:MapControl x:Name="mapControl" Grid.Row="2"
MapServiceToken="[Insert Token Here]">
</maps:MapControl>
</Grid>
La modifica Maps 3D
Visualizzazione di una mappa in 3D è semplice e trattato che brevemente nel mio articolo mese scorso. Tuttavia, tutte le app di esempio di tale colonna è stata era di passare alla visualizzazione 3D. A questo punto, passiamo come livello di codice modificare una mappa 3D. Aggiungere il gestore eventi per il pulsante btn3Dview, come illustrato nella figura 5.
Figura 5 codice passa a una visualizzazione mappa 3D con stato attivo Manhattan inferiore
private async void btn3DView_Click(object sender, RoutedEventArgs e)
{
if (this.mapControl.Is3DSupported)
{
this.mapControl.Style = MapStyle.Aerial3DWithRoads;
BasicGeoposition nycDowntownLatLong = new BasicGeoposition()
{
Latitude = 40.712929,
Longitude = -74.018291
};
double radius = 550;
double heading = 90;
double pitch = 80;
MapScene nycDowntownScene = MapScene.CreateFromLocationAndRadius(
new Geopoint(nycDowntownLatLong), radius, heading, pitch );
await mapControl.TrySetSceneAsync(nycDowntownScene);
}
}
Si noterà immediatamente, il codice per impostare la proprietà di stile del controllo mappa Aerial3DWithRoads. Tuttavia, si desidera essere in grado di controllare dettagli specifici sulla vista. In questo esempio si desidera mostrare skyline di Manhattan inferiore. A questo scopo, è necessario "una cattura frame" molto in modo identico a un fotografo scegliendo una posizione nello spazio 3D per impostare una fotocamera e scegliere in un determinato posizione e un angolo specificato. Il diagramma in figura 6 viene fornita una panoramica.
.png "Diagramma concettuale di un MapScene")
Figura 6 diagramma concettuale di un MapScene
Per impostare l'immagine desiderata, iniziare con una latitudine e una longitudine per definire la posizione. Quindi definire variabili per radius, intestazione e il passo per controllare la visualizzazione della camera. Successivamente, creare un MapScene utilizzando il metodo MapScene.CreateFromLocationAndRadius. Verrà creata una scena centrata sul specificato latitudine e longitudine da una certa distanza in metri (radius). Intestazione fa riferimento alla direzione in cui sia rivolto verso la fotocamera. Questo valore può essere un punto qualsiasi tra 0 e 360, che rappresenta i punti bussola. Per riferimento, un valore pari a 90 rappresenta est. Un valore pari a zero è Nord, 180 è Sud e 270 è occidentale. Passo si riferisce l'angolo in cui è rivolta verso la fotocamera. Zero sarebbe una vista dall'alto in basso e 90 sarebbe perpendicolare.
Dopo aver creato l'oggetto MapScene, viene applicata al controllo mappa utilizzando il metodo TrySetSceneAsync. Eseguire ora il progetto. Fare clic sulla vista 3D e l'applicazione deve mostrare una visualizzazione 3D di Manhattan inferiore. Si noti che è possibile controllare la mappa tramite mouse e tastiera. Se il dispositivo supporta il tocco, è possibile utilizzare anche i movimenti tocco per l'intestazione di controllo, eseguire lo zoom di livello e tono del controllo mappa.
Anche se con il mouse, tastiera e movimento controllo integrato nel controllo mappa è valido, sarebbe utile modificare a livello di programmazione 3D viewport della mappa.
Chiudere l'app e torna al codice nel file MainPage. XAML in Visual Studio. Aggiungere il seguente codice XAML nel controllo StackPanel dopo il pulsante btn3DView:
<Button Name="btnRotateCameraLeft" Content="Rotate Left"
Click="btnRotateCameraLeft_Click" />
<Button Name="btnRotateCameraRight" Content="Rotate Right"
Click="btnRotateCameraRight_Click" />
<Button Name="btnTiltCameraDown" Content="Tilt Down"
Click="btnTiltCameraDown_Click" />
<Button Name="btnTiltCameraUp" Content="Tilt Up"
Click="btnTiltCameraUp_Click" />
Questo codice XAML creerà quattro pulsanti per controllare il riquadro di visualizzazione della mappa. Per il controllo intestazione sono due: uno per attivare destra e l'altro per attivare a sinistra. Per controllare il tono sono due: uno per ruota in alto e l'altro per inclinare verso il basso. A questo punto, aggiungere i gestori eventi, come illustrato nella figura 7, il file MainPage.xaml.cs.
Figura 7 gestori eventi per i pulsanti dell'interfaccia utente che controllano la fotocamera MapScene
private async void btnRotateCameraLeft_Click(object sender, RoutedEventArgs e)
{
await mapControl.TryRotateAsync(-30);
}
private async void btnRotateCameraRight_Click(object sender, RoutedEventArgs e)
{
await mapControl.TryRotateAsync(30);
}
private async void btnTiltCameraUp_Click(object sender, RoutedEventArgs e)
{
await mapControl.TryTiltAsync(15);
}
private async void btnTiltCameraDown_Click(object sender, RoutedEventArgs e)
{
await mapControl.TryTiltAsync(-15);
}
I metodi TryRotateAsync e TryTiltAsync entrambi accettano un parametro di tipo double che rappresenta l'angolo di rotazione o inclinazione, rispettivamente. I valori negativi Ruota a sinistra e inclinare verso il basso. I valori positivi Ruota a destra e ruota in alto. Eseguire l'app. Fare clic sulla vista 3D e provare a utilizzare il controllo che è ora sulla mappa tramite i pulsanti. L'applicazione dovrebbe essere simile figura 8.
.png "L'App dopo aver fatto clic Ruota a destra più volte")
Figura 8 l'App dopo aver fatto clic Ruota a destra più volte
Visualizzazione StreetSide
Una delle altre funzionalità avanzate di Bing Maps è la visualizzazione StreetSide, che consente agli utenti di esplorare un percorso tramite una serie di panorami interattivi. Con il controllo mappa UWP, le applicazioni possono ora includere questa funzionalità incorporata in essi.
Se l'applicazione è già in esecuzione, arrestarlo e tornare a Visual Studio. Aggiungere il codice XAML seguente nel file MainPage. XAML per aggiungere un pulsante per l'abilitazione della visualizzazione StreetSide:
<Button Name="btnStreetSide" Content="StreetSide" Click="btnStreetSide_Click" />
A questo punto aggiungere il gestore dell'evento in figura 9 per abilitare la visualizzazione StreetSide.
Figura 9 di installazione e alla visualizzazione StreetSide di Manhattan inferiore
if (mapControl.IsStreetSideSupported)
{
BasicGeoposition nycDowntownLatLong = new BasicGeoposition()
{
Latitude = 40.712929,
Longitude = -74.018291
};
Geopoint nycDowntownPoint = new Geopoint(nycDowntownLatLong);
StreetSidePanorama panoramaNearDowntownNYC =
await StreetSidePanorama.FindNearbyAsync(nycDowntownPoint);
if (panoramaNearDowntownNYC != null)
{
var nycSSE = new StreetSideExperience(panoramaNearDowntownNYC);
mapControl.CustomExperience = nycSSE;
}
}
}
Il primo passaggio consiste nella verifica se l'applicazione è in esecuzione su un dispositivo che supporta la visualizzazione StreetSide, poiché non tutti i dispositivi sono in grado di supportare il. Il passaggio successivo consiste nel creare un GeoPoint da una coordinata di longitudine/latitiude. Passare a questo punto, tale GeoPoint al metodo FindNearbyAsync per trovare una posizione adiacente con immagini StreetSide disponibile. Se non esiste alcun immagini in prossimità di tale percorso, il metodo restituirà null.
Tutto ciò che resta da fare è creare un'esperienza StreetSide passando l'oggetto StreetSide Panorama al costruttore StreetSide esperienza. Per passare il controllo mappa alla vista StreetSide, impostare il controllo mappa proprietà esperienza personalizzata per l'oggetto esperienza StreetSide appena creato.
Eseguire ora la soluzione e fare clic sul pulsante StreetSide. Fare clic su Ruota in alto e ruota in basso e l'app deve mostrare la visualizzazione StreetSide del mondo Financial Center e Tower libertà. Si noti che il controllo risponde a una tastiera, mouse e touch. Il controllo verrà anche consentono di eseguire lo zoom avanti ed esplorare l'ambiente. Sotto la visualizzazione StreetSide, esiste un mapping di panoramica che consente agli utenti di esplorare ulteriormente l'area. Nel processo usando l'app, si sarà notato che i pulsanti attivare Left e Right attivare non funzionano più.
Chiudere l'applicazione e tornare a Visual Studio e modificare i gestori eventi per i pulsanti attivare. Per modificare l'intestazione della vista StreetSide, la proprietà di intestazione del controllo mappa deve essere modificato direttamente. Per rilevare se StreetSide visualizzazione è abilitata, verificare se la proprietà esperienza personalizzata non è null. Modificare i gestori eventi per attivare la sinistra e destra attivare pulsanti in modo che risultino come il codice nel figura 10.
Figura 10 aggiornato i gestori di eventi di rotazione per supportare la visualizzazione StreetSide
private async void btnRotateCameraLeft_Click(object sender, RoutedEventArgs e)
{
await mapControl.TryRotateAsync(-30);
if (mapControl.CustomExperience != null)
{
mapControl.Heading = mapControl.Heading - 30;
}
}
private async void btnRotateCameraRight_Click(object sender, RoutedEventArgs e)
{
await mapControl.TryRotateAsync(30);
if (mapControl.CustomExperience != null)
{
mapControl.Heading = mapControl.Heading + 30;
}
}
Eseguire nuovamente la soluzione e fare clic sul pulsante per attivare la visualizzazione StreetSide StreetSide. I pulsanti attivare Left e Right attivare ora lavorare. Vale la pena notare che, in vista 3D, l'impostazione della proprietà di intestazione del controllo mappa, in effetti, ruotare la vista della camera. Tuttavia, ciò avviene senza animazione di punti tra effettua per una transizione approssimativa.
Conclusioni
Come menzionato nel mio articolo mese scorso, le mappe sono davvero una delle funzionalità più indispensabile dei dispositivi mobili. Con la transizione alle mappe digitali, mappe possono diventare non appena personalizzabile, ma interattiva e coinvolgenti. In questo articolo è stato illustrato come il controllo mappa incluso con la piattaforma UWP fornisce queste immagini 3D e le funzionalità interattive. Nella maggior parte dei casi, accedere al mapping servizi e immagini avviene senza alcun costo, lo sviluppatore.
Frank La Vigneè chief evangelist presso DataLeader.io, dove aiuta i clienti utilizzano analisi scientifica dei dati per cercare informazioni essenziali. Possiede un blog all'indirizzo FranksWorld.com e ha un YouTube canale TV al mondo chiamato Marco (FranksWorld.TV).
Grazie al seguente esperto tecnico Microsoft per la revisione dell'articolo: Rachel Appel