3. Map上に線を引こう
今度はMapに線を引いてみましょう。
MapにはShapeを描画するためのクラスが用意されています。矩形を引く場合はMapPolygonクラス、線を引く場合はMapPolylineクラスを利用します。
また、MapLayerクラスを使うとレイヤーごとに要素をまとめることができます。例えばいくつもの表示オブジェクトがある場合、その切り替えをグループごとにしたい時に利用します。この例では、Map上に飯田橋駅からクラスメソッド株式会社までの順路をMapPolylineで表しています。
<!-- Bing Map -->
<Map:Map x:Name="map" Margin="0" d:LayoutOverrides="Width, Height" Grid.Row="2"
CredentialsProvider=" Bing Maps keysを記述"
Center="35.70358, 139.74392" ZoomLevel="17.0000"
ViewChangeOnFrame="map_ViewChangeOnFrame">
<Canvas x:Name="cmLogo" Width="40" Height="51" Map:MapLayer.Position="35.70358,139.74440" Map:MapLayer.PositionOrigin="BottomCenter" Background="Black" >
<Canvas.Effect>
<DropShadowEffect Opacity="0.5"/>
</Canvas.Effect>
<Image Source="logo.png" Margin="1" />
</Canvas>
<Map:MapLayer>
<Map:MapPolyline StrokeThickness="6" Locations="35.70358,139.74420 35.70278,139.74450 35.70274,139.74433 35.70210,139.74510" Opacity="0.9" >
<Map:MapPolyline.Effect>
<DropShadowEffect/>
</Map:MapPolyline.Effect>
<Map:MapPolyline.Stroke>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF00FF7E" Offset="0"/>
<GradientStop Color="Red" Offset="1"/>
</LinearGradientBrush>
</Map:MapPolyline.Stroke>
</Map:MapPolyline>
</Map:MapLayer>
<Map:Pushpin x:Name="stPin" Location="35.70200,139.74500" ToolTipService.ToolTip="飯田橋駅" Background="#FFCC3232" />
<Map:Pushpin x:Name="cmPin" Location="35.70358,139.74392" ToolTipService.ToolTip="クラスメソッド" Background="#FF003DE9" />
</Map:Map>
このようにMap上に線を引くことができます。
ただし、線は自由に引けますが位置をLocationで指定する必要があるため、複雑な図形の作成には向きません。そういった場合はCanvasクラスなどを配置してその中で図形を描画したほうがよいでしょう。
ここまでの作業でピンを配置して線をMap上に引きました。
まとめ
以上がMap上にコントロールを配置する基本になります。今回の例ではクラスメソッドの最寄りの駅からの順路を表示する想定でMap上にピンや線を配置していますが、いかがだったでしょうか。これまでの作業はBlendのみを使用して非常に簡単に行うことができます。ぜひBing Map SDKに挑戦してみてください。
