ArcGIS Viewer for Flex中引入google map作底图 (转)
在ArcGIS Viewer for Flex开发中,经常需要用到google map作为底图,我们不能通过ArcGIS Viewer for Flex - Application Builder轻易的引入google map 作为底图,需要通过程序重写TiledMapServiceLayer来扩展从而加载google map。
这里有写好的GoogleMapLayer.as文件:
package com.esri.viewer
{
import com.esri.ags.SpatialReference;
import com.esri.ags.geometry.Extent;
import com.esri.ags.geometry.MapPoint;
import com.esri.ags.layers.TiledMapServiceLayer;
import com.esri.ags.layers.supportClasses.LOD;
import com.esri.ags.layers.supportClasses.TileInfo;
import flash.net.URLRequest;
//扩展TiledMapServiceLayer图层实现加载google地图
public class GoogleMapLayer extends TiledMapServiceLayer
{
private var _tileInfo:TileInfo=new TileInfo();
private var _baseURL:String="";
public var mapStyle:String="";
public function GoogleMapLayer()
{
super();
buildTileInfo();
setLoaded(true);
}
override public function get fullExtent():Extent
{
return new Extent(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787, new SpatialReference(102113));
}
override public function get initialExtent():Extent
{
return new Extent(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787, new SpatialReference(102113));
}
override public function get spatialReference():SpatialReference
{
return new SpatialReference(102113);
}
override public function get tileInfo():TileInfo
{
return _tileInfo;
}
//获取矢量地图
override protected function getTileURL(level:Number, row:Number, col:Number):URLRequest
{
var s:String = "Galileo".substring(0, ((3 * x + y) % 8));
var url:String;
//获取矢量地图
if(mapStyle == "Vector")
{
url = "http://mt"+(col%4)+".google.com/vt/lyrs=m@158000000&hl=zh-CN&gl=cn&" +
"x=" + col + "&" +
"y=" + row + "&" +
"z=" + level+ "&" +
"s=" + s;
}
//获取地形图
else if(mapStyle == "Terrain")
{
url = "http://mt"+(col%4)+".google.cn/vt/lyrs=t@131,r@227000000&hl=zh-CN&gl=cn&" +
"x=" + col + "&" +
"y=" + row + "&" +
"z=" + level+ "&" +
"s=" + s;
}
//获取影像地图
else if(mapStyle == "Image")
{
url = "http://mt"+(col%4)+".google.com/vt/lyrs=s&hl=en&gl=en&" +
"x=" + col + "&" +
"y=" + row + "&" +
"z=" + level+ "&" +
"s=" + s;
}
//获取道路等POI,和影像地图配合使用
else if(mapStyle == "POI")
{
url = "http://mt"+(col%4)+".google.com/vt/imgtp=png32&lyrs=h@169000000&hl=zh-CN&gl=cn&" +
"x=" + col + "&" +
"y=" + row + "&" +
"z=" + level+ "&" +
"s=" + s;
}
return new URLRequest(url);
}
private function buildTileInfo():void
{
_tileInfo.height=256;
_tileInfo.width=256;
_tileInfo.origin=new MapPoint(-20037508.342787, 20037508.342787);
_tileInfo.spatialReference=new SpatialReference(102113);
_tileInfo.lods = [
new LOD(0, 156543.033928, 591657527.591555),
new LOD(1, 78271.5169639999, 295828763.795777),
new LOD(2, 39135.7584820001, 147914381.897889),
new LOD(3, 19567.8792409999, 73957190.948944),
new LOD(4, 9783.93962049996, 36978595.474472),
new LOD(5, 4891.96981024998, 18489297.737236),
new LOD(6, 2445.98490512499, 9244648.868618),
new LOD(7, 1222.99245256249, 4622324.434309),
new LOD(8, 611.49622628138, 2311162.217155),
new LOD(9, 305.748113140558, 1155581.108577),
new LOD(10, 152.874056570411, 577790.554289),
new LOD(11, 76.4370282850732, 288895.277144),
new LOD(12, 38.2185141425366, 144447.638572),
new LOD(13, 19.1092570712683, 72223.819286),
new LOD(14, 9.55462853563415, 36111.909643),
new LOD(15, 4.77731426794937, 18055.954822),
new LOD(16, 2.38865713397468, 9027.977411),
new LOD(17, 1.19432856685505, 4513.988705),
new LOD(18, 0.597164283559817, 2256.994353),
new LOD(19, 0.298582141647617, 1128.497176)
];
}
}
}
具体步骤如下:
第一步:将文件GoogleMapLayer.as放到com.esri.viewer包下
第二步:在MapManager.mxml文件中:
(1)引入包com.esri.viewer.GoogleMapLayer。
(2)在addLayerToMap函数中添加:
第三步:在LayerCreator.as文件中:
(1)引入包com.esri.viewer.GoogleMapLayer:
(2)在createLayer函数中添加:
else if (layerType == "googlemap")
{
return createGoogleLayer(layerCreationProperties);
}
(3)添加函数createGoogleLayer:
private static function createGoogleLayer(layerCreationProperties:LayerCreationProperties):GoogleMapLayer
{
var googleLayer:GoogleMapLayer=new GoogleMapLayer();
googleLayer.name=layerCreationProperties.label;
if (layerCreationProperties.style)
{
googleLayer.mapStyle= layerCreationProperties.style;
}
googleLayer.id=layerCreationProperties.label;
googleLayer.alpha=layerCreationProperties.alpha;
googleLayer.visible=layerCreationProperties.visible;
return googleLayer;
}
第四步:在config.xml配置文件中添加basemaps:
<basemaps>
<layer label="GoogleMapLayer" type="GoogleMap" icon="assets/images/birds.png" style="Terrain" visible="true"/>
</basemaps>
运行结果:
作者:助你软件工作室
出处:http://www.cnblogs.com/chenyuming507950417/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
饮水思源,不忘初心。
要面包,也要有诗和远方。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
2015-08-11 VS中的 MD/MT设置 【转】
2010-08-11 OpenGL function -- OpenSceneGraph implementation