在 MapControl UWP 中自定义 MapIcon答案

【问题标题】：Customize MapIcon in MapControl UWP在 MapControl UWP 中自定义 MapIcon
【发布时间】：2016-10-18 14:37:02
【问题描述】：

我正在为 UWP 开发应用程序。我的目的是优化 bing map 上的地图点渲染。我从使用 map.children.add() 操作对自定义标记进行聚类开始。在集群引脚组之后，我在 xaml 中添加带有生成的依赖对象的引脚。地图上的每个更改位置都会刷新当前显示的所有图钉。它的工作非常缓慢。所以我尝试使用 MapElement.Add()。它工作正常，但我不能添加通用图像（xaml）代码（_native 地图为 MapControl）：

 var mapIcon = new MapIcon();
    mapIcon.Image = RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Images/icon.png"));
    mapIcon.Location = new Geopoint(snPosition);
    mapIcon.Title = "Some label".ToString();
    _nativemap.MapElements.Add(mapIcon);

有什么方法可以自定义 mapIcon 的标签（位置、颜色等）或从 xaml 文件生成流以将其显示为实际的 mapIcon 图像？？

【问题讨论】：

你的代码没有问题，你想要什么？在 xaml 代码中添加 mapicon 而不在后面的代码中生成它？
在地图上添加带有图像的mapicon作为流（由xaml生成）

标签： c# win-universal-app bing uwp-maps

【解决方案1】：

在地图上添加带有图像的 mapicon 作为流（由 xaml 生成）

我不知道您是如何通过 xaml 生成图像流的，我猜您有一个控件或其他东西，并且您使用 RenderTargetBitmap 生成一个图像源，该图像源填充了 XAML 可视化树的组合内容。然后你可以使用BitmapEncoder创建一个InMemoryRandomAccessStream。

为了演示如何使用BitmapEncoder，我这里以官方MapControl sample的场景1为例：

为MapIcon 创建一个SymbolIcon 并创建一个Button 以将MapIcon 放在地图上：

<Grid x:Name="imgContainer" Margin="0,5" Width="20" Height="25">
    <SymbolIcon Symbol="AddFriend" Foreground="Red" />
</Grid>
<Button Content="Place MapIcon" Click="Button_Click" />

后面的代码：

private async void Button_Click(object sender, RoutedEventArgs e)
{
    //render symbolicon to bmp
    RenderTargetBitmap renderbmp = new RenderTargetBitmap();
    await renderbmp.RenderAsync(imgContainer);

    using (InMemoryRandomAccessStream stream = new InMemoryRandomAccessStream())
    {
        //create a bitmap encoder
        BitmapEncoder encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, stream);
        //write pixels into this encoder
        var pixels = await renderbmp.GetPixelsAsync();
        var reader = DataReader.FromBuffer(pixels);
        byte[] bytes = new byte[reader.UnconsumedBufferLength];
        reader.ReadBytes(bytes);
        encoder.SetPixelData(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Straight,
            (uint)renderbmp.PixelWidth, (uint)renderbmp.PixelHeight, 0, 0, bytes);
        await encoder.FlushAsync();
        mapIconStreamReference = RandomAccessStreamReference.CreateFromStream(stream);

        //create mapIcon
        var mapIcon = new MapIcon();
        mapIcon.Image = mapIconStreamReference;
        mapIcon.Location = new Geopoint(myMap.Center.Position);
        mapIcon.Title = "Some label".ToString();
        myMap.MapElements.Add(mapIcon);
    }
}

此演示的渲染图像：

【讨论】：