ArcGIS Javascript API 加载高德在线地图扩展

利用ArcGIS JavaScript API加载高德在线地图的扩展

/**
 * Created by WanderGIS on 2015/7/15.
 */
define(["dojo/_base/declare",
    "esri/geometry/Extent",
    "esri/SpatialReference",
    "esri/geometry/Point",
    "esri/layers/TileInfo",
    "esri/layers/TiledMapServiceLayer"], function (declare, Extent, SpatialReference, Point, TileInfo, TiledMapServiceLayer) {
    return declare("gaodeLayer", TiledMapServiceLayer, {
        layertype: "road",//图层类型
        constructor: function (args) {
            this.spatialReference = new SpatialReference({
                wkid: 3857
            });
            declare.safeMixin(this, args);
            this.fullExtent = new Extent(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787, this.spatialReference);
            this.initialExtent = this.fullExtent;
            this.tileInfo = new TileInfo({
                "cols": 256,
                "rows": 256,
                "compressionQuality": 0,
                "origin": new Point(-20037508.342787, 20037508.342787, this.spatialReference),
                "spatialReference": this.spatialReference,
                "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}]});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;}});});

使用方法

1、 在api引入之前配置dojoConfig

<script type="text/javascript">
    var dojoConfig = {
        async: true,
        parseOnLoad: true,
        packages: [{
            name: "extLayers",
            location: location.pathname.replace(/\/[^/]*$/, '') + '/extLayers'
        }]
    };
</script>

2、然后在代码中可以如下方式构造layer

 require(["esri/map", "extLayers/gaodeLayer", "dojo/domReady!"], function (Map, gaodeLayer) {
        var map = new Map("map", {
            center: [116, 28],
            zoom: 5
        });
        var baselayer = new gaodeLayer();//默认加载矢量 new gaodeLayer({layertype:"road"});也可以
        //var baselayer = new gaodeLayer({layertype: "st"});//加载卫星图
        //var baselayer = new gaodeLayer({layertype: "label"});//加载标注图
        map.addLayer(baselayer);//添加高德地图到map容器
    });

效果图

详细代码可以参见 https://github.com/wandergis/gaodeLayer