ArcGIS API for Silverlight中載入Google地形圖（瓦片圖）

標籤：

原文: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地形圖上明顯看出黃山市的範圍：

 

 

 

 

===========================================================================

如果覺得對您有協助，掃一掃支援一下：

ArcGIS API for Silverlight中載入Google地形圖（瓦片圖）