2016-09-14 4 views
0

MapControlにMapElementを追加していますが、MapControlを回転するとMapElementも一緒に回転します。要素に固定された見出しを付けることは可能ですか?UWP MapControl:MapElement fixed heading

MapElementでRotateTransformを使用しようとしましたが、要素が完全に消えているようです。

私は次のコードを使用しています:
また、<Planes:Airplane />オブジェクトは単なるカスタム描画パスです。

<Maps:MapControl x:Name="Map" Style="None" Grid.Row="2" TiltInteractionMode="GestureAndControl" ZoomInteractionMode="GestureAndControl" RotateInteractionMode="GestureAndControl" MapServiceToken="TOKEN HERE"> 
     <!-- Airplane Layer --> 
     <Planes:Airplane x:Name="Airplane" Type="Prop" MaxHeight="80" Maps:MapControl.NormalizedAnchorPoint="0.5,0.5" /> 
    </Maps:MapControl> 
+0

親アングルを回転しても要素の角度を変えない場合は、RotateTransform AngleをRotate Transform Angle of Parent Elementに設定する必要があります。 – AVK

+0

しかし、RotateTransformの角度を変更すると、文字通り地図が表示されなくなります。 –

+0

CenterXとCenterYは重要な役割を果たします。 CenterXとCenterYを0に設定している可能性があるため、平面が消えます。平面の幅と高さの半分である必要があります – AVK

答えて

3

私は自分のMapControlにMapElementを追加しているが、私はのMapControlを回転させたときに、私のMapElementは、それとともに回転します。要素に固定された見出しを付けることは可能ですか?

MapElementRenderTransformの起源である、UIElementから継承されません。したがって、MapElementでRenderTransformを使用することはできません。

しかし、回避策として、MapItemsControlを使用して任意のコントロールまたは画像をマップに配置し、MapControlを回転させたときに画像を回転または平行移動することができます。

MainPage.xamlを:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <StackPanel VerticalAlignment="Center"> 
     <Maps:MapControl 
     Width="500" 
     Height="500" 
     x:Name="myMap"    
     ZoomInteractionMode="GestureAndControl" 
     TiltInteractionMode="GestureAndControl" 
     MapServiceToken="RJRqnypOQjjYoi6JxDOU~ObLGsO4GuIpqfRBu-7U5_A~AiqxkstUMp1CBfdrCfIX-B9UAha0CJ2hM3--ZVXOdW2j8-l6bG40Po_wL5gWNQgo"> 
      <Maps:MapItemsControl x:Name="mapItems"> 
       <Maps:MapItemsControl.ItemTemplate> 
        <DataTemplate> 
         <StackPanel> 
          <Image Source="{Binding ImageSourceUri}" 
            Maps:MapControl.Location="{Binding Location}"> 
           <Image.RenderTransform> 
            <TransformGroup> 
             <RotateTransform Angle="{Binding Rotate.Angle}" 
                 CenterX="{Binding Rotate.CenterX}" 
                 CenterY="{Binding Rotate.CenterY}"/> 
             <TranslateTransform X="{Binding Translate.X}" 
                  Y="{Binding Translate.Y}"/> 
            </TransformGroup> 
           </Image.RenderTransform> 
          </Image> 
         </StackPanel> 
        </DataTemplate> 
       </Maps:MapItemsControl.ItemTemplate> 
      </Maps:MapItemsControl> 
     </Maps:MapControl> 
     <Button Name="myAdd" Click="myAdd_Click">Click Me to Add Element</Button> 
     <Button Name="btnRotate" Click="btnRotate_Click">Click Me to Rotate Element</Button> 
    </StackPanel> 
</Grid> 

MainPage.xaml.cs:

public class InterestPoint 
{ 
    public Uri ImageSourceUri { get; set; } 
    public Geopoint Location { get; set; } 
    public RotateTransform Rotate{ get; set; } 
    public TranslateTransform Translate { get; set; } 
    public Point CenterPoint { get; set; } 
} 
public sealed partial class MainPage : Page 
{ 
    public MainPage() 
    { 
     this.InitializeComponent(); 
    } 

    private List<InterestPoint> InitInterestPoints(BasicGeoposition location) 
    { 
     List<InterestPoint> points = new List<InterestPoint>(); 
     points.Add(new InterestPoint { 
      ImageSourceUri = new Uri("ms-appx:///Assets/mappin.png"), 
      Location = new Geopoint(location), 
      Rotate=new RotateTransform 
      { 
       Angle=15, 
       CenterX=28.5, 
       CenterY=88 
      }, 
      Translate=new TranslateTransform 
      { 
       X=-28.5, 
       Y=-90 
      } 
     }); 

     return points; 
    } 

    private void myAdd_Click(object sender, RoutedEventArgs e) 
    { 
     mapItems.ItemsSource = InitInterestPoints(myMap.Center.Position); 
    } 

    private void btnRotate_Click(object sender, RoutedEventArgs e) 
    { 
     var points = mapItems.ItemsSource as List<InterestPoint>; 
     points[0].Rotate.Angle += 10; 
    } 
} 

ここでは効果あり: enter image description here

そして、ここでは全体のデモへのリンクです:MapElementRotationSample

注:左上の点をアンカーポイントとしてイメージが追加されます。画像サイズに合わせて画像を翻訳する必要があります(私の画像は57 * 90なので針の点を中心点にするためにそれを変換する必要があります(-28.5、-88)。

+0

地図を回転させると画像が回転しますが、その部分は簡単に修正できるはずです。私が唯一問題となっているのは、パスとイメージを使用しているので、私が何かをしたときに消えていくからです。 –

+0

私が持っている1つの問題は、何らかの理由でアイコンが左上隅に表示されているということです。 –

+0

アイコンは 'Maps:MapControl.Location'に基づいて表示されます。したがって、この場所がマップの中心点ではない場合。アイコンは他の場所に表示されます。 –