原文:ArcGIS API for Silverlight中加载Google地形图(瓦片图)
在做水利、气象、土地等行业中,若能使用到Google的地形图那是再合适不过了,下面就介绍如何在ArcGIS API for Silverlight中加载Google地
形图。先上一个图,初步制作,待后续继续改进
ArcGIS API for Silverlight 中的ArcGISTiledMapServiceLayer图层,继承自TiledMapServiceLayer。如果想实现自己的缓存地图图
层,继承它并重载GetTileUrl方法就可以了。ArcGIS API for Silverlight 内部会计算当前访问的缩放等级level,切片二维编号row,
col。这些参数暴露给GetTileUrl方法,在这个方法里面设置访问google静态地图的Url地址。
1、在Silverlight项目中新建一个文件夹,并添加一个名为GoogleTopographicLayer.cs文件,内容如下:
using System; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Ink; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using ESRI.ArcGIS.Client; using ESRI.ArcGIS.Client.Geometry; namespace GoogleMap.CommonClass { public class GoogleTopographicLayer: TiledMapServiceLayer { private const double cornerCoordinate = 20037508.3427892; private string _baseURL = "[email protected]"; //google地形图 public override void Initialize() { ESRI.ArcGIS.Client.Projection.WebMercator mercator = new ESRI.ArcGIS.Client.Projection.WebMercator(); this.FullExtent = new ESRI.ArcGIS.Client.Geometry.Envelope(-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892) { SpatialReference = new SpatialReference(102100) }; //图层的空间坐标系 this.SpatialReference = new SpatialReference(102100); // 建立切片信息,每个切片大小256*256px,共16级. this.TileInfo = new TileInfo() { Height = 256, Width = 256, Origin = new MapPoint(-cornerCoordinate, cornerCoordinate) { SpatialReference = new ESRI.ArcGIS.Client.Geometry.SpatialReference(102100) }, Lods = new Lod[16] }; //为每级建立方案,每一级是前一级别的一半. double resolution = cornerCoordinate * 2 / 256; for (int i = 0; i < TileInfo.Lods.Length; i++) { TileInfo.Lods[i] = new Lod() { Resolution = resolution }; resolution /= 2; } // 调用初始化函数 base.Initialize(); } public override string GetTileUrl(int level, int row, int col) { string url = "http://mt" + (col % 4) + ".google.cn/vt/lyrs=" + _baseURL + "&v=w2.114&hl=zh-CN&gl=cn&" + "x=" + col + "&" + "y=" + row + "&" + "z=" + level + "&s=Galil"; if (_baseURL == "[email protected]") { url = "http://mt" + (col % 4) + ".google.cn/vt/lyrs=" + _baseURL + "&v=w2.114&hl=zh-CN&gl=cn&" + "x=" + col + "&" + "y=" + row + "&" + "z=" + level + "&s=Galil"; //加载Google遥感图 } if (_baseURL == "[email protected]") { url = "http://mt" + (col % 4) + ".google.cn/vt/lyrs=" + _baseURL + ",[email protected]&v=w2.114&hl=zh-CN&gl=cn&" + "x=" + col + "&" + "y=" + row + "&" + "z=" + level + "&s=Galil";//加载Google地形图 } if (_baseURL == "[email protected]") { url = "http://mt" + (col % 4) + ".google.cn/vt/lyrs=" + _baseURL + "&v=w2.114&hl=zh-CN&gl=cn&" + "x=" + col + "&" + "y=" + row + "&" + "z=" + level + "&s=Galil"; //加载Google街道图 } return string.Format(url); //调用加载初始的Google街道地图 //string baseUrl = "http://mt2.google.cn/vt/v=w2.116&hl=zh-CN&gl=cn&x={0}&y={1}&z={2}&s=G"; //return string.Format(baseUrl, col, row, level); } } } //以上显示的Google地图类型,有三种,根据需要,可以修改变量_baseURL的初始值即可。
2、Silverlight项目中的MainPage.xaml文件内容如下:
<UserControl x:Class="GoogleMap.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:esri="http://schemas.esri.com/arcgis/client/2009" xmlns:controlsToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" xmlns:layer="clr-namespace:GoogleMap.CommonClass" d:DesignHeight="300" d:DesignWidth="400" Loaded="UserControl_Loaded"> <Grid x:Name="LayoutRoot" Background="White"> <esri:Map x:Name="myMap" IsLogoVisible="False" ZoomDuration="0:00:02" PanDuration="0:00:02"> </esri:Map> </Grid> </UserControl>
3、Silverlight项目中的MainPage.xaml.cs文件内容如下:
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using TestDZX.CommonClass; using ESRI.ArcGIS.Client.Geometry; using ESRI.ArcGIS.Client; namespace GoogleMap { public partial class MainPage: UserControl { ESRI.ArcGIS.Client.Projection.WebMercator mercator = new ESRI.ArcGIS.Client.Projection.WebMercator(); public MainPage() { InitializeComponent(); } private void UserControl_Loaded(object sender, RoutedEventArgs e) { GoogleTopographicLayerlayer = new GoogleTopographicLayer(); myMap.Layers.Add(layer); } } }
4、完成以上步骤后,运行,可以看见Google地形图了,just try it,have fun!
5、补充:这里使用的是墨卡托坐标,而我们经常使用的是经纬度坐标,这就需要做转换,下面提供一个类,WKIDConvert.cs,内容
如下:
using System; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Ink; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using ESRI.ArcGIS.Client.Geometry; namespace GoogleMap.CommonClass { public static class WKIDConvert { //经纬度转墨卡托 public static MapPoint lonlat2mercator(MapPoint lonlat) { MapPoint mercator = new MapPoint(); double X = lonlat.X * 20037508.34 / 180; double Y = Math.Log(Math.Tan((90 + lonlat.Y) * Math.PI / 360)) / (Math.PI / 180); Y = Y * 20037508.34 / 180; mercator.X = X; mercator.Y = Y; return mercator; } //墨卡托转经纬度 public static MapPoint mercator2lonlat(MapPoint mercator) { MapPoint lonlat = new MapPoint(); double X = mercator.X / 20037508.34 * 180; double Y = mercator.Y / 20037508.34 * 180; Y = 180 / Math.PI * (2 * Math.Atan(Math.Exp(Y * Math.PI / 180)) - Math.PI / 2); lonlat.X = X; lonlat.Y = Y; return lonlat; } } }
然后我们如果要定位到某个城市的话,比如黄山市,其Extent为:117.647738815324,29.4704217183843,118.446182957997,30.4124245048916
我们这里为MainPage.xaml.cs中添加一行代码即可定位到黄山市范围
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
GoogleTopographicLayer layer = new GoogleTopographicLayer();
myMap.Layers.Add(layer);
myMap.Extent = new Envelope(WKIDConvert.lonlat2mercator(new MapPoint(117.647738815324, 29.4704217183843)), WKIDConvert.lonlat2mercator(new MapPoint(118.446182957997, 30.4124245048916)));
}
6、再次补充:在之前的Google地形图上叠加自定义ArcMap地图,可以是动态图也可以是静态图,只要加上发布的地图,即可显示,在MainPage.xaml.cs中添加如下几行代码即可。
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
//叠加Google地形图瓦片
GoogleTopographicLayer layer = new GoogleTopographicLayer();
myMap.Layers.Add(layer);
layer.Opacity = 1;
//加载动态图
ESRI.ArcGIS.Client.ArcGISDynamicMapServiceLayer dLayer = new ESRI.ArcGIS.Client.ArcGISDynamicMapServiceLayer();
myMap.Layers.LayersInitialized += (evtsender, args) =>
{
myMap.ZoomTo(dLayer.InitialExtent);
};
dLayer.Url = "http://localhost/arcgis/rest/services/HS/MapServer/";
myMap.Layers.Add(dLayer);
dLayer.Opacity = 1;
myMap.Extent = new Envelope(WKIDConvert.lonlat2mercator(new MapPoint(117.647738815324, 29.4704217183843)), WKIDConvert.lonlat2mercator(new MapPoint(118.446182957997, 30.4124245048916)));
}
效果图如下,这里只是做了黄山市的市界边线,主要作用就是在Google地形图上明显看出黄山市的范围:
===========================================================================
如果觉得对您有帮助,微信扫一扫支持一下: