ArcGIS API for Silverlight中加载Google地形图(瓦片图)

本文涉及的产品
文档翻译,文档翻译 1千页
文本翻译,文本翻译 100万字符
图片翻译,图片翻译 100张
简介:       在做水利、气象、土地等行业中,若能使用到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 = "t@128"; //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 == "s@92")
            {
                 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 == "t@128")
            {
                url = "http://mt" + (col % 4) + ".google.cn/vt/lyrs=" + _baseURL + ",r@169000000&v=w2.114&hl=zh-CN&gl=cn&" + "x=" + col + "&" + "y=" + row + "&" + "z=" + level + "&s=Galil";//加载Google地形图
             }
            if (_baseURL == "m@161000000")
            {
                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地形图上明显看出黄山市的范围:

 

 

 

 

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

如果觉得对您有帮助,微信扫一扫支持一下:


相关文章
|
4月前
|
SQL 网络协议 安全
【Azure API 管理】APIM集成内网虚拟网络后,启用自定义路由管理外出流量经过防火墙(Firewall),遇见APIs加载不出来问题
【Azure API 管理】APIM集成内网虚拟网络后,启用自定义路由管理外出流量经过防火墙(Firewall),遇见APIs加载不出来问题
|
5月前
|
自然语言处理 PyTorch API
`transformers`库是Hugging Face提供的一个开源库,它包含了大量的预训练模型和方便的API,用于自然语言处理(NLP)任务。在文本生成任务中,`transformers`库提供了许多预训练的生成模型,如GPT系列、T5、BART等。这些模型可以通过`pipeline()`函数方便地加载和使用,而`generate()`函数则是用于生成文本的核心函数。
`transformers`库是Hugging Face提供的一个开源库,它包含了大量的预训练模型和方便的API,用于自然语言处理(NLP)任务。在文本生成任务中,`transformers`库提供了许多预训练的生成模型,如GPT系列、T5、BART等。这些模型可以通过`pipeline()`函数方便地加载和使用,而`generate()`函数则是用于生成文本的核心函数。
|
5月前
|
API
支付系统----微信支付24--APlv3介绍,首先我们要引入支付参数,包含商户号,APPID、API秘钥,数字证书,用代码加载到应用程序当中,之后加载商户私钥,商户需要用私钥进行验签,微信平台接收商
支付系统----微信支付24--APlv3介绍,首先我们要引入支付参数,包含商户号,APPID、API秘钥,数字证书,用代码加载到应用程序当中,之后加载商户私钥,商户需要用私钥进行验签,微信平台接收商
|
人工智能 数据可视化 API
ArcGIS API for Python
ArcGIS API for Python
73 0
|
JavaScript 前端开发 应用服务中间件
Arcgis api for javascript 详细部署
Arcgis api for javascript 详细部署
|
人工智能 数据可视化 数据管理
ArcGIS API for Python
ArcGIS API for Python
120 0
|
数据可视化 数据管理 API
​​​​​​​ARCGIS API for Python进行城市区域提取
​​​​​​​ARCGIS API for Python进行城市区域提取
​​​​​​​ARCGIS API for Python进行城市区域提取
|
JavaScript 前端开发 定位技术
ArcGIS API For JavaScript官方文档(六)之设置范围
ArcGIS API For JavaScript官方文档(六)之设置范围
|
存储 JSON 前端开发
ArcGIS API For JavaScript官方文档(一)之默认API配置
ArcGIS API For JavaScript官方文档(一)之默认API配置
arcgis api 3.X 修改自带弹窗样式 2022年6月12日
自带的弹窗介绍: arcgis api 3.X 修改自带弹窗样式插图 /*修改原有弹窗的css样式*/ /* 弹窗整体 */ .esriPopup { font-size: 16px; box-shadow: 10px 10px 5px #888888; } .esriPopup .sizer { position: relative; width: 400px; /* 弹窗宽度 */ z-index: 1; } /* 标题部分 */ .esriPopup .titlePane { background-color: rgba(7

热门文章

最新文章