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

Creating a simple WPF map control from scratch

提问by Henry Hunt

I really want to create my own map control in WPF because the only one that would be suitable for my requirements would be the Google Maps JavaScript API because it can do almost anything I need but that is only for web and mobile and I have tried the Bing and ESRI maps but they can't do what I want.

我真的很想在 WPF 中创建我自己的地图控件，因为唯一适合我的要求的是 Google Maps JavaScript API，因为它几乎可以做我需要的任何事情，但这仅适用于网络和移动设备，我已经尝试过Bing 和 ESRI 地图，但他们不能做我想做的事。

I have started a little experiment project to see if I can load the tiles when zooming and it kind of works, here is the code:

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

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

Is this the correct way I should be rendering the tiles? I know I have to remove ones that are not visible but this is just a very very simple project to see what I can actually do to make a map. How can I start to make this work better?

这是我应该渲染瓷砖的正确方法吗？我知道我必须删除那些不可见的，但这只是一个非常非常简单的项目，看看我实际上可以做些什么来制作地图。我怎样才能开始使这项工作更好？

Also, I think that the biggest and most important thing will be the coordinates because they are used from everything from locating the centre of the map so it can download the correct tiles to placing markers at specific locations. How can I do this, do I need some sort of huge latitude and longitude axis?

此外，我认为最大和最重要的事情将是坐标，因为它们用于从定位地图中心的所有内容，以便它可以下载正确的图块到在特定位置放置标记。我该怎么做，我是否需要某种巨大的纬度和经度轴？

回答by Colin Smith

Here's a number of projects that might save you some work:

以下是一些可以为您节省一些工作的项目：

OpenSource:

开源：

• 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://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/

Commercial:

商业的：

• 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

• 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

If you don't mind using Bing:

如果您不介意使用 Bing：

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

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