Introduzione
In questo nuovo articolo vedremo come ruotare ed inclinare la mappa, una tecnica che può tornare utile nelle situazioni in cui dobbiamo permettere all’utente di fornire una prospettiva della mappa con una determinata visualizzazione.
Creazione del progetto
Create un nuovo progetto Silverlight, ed inserite nella form il consueto controllo per la gestione delle mappe ossia il controllo “Map”.
A questo punto dobbiamo posizionare sul controllo map due controlli, una slider che permette di inclinare la mappa a seconda di quanto la si vuole inclinare, dando così all’utente la possibilità di inclinarlo in riferimento alle proprie esigenze.
Inseriamo anche un controllo textbox, in questo modo verrà visualizzato il valore che si sta impostando.
Terminata tale operazione, inseriamo altro controllo slider e textbox, questa volta per la rotazione.
Il progetto dovrà essere simile a quello visibile in figura 1.
Figura 5 – l’interfaccia grafica
Qui di seguito si riporta il codice XAML completo che esamineremo parte per parte
<Grid x:Name="LayoutRoot" Background="White">
<Grid.Projection>
<PlaneProjection x:Name="MyPlaneProjection" RotationX="{Binding Value, ElementName=sliderInclinazione}" />
</Grid.Projection>
<esri:Map Background="Transparent" HorizontalAlignment="Left" Name="Map1" VerticalAlignment="Top" WrapAround="True" Rotation="{Binding Value, ElementName=sliderRotazione}" Height="300" Width="414" Margin="-34,-16,0,0">
<esri:Map.Layers>
<esri:LayerCollection>
<esri:ArcGISTiledMapServiceLayer Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer" />
</esri:LayerCollection>
</esri:Map.Layers>
</esri:Map>
<Border Background="#99FFFFFF" BorderBrush="#99999999" BorderThickness="1" Padding="5"
HorizontalAlignment="Left" VerticalAlignment="Top" Margin="6,12,0,0" >
<Slider x:Name="sliderInclinazione" Minimum="-70" Maximum="0" Width="Auto"
Value="0" Height="200" Orientation="Vertical"/>
</Border>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Bottom" Height="17" Margin="6,0,300,53" Width="94">
<Run Text="{Binding Value, Mode=OneWay, ElementName=sliderInclinazione, StringFormat=\{0:0.0\}}" />
<Run Text=" Inclinazione" />
</TextBlock>
<TextBlock Height="17" HorizontalAlignment="Center" Margin="291,237,33,0" VerticalAlignment="Top"><Run Text="{Binding Value, Mode=OneWay, ElementName=sliderRotazione, StringFormat=\{0:0.0\}}" /><Run Text=" Rotazione" /></TextBlock>
<Border Background="#99FFFFFF" BorderBrush="#99999999" BorderThickness="1" HorizontalAlignment="Left" Margin="328,15,0,0" Padding="5" VerticalAlignment="Top">
<Slider Height="200" Maximum="0" Minimum="-90" Name="sliderRotazione" Orientation="Vertical" Value="0" Width="Auto" />
</Border>
</Grid>
Vediamo in dettaglio il codice XAML che abbiamo appena riportato.
I controlli slider e Textblock, riguardano la rotazione e l’inclinazione, la proprietà Text del controllo TextBlock, permette di impostare il testo con i valori del livello che si sta impostando.
Qui di seguito si riporta il frammento di codice XAML di questi 4 controlli (due Slider e due Textblock).
<Border Background="#99FFFFFF" BorderBrush="#99999999" BorderThickness="1" Padding="5"
HorizontalAlignment="Left" VerticalAlignment="Top" Margin="6,12,0,0" >
<Slider x:Name="sliderInclinazione" Minimum="-70" Maximum="0" Width="Auto" Value="0" Height="200" Orientation="Vertical"/>
</Border>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Bottom" Height="17" Margin="6,0,300,53" Width="94">
<Run Text="{Binding Value, Mode=OneWay, ElementName=sliderInclinazione, StringFormat=\{0:0.0\}}" />
<Run Text=" Inclinazione" />
</TextBlock>
<TextBlock Height="17" HorizontalAlignment="Center" Margin="291,237,33,0" VerticalAlignment="Top"><Run Text="{Binding Value, Mode=OneWay, ElementName=sliderRotazione, StringFormat=\{0:0.0\}}" /><Run Text=" Rotazione" /></TextBlock>
<Border Background="#99FFFFFF" BorderBrush="#99999999" BorderThickness="1" HorizontalAlignment="Left" Margin="328,15,0,0" Padding="5" VerticalAlignment="Top">
<Slider Height="200" Maximum="0" Minimum="-90" Name="sliderRotazione" Orientation="Vertical" Value="0" Width="Auto" />
</Border>
Il controllo border premette di impostare un aspetto accattivante
La mappa viene inclinata, perché il controllo "Grid" è stato impostato il “PlaneProjection”.
Si riporta il frammento di codice
<Grid.Projection>
<PlaneProjection x:Name="MyPlaneProjection" RotationX="{Binding Value, ElementName=sliderInclinazione}" />
</Grid.Projection>
La proprietà “RotationX” viene impostata con il controllo Slider, in modo che permette l’inclinazione di tale controllo.
Vediamo ora la parte relativa alla mappa ed in particolare la sua rotazione.
Qui di seguito si riporta il frammento di codice
<esri:Map Background="Transparent" HorizontalAlignment="Left" Name="Map1" VerticalAlignment="Top" WrapAround="True" Rotation="{Binding Value, ElementName=sliderRotazione}" Height="300" Width="414" Margin="-34,-16,0,0">
<esri:Map.Layers>
<esri:LayerCollection>
<esri:ArcGISTiledMapServiceLayer Url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer" />
</esri:LayerCollection>
</esri:Map.Layers>
</esri:Map>
Come si vede dal codice precedentemente riportato, la proprietà "Rotation", è impostata con il controllo “Slider” in questo modo ad ogni spostamento del controllo, nel momento in cui si cambiano i valori, viene ruotata la nostra mappa.
Conclusioni
L’articolo ha voluto fornire alcune indicazioni su come gestire la visualizzazione della mappa o meglio controllo mappa.
Senza scrivere codice complesso, possiamo applicare tecniche per impostare una determinata visualizzata dettata dall’utente, in cui può interagire in maniera attiva per rendere lo studio del territorio secondo le proprie esigenze.