从头开始创建一个简单的WPF地图控件

Question

我真的很想在WPF中创建自己的地图控件，因为唯一适合我的要求的就是Google Maps JavaScript API，因为它几乎可以完成我需要的所有操作，但仅适用于Web和移动设备，我已经尝试过Bing和ESRI地图，但是他们做不到我想要的。

我已经开始了一个小实验项目，以查看在缩放时是否可以加载图块，并且它可以正常工作，这是代码：

    <ScrollViewer Margin="10" PanningMode="Both" HorizontalScrollBarVisibility="Visible">
        <Canvas x:Name="lyrTiles" Height="3000" Width="3000"/>
    </ScrollViewer>

    <Grid x:Name="lyrControl" Margin="10">
        <Button x:Name="moveUp" Content="U" HorizontalAlignment="Left" Margin="35,10,0,0" VerticalAlignment="Top" Width="20" Height="20"/>
        <Button x:Name="moveRight" Content="R" HorizontalAlignment="Left" Margin="55,30,0,0" VerticalAlignment="Top" Width="20" Height="20"/>
        <Button x:Name="moveDown" Content="D" HorizontalAlignment="Left" Margin="35,50,0,0" VerticalAlignment="Top" Width="20" Height="20"/>
        <Button x:Name="moveLeft" Content="L" HorizontalAlignment="Left" Margin="15,30,0,0" VerticalAlignment="Top" Width="20" Height="20"/>
        <Button x:Name="zoomIn" Content="ZI" HorizontalAlignment="Left" Margin="35,81,0,0" VerticalAlignment="Top" Width="20" Height="20"/>
        <Button x:Name="zoomOut" Content="ZO" HorizontalAlignment="Left" Margin="35,311,0,0" VerticalAlignment="Top" Width="20" Height="20"/>
        <Slider x:Name="zoomSlider" HorizontalAlignment="Left" Margin="35,106,0,0" VerticalAlignment="Top" Orientation="Vertical" Height="200" Width="20" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" Interval="1"/>
        <Button x:Name="typeHybrid" Content="Hybrid" HorizontalAlignment="Right" Margin="0,10,65,0" VerticalAlignment="Top" Width="50" Height="15" Padding="0,-1,0,0" FontSize="10"/>
        <Button x:Name="typeTerrain" Content="Terrain" HorizontalAlignment="Right" Margin="0,10,10,0" VerticalAlignment="Top" Width="50" Height="15" Padding="0,-1,0,0" FontSize="10"/>
        <Button x:Name="typeSatellite" Content="Satellite" HorizontalAlignment="Right" Margin="0,10,120,0" VerticalAlignment="Top" Width="50" Height="15" Padding="0,-1,0,0" FontSize="10"/>
        <Button x:Name="typeRoad" Content="Road" HorizontalAlignment="Right" Margin="0,10,175,0" VerticalAlignment="Top" Width="50" Height="15" Padding="0,-1,0,0" FontSize="10"/>
        <Label x:Name="copyright" Content="Map data ©2014 Google" HorizontalAlignment="Right" VerticalAlignment="Bottom" Padding="0" Width="200" FontSize="10" FontFamily="Calibri" FontWeight="Bold"/>
    </Grid>
    <Canvas x:Name="lyrActive" Margin="10,10,27,28" MouseWheel="lyrActive_MouseWheel" Background="#00000000"/>




    public int zoomLevel = 0;
    public int zoomWidth = 2;

    public MainWindow()
    {
        InitializeComponent();

        Image i = new Image(); i.Width = 250; i.Height = 250; i.Margin = new Thickness(0, 0, 0, 0);
        i.Source = new BitmapImage(new Uri("https://a.tiles.mapbox.com/v3/examples.map-9ijuk24y/0/0/0.png"));
        lyrTiles.Children.Add(i);
    }

    private void lyrActive_MouseWheel(object sender, MouseWheelEventArgs e)
    {
        if (e.Delta > 0)
        {
            lyrTiles.Children.Clear();
            zoomLevel += 1; zoomWidth = zoomWidth + zoomWidth / 2;
            for (int x = 0; x < zoomWidth; x++)
            {
                for (int y = 0; y < zoomWidth; y++)
                {
                    lyrTiles.Children.Add(new Image()
                    {
                        Margin = new Thickness(250 * x, 250 * y, 0, 0),
                        Source = new BitmapImage(new Uri("https://a.tiles.mapbox.com/v3/examples.map-9ijuk24y/" + zoomLevel + "/" + x + "/" + y + ".png"))
                    });
                }
            }
        }
    }

    private void ScrollViewer_MouseWheel(object sender, MouseWheelEventArgs e)
    {
        if (e.Delta > 0)
        {
            lyrTiles.Children.Clear();
            zoomLevel += 1; zoomWidth = zoomWidth + zoomWidth / 2;
            for (int x = 0; x < zoomWidth; x++)
            {
                for (int y = 0; y < zoomWidth; y++)
                {
                    lyrTiles.Children.Add(new Image()
                    {
                        Margin = new Thickness(250 * x, 250 * y, 0, 0),
                        Source = new BitmapImage(new Uri("https://a.tiles.mapbox.com/v3/examples.map-9ijuk24y/" + zoomLevel + "/" + x + "/" + y + ".png"))
                    });
                }
            }
        }
    }

这是我应该渲染图块的正确方法吗？ 我知道我必须删除那些不可见的对象，但这只是一个非常非常简单的项目，以查看我实际上可以做的地图。 我如何开始使这项工作更好？

另外，我认为最大和最重要的事情就是坐标，因为从定位地图中心开始，它们就被广泛使用，以便可以下载正确的图块，再到在特定位置放置标记。 我该怎么办？我需要某种巨大的纬度和经度轴吗？

Answer 1

这里有一些项目可以节省您一些工作：

开源：

• http://www.codeproject.com/Articles/238551/WPF-Map-App-WPF-meets-Google-Geocoding-Static-Maps
• http://xamlmapcontrol.codeplex.com/
• http://greatmaps.codeplex.com/
• http://wpfsharpmapcontrols.codeplex.com/

商业：

• http://thinkgeo.com/map-suite-developer-gis/wpf-edition/
• http://resources.arcgis.com/en/help/runtime-wpf/concepts/index.html#//017000000031000000
• https://www.carmenta.com/en/products/carmenta-engine/overview
• http://www.componentsource.com/products/componentart-maps-for-wpf/index-gbp.html

如果您不介意使用Bing：

• http://msdn.microsoft.com/en-us/library/hh750210.aspx
• http://visualstudiomagazine.com/Articles/2012/04/01/Map-Your-Apps.aspx?Page=1