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

Question

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

\n\n

我已经开始了一个小实验项目，看看我是否可以在缩放时加载图块，它是否有效，代码如下：

\n\n

    <ScrollViewer Margin="10" PanningMode="Both" HorizontalScrollBarVisibility="Visible">\n        <Canvas x:Name="lyrTiles" Height="3000" Width="3000"/>\n    </ScrollViewer>\n\n    <Grid x:Name="lyrControl" Margin="10">\n        <Button x:Name="moveUp" Content="U" HorizontalAlignment="Left" Margin="35,10,0,0" VerticalAlignment="Top" Width="20" Height="20"/>\n        <Button x:Name="moveRight" Content="R" HorizontalAlignment="Left" Margin="55,30,0,0" VerticalAlignment="Top" Width="20" Height="20"/>\n        <Button x:Name="moveDown" Content="D" HorizontalAlignment="Left" Margin="35,50,0,0" VerticalAlignment="Top" Width="20" Height="20"/>\n        <Button x:Name="moveLeft" Content="L" HorizontalAlignment="Left" Margin="15,30,0,0" VerticalAlignment="Top" Width="20" Height="20"/>\n        <Button x:Name="zoomIn" Content="ZI" HorizontalAlignment="Left" Margin="35,81,0,0" VerticalAlignment="Top" Width="20" Height="20"/>\n        <Button x:Name="zoomOut" Content="ZO" HorizontalAlignment="Left" Margin="35,311,0,0" VerticalAlignment="Top" Width="20" Height="20"/>\n        <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"/>\n        <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"/>\n        <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"/>\n        <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"/>\n        <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"/>\n        <Label x:Name="copyright" Content="Map data \xc2\xa92014 Google" HorizontalAlignment="Right" VerticalAlignment="Bottom" Padding="0" Width="200" FontSize="10" FontFamily="Calibri" FontWeight="Bold"/>\n    </Grid>\n    <Canvas x:Name="lyrActive" Margin="10,10,27,28" MouseWheel="lyrActive_MouseWheel" Background="#00000000"/>\n\n\n\n\n    public int zoomLevel = 0;\n    public int zoomWidth = 2;\n\n    public MainWindow()\n    {\n        InitializeComponent();\n\n        Image i = new Image(); i.Width = 250; i.Height = 250; i.Margin = new Thickness(0, 0, 0, 0);\n        i.Source = new BitmapImage(new Uri("https://a.tiles.mapbox.com/v3/examples.map-9ijuk24y/0/0/0.png"));\n        lyrTiles.Children.Add(i);\n    }\n\n    private void lyrActive_MouseWheel(object sender, MouseWheelEventArgs e)\n    {\n        if (e.Delta > 0)\n        {\n            lyrTiles.Children.Clear();\n            zoomLevel += 1; zoomWidth = zoomWidth + zoomWidth / 2;\n            for (int x = 0; x < zoomWidth; x++)\n            {\n                for (int y = 0; y < zoomWidth; y++)\n                {\n                    lyrTiles.Children.Add(new Image()\n                    {\n                        Margin = new Thickness(250 * x, 250 * y, 0, 0),\n                        Source = new BitmapImage(new Uri("https://a.tiles.mapbox.com/v3/examples.map-9ijuk24y/" + zoomLevel + "/" + x + "/" + y + ".png"))\n                    });\n                }\n            }\n        }\n    }\n\n    private void ScrollViewer_MouseWheel(object sender, MouseWheelEventArgs e)\n    {\n        if (e.Delta > 0)\n        {\n            lyrTiles.Children.Clear();\n            zoomLevel += 1; zoomWidth = zoomWidth + zoomWidth / 2;\n            for (int x = 0; x < zoomWidth; x++)\n            {\n                for (int y = 0; y < zoomWidth; y++)\n                {\n                    lyrTiles.Children.Add(new Image()\n                    {\n                        Margin = new Thickness(250 * x, 250 * y, 0, 0),\n                        Source = new BitmapImage(new Uri("https://a.tiles.mapbox.com/v3/examples.map-9ijuk24y/" + zoomLevel + "/" + x + "/" + y + ".png"))\n                    });\n                }\n            }\n        }\n    }\n

\n\n

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

\n\n

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

\n

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