前言
關於本篇功能實現用到的 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之家小專欄
文章尾部提供源代碼下載,對本專欄感興趣的話,可以關注一波