arcgis for js 加载第三方地图资源
栏目: JavaScript · 发布时间: 5年前
内容简介:特别说明:非原著文章,来自esri china上公开文档-----------------------------------------------------
-----------------------------------------------------
特别说明:非原著文章,来自esri china上公开文档
-----------------------------------------------------
ArcGIS API for Javascript 提供了一个 WebTileLayer 的类,通过返个类可以访问非 ArcGIS for Server切片服务,这个类接受一个模式如
http://some.domain.com/ $ {leveL} / $ {col} / $ {row}的URL参数复制代码
不一定非是这种模式,也不一定非要传入一个URL做参数,但是跟这种模式类似,因为这种模式目前网络上很常见,其中level表示切片级别,col和row 分别表示level级别下的列和行。
WebTileLayer 本质是一个扩展的 TiledMapServiceLayer 类,在该类没有出来前,也都是通过自定义的方式去访问一些形如 http://some.domain.com/ $ {leveL} / $ {col} / $ {row}的服务,而 WebTileLayer 的出现则加快了开发效率,在使用的时候,叧需要以 WebTileLayer为模板替换相应的参数即可。
1、切片服务的源头-TiledMapServiceLayer
TiledMapServiceLayer 类是一切切片服务的源头,我所熟知的 WMTS 和ArcGISTiledMapServiceLayer VETiledLayer 都是通过继承该类来实现对不同的切片服务的访问,该类是一个抽象类,另能被子类来实例化,但是它却定义了方位切片服务所需要的方法, 因此有必要来了解下该类, 该类的主要属性和方法如下。
主要属性 fullExtent 地图服务的范围 initialExtent 地图服务的刜始范围 spatialReference 地图服务的空间参考 tileInfo 瓦片信息,该类包吨切片的结构 复制代码
主要方法 getTileUrl 获取每一个切片的url,返个方法是当移动地图,放大缩小的时候会触发, 然后获取每一个切片的url并获取图片进行显示 复制代码
2、天地图
天地图是国家测绘局2010年10月21日宣布开通,是中国公众版国家地理信息公共服务平台,天地图作为中国区域内数据资源最全的地理信息服务平台,将为公众提供权威、可信、统一的地理信息服务,打造互联网地理信息服务的中国品牌。
2.1、示例
通过继承 TiledMapServiceLayer 来实现对天地图的访问,可以直接修改 WebTileLayer中的信息
dojo.declare("WebTileLayer", esri.layers.TiledMapServiceLayer, { constructor: function () { this.spatialReference = new esri.SpatialReference({ wkid: 4326 }); this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-180.0, -90.0, 180.0, 90.0, this.spatialReference)); this.tileInfo = new esri.layers.TileInfo({ "rows": 256, "cols": 256, "compressionQuality": 0, "origin": { "x": -180, "y": 90 }, "spatialReference": { "wkid": 4326 }, "lods": [ { "level": 0, "resolution": 0.703125, "scale": 295497593.05875003 }, { "level": 1, "resolution": 0.3515625, "scale": 147748796.52937502 }, { "level": 2, "resolution": 0.17578125, "scale": 73874398.264687508 }, { "level": 3, "resolution": 0.087890625, "scale": 36937199.132343754 }, { "level": 4, "resolution": 0.0439453125, "scale": 18468599.566171877 }, { "level": 5, "resolution": 0.02197265625, "scale": 9234299.7830859385 }, { "level": 6, "resolution": 0.010986328125, "scale": 4617149.8915429693 }, { "level": 7, "resolution": 0.0054931640625, "scale": 2308574.9457714846 }, { "level": 8, "resolution": 0.00274658203125, "scale": 1154287.4728857423 }, { "level": 9, "resolution": 0.001373291015625, "scale": 577143.73644287116 }, { "level": 10, "resolution": 0.0006866455078125, "scale": 288571.86822143558 }, { "level": 11, "resolution": 0.00034332275390625, "scale": 144285.93411071779 }, { "level": 12, "resolution": 0.000171661376953125, "scale": 177 72142.967055358895 }, { "level": 13, "resolution": 8.58306884765625e-005, "scale": 36071.483527679447 }, { "level": 14, "resolution": 4.291534423828125e-005, "scale": 18035.741763839724 }, { "level": 15, "resolution": 2.1457672119140625e-005, "scale": 9017.8708819198619 }, { "level": 16, "resolution": 1.0728836059570313e-005, "scale": 4508.9354409599309 }, { "level": 17, "resolution": 5.3644180297851563e-006, "scale": 2254.4677204799655 } ] }); this.loaded = true; this.onLoad(this); }, getTileUrl: function (level, row, col) { var levelMap = ""; if (level < 10) { levelMap = "A0512_EMap"; } else if (level < 12) { levelMap = "B0627_EMap1112"; } else if (level < 17) { levelMap = "siwei0608"; } return "http://tile0.tianditu.com/DataServer?T=" + levelMap + "&" + "X=" + col + "&" + "Y=" + row + "&" + "L=" + (level * 1 + 1); } }); 复制代码
2.2、加载天地图
var tianditu = new WebTileLayer(); map.addLayer(tianditu); 复制代码
2.3、展示结果
3、百度地图
在百度地图里,用户可以查询街道、商场、楼盘的地理位置,也可以找到离您最近的所有餐馆、 学校、银行、公园等等poi信息。通过arcgis for js 可以扩展一个图层进行访问百度地图。
3.1 示例
dojo.declare("BaiduLayer", esri.layers.TiledMapServiceLayer, { constructor: function () { this.spatialReference = new esri.SpatialReference({ wkid: 102113 }); this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787, 181 this.spatialReference)); this.tileInfo = new esri.layers.TileInfo({ "rows": 256, "cols": 256, "compressionQuality": 0, "origin": { "x": -20037508.342787, "y": 20037508.342787 }, "spatialReference": { "wkid": 102113 }, "lods": [{ "level": 0, "resolution": 156543.033928, "scale": 591657527.591555 }, { "level": 1, "resolution": 78271.5169639999, "scale": 295828763.795777 }, { "level": 2, "resolution": 39135.7584820001, "scale": 147914381.897889 }, { "level": 3, "resolution": 19567.8792409999, "scale": 73957190.948944 }, { "level": 4, "resolution": 9783.93962049996, "scale": 36978595.474472 }, { "level": 5, "resolution": 4891.96981024998, 182 "scale": 18489297.737236 }, { "level": 6, "resolution": 2445.98490512499, "scale": 9244648.868618 }, { "level": 7, "resolution": 1222.99245256249, "scale": 4622324.434309 }, { "level": 8, "resolution": 611.49622628138, "scale": 2311162.217155 }, { "level": 9, "resolution": 305.748113140558, "scale": 1155581.108577 }, { "level": 10, "resolution": 152.874056570411, "scale": 577790.554289 }, { "level": 11, "resolution": 76.4370282850732, "scale": 288895.277144 }, { "level": 12, "resolution": 38.2185141425366, "scale": 144447.638572 }, { "level": 13, "resolution": 19.1092570712683, "scale": 72223.819286 }, { "level": 14, "resolution": 9.55462853563415, "scale": 36111.909643 183 }, { "level": 15, "resolution": 4.77731426794937, "scale": 18055.954822 }, { "level": 16, "resolution": 2.38865713397468, "scale": 9027.977411 }, { "level": 17, "resolution": 1.19432856685505, "scale": 4513.988705 }, { "level": 18, "resolution": 0.597164283559817, "scale": 2256.994353 }, { "level": 19, "resolution": 0.298582141647617, "scale": 1128.497176 }] }); this.loaded = true; this.onLoad(this); }, getTileUrl: function (level, row, col) { var zoom = level - 1; var offsetX = Math.pow(2, zoom); var offsetY = offsetX - 1; var numX = col - offsetX; var numY = (-row) + offsetY; zoom = level + 1; var num = (col + row) % 8 + 1; var url = "http://q3.baidu.com/it/u=x=" + numX + ";y=" + numY + ";z=" + zoom 184 + ";v=015;type=web&fm=44"; return url; } }); 复制代码
3.1 展示效果
以上所述就是小编给大家介绍的《arcgis for js 加载第三方地图资源》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。