arcgis api 3.x for js 入门开发系列十七在线天地图、百度地图、高德地图(附源码下载)

前言

关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类的介绍,还有就是在线例子:esri 官网在线例子,这个也是学习 arcgis api 3.x 的好素材。

内容概览

  1. 基于 arcgis api 3.x 实现加载在线地图
  2. 源代码 demo 下载

本篇主要讲述的是利用 arcgis api 加载互联网在线地图服务资源,简单封装一个底图切换控件 js,在线地图包括:天地图、高德地图以及百度地图,效果图如下:


arcgis api 3.x for js 入门开发系列十七在线天地图、百度地图、高德地图(附源码下载)_第1张图片
image
arcgis api 3.x for js 入门开发系列十七在线天地图、百度地图、高德地图(附源码下载)_第2张图片
image

实现思路

  1. 简单的底图切换控件 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之家小专栏
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波

GIS之家作品:GIS之家
GIS之家源码咨询:咨询模式

你可能感兴趣的:(arcgis api 3.x for js 入门开发系列十七在线天地图、百度地图、高德地图(附源码下载))