前言
关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类的介绍,还有就是在线例子:esri 官网在线例子,这个也是学习 arcgis api 3.x 的好素材。
内容概览
- 基于 arcgis api 3.x 实现加载在线地图
- 源代码 demo 下载
本篇主要讲述的是利用 arcgis api 加载互联网在线地图服务资源,简单封装一个底图切换控件 js,在线地图包括:天地图、高德地图以及百度地图,效果图如下:
实现思路
- 简单的底图切换控件 map.LayerSwitcherToolbar.js 文件,里面自定义加载天地图、高德地图以及百度地图类,其实都是继承 TiledMapServiceLayer类:
- 高德地图:
//高德地图图层扩展 GAODELayer = DObject({ id:null, esriLayer: null, esriLayerType:'road', construct: function (options) { DUtil.extend(this, options); dojo.declare("GaoDeTiledMapServiceLayer", esri.layers.TiledMapServiceLayer, { id:null, layertype: "road",//图层类型 constructor: function (args) { this.spatialReference = new esri.SpatialReference(MapConfig.mapInitParams.gaode_spatialReference); DUtil.extend(this, args); this.fullExtent = new esri.geometry.Extent({ xmin: MapConfig.params_gaode.fullExtent.xmin, ymin: MapConfig.params_gaode.fullExtent.ymin, xmax: MapConfig.params_gaode.fullExtent.xmax, ymax: MapConfig.params_gaode.fullExtent.ymax, spatialReference: this.spatialReference }); this.initialExtent = this.fullExtent; this.tileInfo = new esri.layers.TileInfo(MapConfig.params_gaode); this.loaded = true; this.onLoad(this); }, /** * 根据不同的layType返回不同的图层 * @param level * @param row * @param col * @returns {string} */ getTileUrl: function (level, row, col) { var url = ""; switch (this.layertype) { case "road"://矢量 url = 'http://webrd0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x=' + col + '&y=' + row + '&z=' + level; break; case "st"://影像 url = 'http://webst0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?style=6&x=' + col + '&y=' + row + '&z=' + level; break; case "label"://影像标 url = 'http://webst0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?style=8&x=' + col + '&y=' + row + '&z=' + level; break; default: url = 'http://webrd0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x=' + col + '&y=' + row + '&z=' + level; break; } return url; } }); this.esriLayer = new GaoDeTiledMapServiceLayer({id:this.id,layertype:this.esriLayerType}); }, hide: function () { this.esriLayer.hide(); }, show: function () { this.esriLayer.show(); } });
- 百度地图:
更多的详情见:GIS之家小专栏
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波