arcgis for js 加載第三方地圖資源

時間 2019-11-08

原文原文鏈接

-----------------------------------------------------

特別說明：非原著文章，來自esri china上公開文檔javascript

-----------------------------------------------------java

ArcGIS API for Javascript 提供了一個 WebTileLayer 的類，經過返個類能夠訪問非 ArcGIS for Server切片服務，這個類接受一個模式如web

http://some.domain.com/ $ {leveL} / $ {col} / $ {row}的URL參數複製代碼

不必定非是這種模式，也不必定非要傳入一個URL作參數，可是跟這種模式相似，由於這種模式目前網絡上很常見，其中level表示切片級別，col和row 分別表示level級別下的列和行。bash

WebTileLayer 本質是一個擴展的 TiledMapServiceLayer 類，在該類沒有出來前，也都是經過自定義的方式去訪問一些形如 http://some.domain.com/ $ {leveL} / $ {col} / $ {row}的服務，而 WebTileLayer 的出現則加快了開發效率，在使用的時候，叧須要以 WebTileLayer爲模板替換相應的參數便可。網絡

一、切片服務的源頭-TiledMapServiceLayer

TiledMapServiceLayer 類是一切切片服務的源頭，我所熟知的 WMTS 和ArcGISTiledMapServiceLayer VETiledLayer 都是經過繼承該類來實現對不一樣的切片服務的訪問，該類是一個抽象類，另能被子類來實例化，可是它卻定義了方位切片服務所須要的方法，所以有必要來了解下該類，該類的主要屬性和方法以下。 dom

主要屬性
fullExtent 地圖服務的範圍
initialExtent 地圖服務的刜始範圍
spatialReference 地圖服務的空間參考
tileInfo 瓦片信息，該類包噸切片的結構 複製代碼

主要方法
getTileUrl 獲取每個切片的url，返個方法是當移動地圖，放大縮小的時候會觸發，
而後獲取每個切片的url並獲取圖片進行顯示 複製代碼

二、天地圖

天地圖是國家測繪局2010年10月21日宣佈開通，是中國公衆版國家地理信息公共服務平臺，天地圖做爲中國區域內數據資源最全的地理信息服務平臺，將爲公衆提供權威、可信、統一的地理信息服務，打造互聯網地理信息服務的中國品牌。
ui

2.一、示例this

經過繼承 TiledMapServiceLayer 來實現對天地圖的訪問，能夠直接修改 WebTileLayer中的信息
url

dojo.declare("WebTileLayer", esri.layers.TiledMapServiceLayer, { 
                constructor: function () { 
                    this.spatialReference = new esri.SpatialReference({ wkid: 4326 }); 
                    this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-180.0, 
-90.0, 180.0, 90.0, this.spatialReference)); 
 
                    this.tileInfo = new esri.layers.TileInfo({ 
                        "rows": 256, 
                        "cols": 256, 
                        "compressionQuality": 0, 
                        "origin": { 
                            "x": -180, 
                            "y": 90 
                        }, 
                        "spatialReference": { 
                            "wkid": 4326 
                        }, 
                        "lods": [ 
              { "level": 0, "resolution": 0.703125, "scale": 295497593.05875003 }, 
              { "level": 1, "resolution": 0.3515625, "scale": 147748796.52937502 }, 
              { "level": 2, "resolution": 0.17578125, "scale": 73874398.264687508 }, 
              { "level": 3, "resolution": 0.087890625, "scale": 36937199.132343754 }, 
              { "level": 4, "resolution": 0.0439453125, "scale": 18468599.566171877 }, 
              { "level": 5, "resolution": 0.02197265625, "scale": 9234299.7830859385 }, 
              { "level": 6, "resolution": 0.010986328125, "scale": 4617149.8915429693 }, 
              { "level": 7, "resolution": 0.0054931640625, "scale": 2308574.9457714846 }, 
              { "level": 8, "resolution": 0.00274658203125, "scale": 1154287.4728857423 }, 
              { "level": 9, "resolution": 0.001373291015625, "scale": 577143.73644287116 }, 
              { "level": 10, "resolution": 0.0006866455078125, "scale": 288571.86822143558 }, 
              { "level": 11, "resolution": 0.00034332275390625, "scale": 
144285.93411071779 }, 
              { "level": 12, "resolution": 0.000171661376953125, "scale": 

 
177 
 
72142.967055358895 }, 
              { "level": 13, "resolution": 8.58306884765625e-005, "scale": 
36071.483527679447 }, 
              { "level": 14, "resolution": 4.291534423828125e-005, "scale": 
18035.741763839724 }, 
              { "level": 15, "resolution": 2.1457672119140625e-005, "scale": 
9017.8708819198619 }, 
              { "level": 16, "resolution": 1.0728836059570313e-005, "scale": 
4508.9354409599309 }, 
              { "level": 17, "resolution": 5.3644180297851563e-006, "scale": 
2254.4677204799655 } 
            ] 
                    }); 
 
                    this.loaded = true; 
                    this.onLoad(this); 
                }, 
 
                getTileUrl: function (level, row, col) { 
                    var levelMap = ""; 
                    if (level < 10) { 
                        levelMap = "A0512_EMap"; 
                    } else if (level < 12) { 
                        levelMap = "B0627_EMap1112"; 
                    } else if (level < 17) { 
                        levelMap = "siwei0608"; 
                    } 
                    return "http://tile0.tianditu.com/DataServer?T=" + levelMap + "&" + 
                                          "X=" + col + "&" + 
                  "Y=" + row + "&" + 
                  "L=" + (level * 1 + 1); 
 
                } 
            });  複製代碼

2.二、加載天地圖 spa

var tianditu = new WebTileLayer();
map.addLayer(tianditu); 複製代碼

2.三、展現結果

三、百度地圖

在百度地圖裏，用戶能夠查詢街道、商場、樓盤的地理位置，也能夠找到離您最近的全部餐館、學校、銀行、公園等等poi信息。經過arcgis for js 能夠擴展一個圖層進行訪問百度地圖。

3.1 示例

dojo.declare("BaiduLayer", esri.layers.TiledMapServiceLayer, { 
            constructor: function () { 
                this.spatialReference = new esri.SpatialReference({ 
                    wkid: 102113 
                }); 
                this.initialExtent = (this.fullExtent = new 
esri.geometry.Extent(-20037508.342787, -20037508.342787, 20037508.342787, 20037508.342787, 

 
181 
 
this.spatialReference)); 
 
                this.tileInfo = new esri.layers.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, 

 
182 
 
                        "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 

 
183 
 
                    }, { 
                        "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); 
            }, 
 
            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 = "http://q3.baidu.com/it/u=x=" + numX + ";y=" + numY + ";z=" + zoom 

 
184 
 
+ ";v=015;type=web&fm=44"; 
                return url; 
 
            }         });     複製代碼