必应地图控件上的地图折线

Question

我正在开发 UWP 导航应用。

我想做什么？

1. 我想在 Map 控件上绘制多条（准确地说是 10 条）折线。
2. 我想要一个是不同的颜色，而其他的是灰色的。
3. 选择任意一条折线后，新选择的折线将变为原色，而其他折线为灰色。类似于地图应用的多条路线，只是在更大的范围内显示运输卡车的移动。

网上到处都有通过 c# 或代码实现折线的方法，但我想通过 XAML 来实现，因为从代码隐藏中添加 10 条折线在事件和不透明度以及标签和名称方面没有太大的灵活性。

我都尝试了什么：

我尝试为 mapElement 创建附加的折线，但该方法的问题是我每次都必须删除并重新创建折线以更改颜色。更多关于这个here。此外，这只是从后面的代码实现折线的一种很好的方式。

我目前在做什么：

我在Page.Resources 中添加了折线的 DataTemplate，如下所示：

 <DataTemplate x:Key="PolylineDataTemplate" x:DataType="polyLineData:IPolylinePath">
        <Polyline Points="{x:Bind Polyline,Mode=OneWay}" Fill="{x:Bind PolylineColor,Mode=OneWay}" Tag="{x:Bind PolylineTag,Mode=OneWay}" StrokeThickness="{x:Bind PolylineThinkness}" />
    </DataTemplate>`

其中 IPolylinePath 定义为：

public interface IPolylinePath
{
    SolidColorBrush PolylineColor { get; set; }

    int PolylineThinkness { get; set; }

    string PolylineTag { get; set; }

    IEnumerable<IBasicGeoposition> PolylinePoints { get; set; }

    Geopath PolylineGeopath { get; }

    PointCollection Polyline { get; }
}`

我的Polyline 属性填充如下：

 public PointCollection Polyline
    {
        get
        {
            PointCollection returnObject = new PointCollection();
            //could have used LINQ but wanted to check if the collection is being populated correctly
            foreach (var location in PolylinePoints)
            {
                returnObject.Add(new Windows.Foundation.Point(location.Latitude, location.Longitude));
            }
            return returnObject;
        }
    }

我只是在 MapItems 控件中调用它，如下所示：

<maps:MapControl x:Name="MyMap"  >
                <maps:MapItemsControl ItemTemplate="{StaticResource PolylineDataTemplate}" ItemsSource="{x:Bind ViewModel.PolylinePoints}"/>
            </maps:MapControl>

问题是：

代码运行良好。只是折线不可见。 我以为它只是很小，所以我看不到它。所以我增加了大小和距离，它只是在左上角显示为一个小弧（有一些间距），并且没有被限定或平移。

有人可以帮忙吗？

Answer 1

只是折线不可见。

首先，您似乎没有为Polyline 提供Stoke 属性，默认情况下它为空。你的代码 sn -p set color with Fill 属性不是线的颜色，你可能会发现StrokeThickness 的值与Polyline 没有影响，没有@ 就看不到直线987654338@财产。所以这里的颜色应该绑定到Stroke属性。

它只是在左上角显示为一个小弧

这是因为您通过代码行 new Windows.Foundation.Point(location.Latitude, location.Longitude) 为 Polyline 构建了 Points 属性的点。 纬度和经度定义了MapControl 上的元素位置，而不是应用程序视图。换句话说，实际上您将GeoPoint 添加到PointCollection，而不是Point。所以你可能需要通过GetOffsetFromLocation(Geopoint, Point)方法将GeoPoint转移到Point。

不会被限定或平移。

为此，Polyline 实际上是 shape 而不是 MapElement。你应该通过监听地图缩放事件来控制它的MapLocation。如果你希望它与地图一起平移，你应该使用Map​Polyline。有关此示例，请参考official sample 的场景 2。但是MapPolyline不能通过绑定直接添加，只能在后面加代码。

根据您的测试完成的简单示例如下：

XAML

<Page.Resources>
   <DataTemplate x:Key="PolylineDataTemplate" x:DataType="local:PolylinePath">
       <Polyline
           Points="{x:Bind Polyline}"
           Stroke="{x:Bind PolylineColor}"
           StrokeThickness="{x:Bind PolylineThinkness}"
           Tag="{x:Bind PolylineTag}" />
   </DataTemplate>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
   <maps:MapControl x:Name="MyMap" Loaded="MyMap_Loaded">
       <maps:MapItemsControl x:Name="mapitems" ItemTemplate="{StaticResource PolylineDataTemplate}" />
   </maps:MapControl>
   <Button
       x:Name="btnaddpolyline"
       Click="btnaddpolyline_Click"
       Content="add" />
</Grid>

后面的代码：

public sealed partial class MainPage : Page
{
    public List<PolylinePath> polylines { get; set; }
    Geopoint SeattleGeopoint = new Geopoint(new BasicGeoposition() { Latitude = 47.604, Longitude = -122.329 });       
    public MainPage()
    {
        this.InitializeComponent();
    }
    private void MyMap_Loaded(object sender, RoutedEventArgs e)
    {
        MyMap.Center = SeattleGeopoint;
        MyMap.ZoomLevel = 16;
    }
    private void btnaddpolyline_Click(object sender, RoutedEventArgs e)
    {
        polylines = new List<PolylinePath>()
        {
            new PolylinePath(MyMap)
            {
                PolylineColor=new SolidColorBrush(Colors.Red),
                PolylineThinkness=3,
                PolylineTag="testing",
                PolylinePoints = new List<BasicGeoposition>()
                {
                    SeattleGeopoint.Position,
                    new BasicGeoposition()
                    {
                        Latitude = SeattleGeopoint.Position.Latitude + 0.003,
                        Longitude = SeattleGeopoint.Position.Longitude - 0.003
                    }
                }
            }
        };
        mapitems.ItemsSource = polylines;
    }
}
public class PolylinePath
{
    public PolylinePath(MapControl MyMap)
    {
        this.MyMap = MyMap;
    }
    MapControl MyMap;
    public SolidColorBrush PolylineColor { get; set; }

    public int PolylineThinkness { get; set; }

    public string PolylineTag { get; set; }

    public IEnumerable<BasicGeoposition> PolylinePoints { get; set; }

    public PointCollection Polyline
    {
        get
        {
            PointCollection returnObject = new PointCollection();
            //could have used LINQ but wanted to check if the collection is being populated correctly
            foreach (var location in PolylinePoints)
            {
                Point actualpoint;
                MyMap.GetOffsetFromLocation(new Geopoint(location), out actualpoint);
                returnObject.Add(actualpoint);
            }
            return returnObject;
        }
    }
}