我想做什么？

我想在地图控件上绘制多条（10条准确）多段线。
我想要一个是不同的颜色，而其他颜色是灰色的。
选择任一折线后，新选定的折线将成为原色，而其他折线则显示为灰色。像地图应用程序，用于多个路线，只是在更大的范围内显示运输卡车的运动。

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

我尝试了什么：

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

我现在在做什么：

我在我的Page.Resources中添加了PolyLine的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

只是折线不可见。

首先，您似乎没有为Stoke提供Polyline属性，默认情况下它为null。您的代码段设置的颜色为Fill属性，而不是该行的颜色，您可能会发现StrokeThickness的值对Polyline没有影响，并且不会有直线看不到Stroke属性。所以这里的颜色应该绑定到Stroke属性。

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

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

没有范围或平移。

为此，Polyline实际上是shape而不是MapElement。您应该通过侦听地图缩放事件来控制其MapLocation。如果您希望它与地图一起使用，则应使用MapPolyline。有关此示例请参考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;
        }
    }
}

Bing地图控件上的地图折线

我想做什么？

我尝试了什么：

我现在在做什么：

问题是：

1 个答案: