arcgis api for js入门开发系列十七在线地图(天地图、百度地图、高德地图)

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

实现思路:

1.简单的底图切换控件map.LayerSwitcherToolbar.js文件,里面自定义加载天地图、高德地图以及百度地图类,其实都是继承TiledMapServiceLayer类:

(1)高德地图:

//高德地图图层扩展
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();
        }
});

(2)百度地图:

//百度地图图层扩展
BDLayer = DObject({
    id: null,
    esriLayer: null,
    esriLayerType: 'bd_vec',
    construct: function (options) {
        DUtil.extend(this, options);
        dojo.declare("BDTiledMapServiceLayer", esri.layers.TiledMapServiceLayer, {
            id: null,
            layertype: "bd_vec",//图层类型
            constructor: function (args) {
                this.spatialReference = new esri.SpatialReference(MapConfig.mapInitParams.bd_spatialReference);
                DUtil.extend(this, args);
                this.fullExtent = new esri.geometry.Extent({
                    xmin: MapConfig.params_bd.fullExtent.xmin,
                    ymin: MapConfig.params_bd.fullExtent.ymin,
                    xmax: MapConfig.params_bd.fullExtent.xmax,
                    ymax: MapConfig.params_bd.fullExtent.ymax,
                    spatialReference: this.spatialReference
                });
                this.initialExtent = this.fullExtent;
                this.tileInfo = new esri.layers.TileInfo(MapConfig.params_bd);
                this.loaded = true;
                this.onLoad(this);
            },
            /**
             * 根据不同的layType返回不同的图层
             * @param level
             * @param row
             * @param col
             * @returns {string}
             */
            getTileUrl: function (level, row, col) {
                var zoom = level - 1;
                var offsetX = parseInt(Math.pow(2, zoom));
                var offsetY = offsetX - 1;
                var numX = col - offsetX, numY = (-row) + offsetY;
                var num = (col + row) % 8 + 1;
                var url = "";
                switch (this.layertype) {
                    case "bd_vec"://矢量
                        url = "http://online" + num + ".map.bdimg.com/tile/?qt=tile&x=" + numX + "&y=" + numY + "&z=" + level + "&styles=pl&scaler=1&udt=20141103";
                        break;
                    case "bd_img"://影像
                        url = "http://shangetu" + num + ".map.bdimg.com/it/u=x=" + numX + ";y=" + numY + ";z=" + level + ";v=009;type=sate&fm=46&udt=20141015";
                        break;
                    case "bd_cva"://影像标注
                        url = "http://online" + num + ".map.bdimg.com/tile/?qt=tile&x=" + numX + "&y=" + numY + "&z=" + level + "&styles=sl&udt=20141015";
                        break;
                    default:
                        url = "http://online" + num + ".map.bdimg.com/tile/?qt=tile&x=" + numX + "&y=" + numY + "&z=" + level + "&styles=pl&scaler=1&udt=20141103";
                        break;
                }
                return url;
            }
        });
        this.esriLayer = new BDTiledMapServiceLayer({ id: this.id, layertype: this.esriLayerType });
    },
    hide: function () {
        this.esriLayer.hide();
    },
    show: function () {
        this.esriLayer.show();
    }
});

(3)天地图:

//天地图图层扩展
TDTLayer = DObject({
    id:null,
    esriLayer: null,
    esriLayerType:'vec',//默认矢量类型
        construct: function (options) {
            DUtil.extend(this, options);
            dojo.declare("TDTTiledMapServiceLayer", esri.layers.TiledMapServiceLayer, {
                id:null,
                layertype: "vec",//图层类型
                constructor: function (args) {
                    this.spatialReference = new esri.SpatialReference(MapConfig.mapInitParams.spatialReference);
                    DUtil.extend(this, args);
                    this.fullExtent = new esri.geometry.Extent({
                        xmin: MapConfig.params_tdt.fullExtent.xmin,
                        ymin: MapConfig.params_tdt.fullExtent.ymin,
                        xmax: MapConfig.params_tdt.fullExtent.xmax,
                        ymax: MapConfig.params_tdt.fullExtent.ymax,
                        spatialReference: this.spatialReference
                    });
                    this.initialExtent = this.fullExtent;
                    this.tileInfo = new esri.layers.TileInfo(MapConfig.params_tdt);
                    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 "vec"://矢量类型
                         url = "http://t" + col % 8 + ".tianditu.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles";
                         break;
                     case "cva"://矢量注记类型
                         url = "http://t" + row % 8 + ".tianditu.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles";
                         break;
                     case "img"://卫星类型
                         url = "http://t" + row % 8 + ".tianditu.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles";
                         break;    
                     case "cia"://卫星注记类型
                         url = "http://t" + row % 8 + ".tianditu.cn/cia_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles";
                         break;                             
                     default://矢量类型
                         url = "http://t" + col % 8 + ".tianditu.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles";
                         break;
                     }
                     return url;
                 }
            });
            this.esriLayer = new TDTTiledMapServiceLayer({id:this.id,layertype:this.esriLayerType});
        },
        hide: function () {
            this.esriLayer.hide();
        },
        show: function () {
            this.esriLayer.show();
        }
});

2.map.LayerSwitcherToolbar.js底图切换控件的调用:

(1)调用之前配置好在线地图资源服务配置信息:

tdt_lods: [//天地图lods
          { "level": 2, "resolution": 0.3515625, "scale": 147748796.52937502 },
          { "level": 3, "resolution": 0.17578125, "scale": 73874398.264687508 },
          { "level": 4, "resolution": 0.087890625, "scale": 36937199.132343754 },
          { "level": 5, "resolution": 0.0439453125, "scale": 18468599.566171877 },
          { "level": 6, "resolution": 0.02197265625, "scale": 9234299.7830859385 },
          { "level": 7, "resolution": 0.010986328125, "scale": 4617149.8915429693 },
          { "level": 8, "resolution": 0.0054931640625, "scale": 2308574.9457714846 },
          { "level": 9, "resolution": 0.00274658203125, "scale": 1154287.4728857423 },
          { "level": 10, "resolution": 0.001373291015625, "scale": 577143.73644287116 },
          { "level": 11, "resolution": 0.0006866455078125, "scale": 288571.86822143558 },
          { "level": 12, "resolution": 0.00034332275390625, "scale": 144285.93411071779 },
          { "level": 13, "resolution": 0.000171661376953125, "scale": 72142.967055358895 },
          { "level": 14, "resolution": 8.58306884765625e-005, "scale": 36071.483527679447 },
          { "level": 15, "resolution": 4.291534423828125e-005, "scale": 18035.741763839724 },
          { "level": 16, "resolution": 2.1457672119140625e-005, "scale": 9017.8708819198619 },
          { "level": 17, "resolution": 1.0728836059570313e-005, "scale": 4508.9354409599309 },
          { "level": 18, "resolution": 5.3644180297851563e-006, "scale": 2254.4677204799655 }
    ],
    //高德地图配置部分
    gaode_spatialReference: {
        wkid: 102100
    },
    gaode_fullExtent: {//全图范围
        xmin: -20037508.342787,
        ymin: -20037508.342787,
        xmax: 20037508.342787,
        ymax: 20037508.342787
    },
    gaode_extent: {//初始化范围
        xmin: 13414320.252357699,
        ymin: 4652239.13502308,
        xmax: 13909632.195645403,
        ymax: 4921603.222699912
    },
    gaode_lods: [//高德地图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, "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 },
        { "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}
    ],
    //百度地图配置部分
    bd_spatialReference: {
        wkid: 102100
    },
    bd_fullExtent: {//全图范围
        xmin: -20037508.3427892,
        ymin: -20037508.3427892,
        xmax: 20037508.3427892,
        ymax: 20037508.3427892
    },
    bd_extent: {//初始化范围
        xmin: 7877382.758357699,
        ymin: 2736509.35402308,
        xmax: 8461361.654645403,
        ymax: 3026052.818699912
    },
    bd_lods: [//百度地图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, "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 },
        { "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 }
    ]
/*高德瓦片图层参数*/
MapConfig.params_gaode = {
    rows: 256,
    cols: 256,
    compressionQuality: 0,
    origin: {
        "x": -20037508.342787,
        "y": 20037508.342787
    },
    spatialReference: MapConfig.mapInitParams.gaode_spatialReference,
    lods: MapConfig.mapInitParams.gaode_lods,
    initExtent: MapConfig.mapInitParams.gaode_extent,
    fullExtent: MapConfig.mapInitParams.gaode_fullExtent
};
/*百度瓦片图层参数*/
MapConfig.params_bd = {
    rows: 256,
    cols: 256,
    compressionQuality: 90,
    origin: {
        "x": -20037508.3427892,
        "y": 20037508.3427892
    },
    spatialReference: MapConfig.mapInitParams.bd_spatialReference,
    lods: MapConfig.mapInitParams.bd_lods,
    initExtent: MapConfig.mapInitParams.bd_extent,
    fullExtent: MapConfig.mapInitParams.bd_fullExtent
};
/*天地图瓦片图层参数*/
MapConfig.params_tdt = {
    rows: 256,
    cols: 256,
    compressionQuality: 0,
    origin: {
        "x": -180,
        "y": 90
    },
    spatialReference: MapConfig.mapInitParams.spatialReference,
    lods: MapConfig.mapInitParams.tdt_lods,
    initExtent: MapConfig.mapInitParams.extent,
    fullExtent: MapConfig.mapInitParams.fullExtent
};
/*地图配置服务信息说明
 *type为地图类型,0为wmts,1为mapserver切片,2为高德地图矢量,3为高德卫星,4为天地图矢量,5为天地图卫星,6为百度地图矢量,7为百度卫星
 */
MapConfig.arcvecMap = { Url: "http://localhost:6080/arcgis/rest/services/dlMap/MapServer", labelUrl: "矢量", type: 1 };//大连矢量底图服务-ArcGIS切片格式
MapConfig.arcimgMap = { Url: "http://localhost:6080/arcgis/rest/services/dlImgMap/MapServer", labelUrl: "影像", type: 1 };//大连影像底图服务-ArcGIS切片格式
MapConfig.tdtvecMap = { labelUrl: "天地图", type: 4 };//天地图街道图
MapConfig.tdtimgMap = { labelUrl: "天地图", type: 5 };//天地图影像图
MapConfig.gdvecMap = { labelUrl: "高德地图", type: 2 };//高德街道图
MapConfig.gdimgMap = { labelUrl: "高德地图", type: 3 };//高德影像图
MapConfig.bdvecMap = { labelUrl: "百度地图", type: 6 };//百度街道图
MapConfig.bdimgMap = { labelUrl: "百度地图", type: 7 };//百度影像图

(2)初始化底图切换控件:

    var map = new esri.Map("map", { logo: false, slider: false });//创建一个map对象,然后地图填充在div容器,通过div的ID(map)来关联;{}里面是构造地图的可选参数设置,logo设置图标是否显示,lods是设置瓦片地图的显示级别level有哪些,从配置文件config获取
    var mapLabelArray = [//type为地图类型,0为wmts,1为mapserver切片,2为高德地图矢量,3为高德卫星,4为天地图矢量,5为天地图卫星
                 { label: MapConfig.arcvecMap.labelUrl, type: MapConfig.arcvecMap.type, url: { map: MapConfig.arcvecMap.Url, anno: "" }, className: "vecType" },
                 { label: MapConfig.arcimgMap.labelUrl, type: MapConfig.arcimgMap.type, url: { map: MapConfig.arcimgMap.Url, anno: "" }, className: "imgType" },

    ];
    layerswitchertoolbar = new LayerSwitcherToolbar(map, mapLabelArray, false); //默认加载第一个图层,参数说明:map为地图对象;mapLabelArray图层数组配置;false或者true,说明是否重新创建map对象,假如map的瓦片级别以及分辨率和坐标系不一致的话,设置true,反之设置false

 

作者: GIS之家

GIS之家微信号:gishome;GIS之家拥有自己的GIS开发团队,均是高校GIS研究生,具备丰富的webgis开发项目工作经验,专注以及热爱研究webgis技术的团队

发表评论

电子邮件地址不会被公开。