UWP MapControl:MapElement固定标题 [英] UWP MapControl: MapElement fixed heading

问题描述

我正在将MapElement添加到我的MapControl中，但是当我旋转MapControl时，我的MapElement随它一起旋转.元素上的标题是否可能固定?

I'm adding a MapElement to my MapControl but when I rotate the MapControl, my MapElement rotates along with it. Is it possible to have a fixed heading on the element?

我尝试过在MapElement上使用RotateTransform，但是Element似乎完全消失了.

I've tried using a RotateTransform on the MapElement but the Element seems to just completely disappear.

我正在使用以下代码:
另外，<Planes:Airplane />对象只是一个自定义绘制路径.

I'm using the following code:
Also, the <Planes:Airplane /> object is just a custom drawn path.

    <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>

推荐答案

我正在将MapElement添加到我的MapControl中，但是当我旋转MapControl时，我的MapElement随它一起旋转.元素上的标题可以固定吗?

I'm adding a MapElement to my MapControl but when I rotate the MapControl, my MapElement rotates along with it. Is it possible to have a fixed heading on the element?

MapElement 不继承自 UIElement ，它是RenderTransform的来源.因此，不可能在MapElement上使用RenderTransform.

MapElement doesn't inherit from UIElement, which is the origin of RenderTransform. So it is not possible to use RenderTransform on an MapElement.

但是，作为一种解决方法，您可以考虑使用 MapItemsControl 可以根据需要在地图上放置任何控件或图像，并且可以在旋转MapControl时旋转或平移图像.

But as a workaround you can consider using MapItemsControl to put any control or image on the map as you want and you can rotate or translate the image when you rotate the MapControl.

MainPage.Xaml:

MainPage.Xaml:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <StackPanel VerticalAlignment="Center">
        <Maps:MapControl
        Width="500"
        Height="500"
        x:Name="myMap"            
        ZoomInteractionMode="GestureAndControl"
        TiltInteractionMode="GestureAndControl"   
        MapServiceToken="MapServiceToken">
            <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:

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;
    }
}

效果如下:

这是整个演示的链接: MapElementRotationSample .

And Here is the link to the whole demo: MapElementRotationSample.

注意:添加图像时以左上点为锚点.因此，您需要根据图像大小来转换图像.(我的图像是57 * 90，所以我需要转换(-28.5，-88)以使针尖为中心).

Notes: The Image is added taking the left up point as anchor point. So you need to translate the image according to the image size.(My image is 57*90, so I need to translate it (-28.5,-88) to let the needle point be the center point).

这篇关于UWP MapControl:MapElement固定标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！