ArcGIS API for JavaScript 加載百度地圖

前言

    有時我們在面對需要使用百度地圖作為地圖的場景，我們可以通過對百度地圖，百度衛星圖，百度标注圖層進行加載通過在網上查閱，得到了比較合适的坐标轉換

加載百度地圖

  BDVecLayer.js

define(["dojo/_base/declare",
        "esri/layers/TiledMapServiceLayer",
        "esri/geometry/Extent",
        "esri/SpatialReference",
        "esri/layers/TileInfo"
    ], function (declare, TiledMapServiceLayer, Extent, SpatialReference, TileInfo) {
        return declare(TiledMapServiceLayer, {
            constructor: function () {
                this.spatialReference = new SpatialReference({ wkid:  });
                this.initialExtent = (this.fullExtent = new Extent(-, -, , , this.spatialReference));
                this.scale = [,,,,,,,
                    ,,,,,,,
                    ,,,,,];
                this.resolution = [,,,,,,,
                    ,,,,,,,,
                    ,,,,];
                this.tileInfo = new TileInfo({
                    "rows": ,
                    "cols": ,
                    "compressionQuality": ,
                    "origin": {
                        "x": -,
                        "y": 
                    },
                    "spatialReference": this.spatialReference,
                    "lods": [{ "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] }
                    ]
                });
                this.loaded = true;
                this.onLoad(this);
            },
            getTileUrl: function (level, row, col) {
                var zoom = level - ;
                var offsetX = parseInt(Math.pow(, zoom));
                var offsetY = offsetX - ;
                var numX = col - offsetX, numY = (-row) + offsetY ;
                var num = (col + row) %  + ;
                return "http://online" + num + ".map.bdimg.com/tile/?qt=tile&x="+numX+"&y="+numY+"&z="+level+"&styles=pl&scaler=1&udt=20141103";
            }
        });
});
           

加載衛星圖

  BDimgLayer.js

define(["dojo/_base/declare",
        "esri/layers/TiledMapServiceLayer",
        "esri/geometry/Extent",
        "esri/SpatialReference",
        "esri/layers/TileInfo"
    ], function (declare, TiledMapServiceLayer, Extent, SpatialReference, TileInfo) {
        return declare(TiledMapServiceLayer, {
            constructor: function () {
                this.spatialReference = new SpatialReference({ wkid:  });
                this.initialExtent = (this.fullExtent = new Extent(-, -, , , this.spatialReference));
                this.scale = [,,,,,,,
                    ,,,,,,,
                    ,,,,,];
                this.resolution = [,,,,,,,
                    ,,,,,,,,
                    ,,,,];
                this.tileInfo = new TileInfo({
                    "rows": ,
                    "cols": ,
                    "compressionQuality": ,
                    "origin": {
                        "x": -,
                        "y": 
                    },
                    "spatialReference": this.spatialReference,
                    "lods": [{ "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] }
                    ]
                });
                this.loaded = true;
                this.onLoad(this);
            },
            getTileUrl: function (level, row, col) {
                var zoom = level - ;
                var offsetX = parseInt(Math.pow(, zoom));
                var offsetY = offsetX - ;
                var numX = col - offsetX, numY = (-row) + offsetY ;
                var num = (col + row) %  + ;
                return "http://shangetu" + num + ".map.bdimg.com/it/u=x="+numX+";y="+numY+";z="+level+";v=009;type=sate&fm=46&udt=20141015";
            }
        });
});
           

加載百度标注圖層

  BDAnoLayer.js

define(["dojo/_base/declare",
        "esri/layers/TiledMapServiceLayer",
        "esri/geometry/Extent",
        "esri/SpatialReference",
        "esri/layers/TileInfo"
    ], function (declare, TiledMapServiceLayer, Extent, SpatialReference, TileInfo) {
        return declare(TiledMapServiceLayer, {
            constructor: function () {
                this.spatialReference = new SpatialReference({ wkid:  });
                this.initialExtent = (this.fullExtent = new Extent(-, -, , , this.spatialReference));
                this.scale = [,,,,,,,
                    ,,,,,,,
                    ,,,,,];
                this.resolution = [,,,,,,,
                    ,,,,,,,,
                    ,,,,];
                this.tileInfo = new TileInfo({
                    "rows": ,
                    "cols": ,
                    "compressionQuality": ,
                    "origin": {
                        "x": -,
                        "y": 
                    },
                    "spatialReference": this.spatialReference,
                    "lods": [{ "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] },
                        { "level": , "resolution": this.resolution[], "scale": this.scale[] }
                    ]
                });
                this.loaded = true;
                this.onLoad(this);
            },
            getTileUrl: function (level, row, col) {
                var zoom = level - ;
                var offsetX = parseInt(Math.pow(, zoom));
                var offsetY = offsetX - ;
                var numX = col - offsetX, numY = (-row) + offsetY ;
                var num = (col + row) %  + ;
                return "http://online" + num + ".map.bdimg.com/tile/?qt=tile&x="+numX+"&y="+numY+"&z="+level+"&styles=sl&udt=20141015";
            }
        });
});
           

在首頁內建

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Baidu Map</title>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.20/3.20/dijit/themes/tundra/tundra.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.20/3.20/esri/css/esri.css" />
    <style>
        html, body, #map {
            height: %;
            margin: ;
            padding: ;
        }
        .base-map-ano{
            position: absolute;
            right: pt;
            top:pt;
            background: #e6edf1;
            border: #96aed1 px solid;
            padding: px px;
            padding-left: px;
            padding-top: px;
            display: none;
            font-weight: normal;
        }
        .base-map{
            position: absolute;
            right: pt;
            top:pt;
            background: #f0f0f0;
            border: #96aed1 px solid;
            width: auto;
            height: auto;
            z-index: ;
            font:normal px "宋體",Arial;
            color:#868686;
        }
        .base-map-switch{
            padding: px px;
            float: left;
        }
        .base-map-switch-active{
            background:#e6edf1;
            font-weight: bold;
            color: #4d4d4d;
        }
        .base-map-switch:hover{
            cursor: pointer;
        }
        .base-map-switch-center{
            border: px #96aed1 solid;
            border-top:none;
            border-bottom:none;
        }
    </style>
    <script type="text/javascript">
        dojoConfig = {
            parseOnLoad: true,
            packages: [{
                name: 'bdlib',
                location: this.location.pathname.replace(/\/[^/]+$/, "")+"/js"
            }]
        };
    </script>
    <script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.20/3.20/init.js"></script>
    <script src="js/jquery-3.1.1.js"></script>
    <script>
        var map,showMap,anoCtrl;
        require(["esri/map",
                "bdlib/BDVecLayer",
                "bdlib/BDImgLayer",
                "bdlib/BDAnoLayer",
                "esri/layers/FeatureLayer",
                "esri/geometry/Point",
                "esri/SpatialReference",
                "dojo/domReady!"],
            function (Map,
                      BDVecLayer,
                      BDImgLayer,
                      BDAnoLayer,
                      FeatureLayer,
                      Point,
                      SpatialReference
            ){
                map = new Map("map", {
                    logo: false
                });
                var vecMap = new BDVecLayer();
                var imgMap = new BDImgLayer();
                var anoMap = new BDAnoLayer();
                map.addLayer(vecMap);
                map.addLayers([imgMap,anoMap]);
                imgMap.hide();
                anoMap.hide();

                var pt = new Point(, , new SpatialReference({ wkid:  }));
                map.centerAndZoom(pt, );

                showMap = function(layer){
                    //設定按鈕樣式
                    var baseMap = ["vec","img"];
                    for(var i= , dl=baseMap.length;i<dl;i++){
                        $("#"+baseMap[i]).removeClass("base-map-switch-active");
                    }
                    $("#"+layer).addClass("base-map-switch-active");
                    //設定顯示地圖
                    switch(layer){
                        case "img":{//影像
                            vecMap.hide();
                            imgMap.show();
                            $("#ano").show();
                            break;
                        }
                        default :{//地圖
                            vecMap.show();
                            imgMap.hide();
                            anoMap.hide();
                            $("#ano").hide();
                            $("#chkAno").attr("checked",false);
                            break;
                        }
                    }
                };
                anoCtrl = function(){
                    if($("#chkAno").prop("checked")){
                        anoMap.show();
                    }
                    else{
                        anoMap.hide();
                    }
                }
            });
    </script>
</head>
<body>
<div id="map">
    <div class="base-map">
        <div id="vec" class="base-map-switch base-map-switch-active" onclick="showMap('vec')">地圖</div>
        <div id="img" class="base-map-switch base-map-switch-center"  onclick="showMap('img')">影像
            <div id="ano" class="base-map-ano">
                <input id="chkAno" type="checkbox" name="chkAno" value="chkAno" onchange="anoCtrl()"/>标注
            </div>
        </div>
    </div>
</div>
</body>
</html>
           

結果

地圖：

衛星圖：

加标注圖層的衛星圖：

常見問題

    我們有時會遇見封裝的地圖連結失效，這時，我們需要利用百度api加載百度地圖（）或者是在浏覽器中打開百度地圖，在控制台的network中檢視加載的切片地圖。

注：參考https://blog.csdn.net/gisshixisheng/article/details/44853709