ArcGIS API for Javascript3.23加載百度地圖(代碼實例)

引言

今天點開ArcGIS API for JavaScript官網一看,又更新新版本瞭【3.23和4.6】。由於之前項目需求用到瞭谷歌地圖、海圖這些在線地圖,於是這兩天突然有瞭一個想法:整理常用在線地圖的引用方法和源碼,包括百度地圖、天地圖、谷歌地圖、高德地圖、海圖。首先來講解百度地圖的引用。

方法:主要是利用TiledMapServiceLayer加載切片地圖,關於TiledMapServiceLayer的說明大傢可以去官網學習一下。

這裡寫圖片描述

下面是加載百度地圖和遙感影像的效果圖。

這裡寫圖片描述

這裡寫圖片描述

下面是定義百度地圖圖層BaiduLayer的相關代碼:

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 (properties) {
                this.spatialReference = new SpatialReference({
                    wkid: 102113
                });

                // 圖層提供的起始顯示范圍以及整個圖層的地理范圍
                this.fullExtent = new Extent(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787, this.spatialReference);
                this.initialExtent = new Extent(5916776.8, 1877209.3, 19242502.6, 7620381.8, this.spatialReference);
                // 圖層提供的切片信息
                this.tileInfo = new TileInfo({
                    "rows": 256,
                    "cols": 256,
                    "compressionQuality": 0,
                    "origin": {
                        "x": -20037508.342787,
                        "y": 20037508.342787
                    },
                    "spatialReference": {
                        "wkid": 102113
                    },
                    "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 }
                    ]
                });

                // 設置圖層的loaded屬性,並觸發onLoad事件
                this.loaded = true;
                this.onLoad(this);
            },

            getTileUrl: function (level, row, col) {
                var zoom = level - 1;
                var offsetX = Math.pow(2, zoom);
                var offsetY = offsetX - 1;
                var numX = col - offsetX;
                var numY = (-row) + offsetY;
                zoom = level + 1;
                var num = (col + row) % 8 + 1;
                var url = "https://online1.map.bdimg.com/tile/?qt=tile&x=" + numX + "&y=" + numY + "&z=" + zoom + "&styles=pl";
                return url;
            }
        });
    }
)

加載百度地圖圖層的代碼:

<script>
    var map;
    require([
        "esri/map",
        "src/BaiduLayer",
        "dojo/parser",
        "dojo/domReady!"], 
    function(Map, BaiduLayer, parser) {
        parser.parse();
        map = new Map("map", {
            logo: false,
            center: [119.9, 40.7],
            zoom: 4
        });
        //加載百度地圖圖層
        var bdlayer = new BaiduLayer();
        map.addLayer(bdlayer);

     });
 </script>

源碼下載:

源碼包括百度地圖和影像(加標註)的自定義文件(src/*.js)和加載文件(.html),ArcGIS API for JavaScript使用的是最新版本【3.23】。

這裡寫圖片描述

這裡寫圖片描述

其他在線地圖的相關代碼會後續更新,敬請持續關註。

You May Also Like