天天看點

《JavaScript建構Web和ArcGIS Server應用實戰》——2.5 使用地圖服務圖層

本節書摘來自異步社群《javascript建構web和arcgis server應用實戰》一書中的第2章,第2.5節,作者: 【美】eric pimpler(派普勒) 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

一幅沒有資料圖層的地圖就像一個畫家的空白畫闆一樣。添加到地圖中的資料圖層讓其有意義并為分析奠定了基礎。提供資料圖層添加到地圖中主要有兩種類型的地圖服務:動态地圖服務圖層和切片地圖服務圖層。

動态地圖服務圖層在運作時建立地圖圖檔并引用地圖服務,然後傳回圖檔到應用程式中。這種類型的地圖服務或許由一個或多個圖層資訊構成。圖2-4所示為demograhpics地圖服務,它由九個不同的圖層構成,分别從不同地理層次代表demographic資訊。

《JavaScript建構Web和ArcGIS Server應用實戰》——2.5 使用地圖服務圖層

https://yqfile.alicdn.com/9710ea2e558d6fbde9ca2f714864913b27a7483a.png" >

用戶端應用程式顯示将花費更多時間,因為它們必須是動态生成的,是以動态地圖服務層服務比切片地圖服務圖層擁有更多功能。在動态地圖服務圖層中,你可以通過控制圖層定義顯示的特征,設定地圖服務中各圖層的可見性并定義圖層的瞬時資訊。例如,在前面的圖中描述的demographics地圖服務圖層,你可以選擇在你的應用程式中隻顯示census block group圖層。這是一種通過動态地圖服務圖層提供的功能,而在切片地圖服務圖層中則沒有這樣的功能。

切片地圖服務圖層引用的是一個預先定義好的地圖切片緩存而不是動态加載的圖檔。用最簡單的方法來了解切片地圖服務,就是将它認為是覆寫在地圖表面的網格。網格中的每一個單元格同樣大小,用來将地圖分割成單獨的圖檔檔案,進而成為切片。單個的切片是伺服器上存儲的圖像檔案,當需要的時候根據地圖範圍和比例尺來檢索。在不同的地圖比例尺下,這個過程會重複執行。當地圖在應用程式中顯示時,雖然地圖由很多單獨的切片構成,但是它們看起來是無縫拼接的,如圖2-5所示。

《JavaScript建構Web和ArcGIS Server應用實戰》——2.5 使用地圖服務圖層

https://yqfile.alicdn.com/1262637c20a8c340fa472b6bc3154fb86c917a65.png" >

這些切片或者緩存地圖圖層通常用作底圖,包括影像圖、街道圖、地形圖或者不常發生變化的資料圖層。切片地圖服務顯示速度更快,因為每次運作時向地圖發送一個請求而并無建立圖檔的開銷。

操作圖層常覆寫在切片地圖上面,這些圖層通常為動态圖層。雖然它們在執行時慢一點,但是動态地圖服務圖層有着在運作時仍可以定義外觀的優勢。

2.5.1 使用圖層類

使用arcgis apiforjavascript中的圖層類,可以引用宿主在arcgis server和其他地圖伺服器中的地圖服務。所有的圖層類繼承自layer這個基類。由于layer類沒有構造函數,是以你不可以專門針對這個類來建立一個對象。你可以簡單地通過繼承自layer的子類來定義屬性、方法和事件。

如圖2-6所示,dynamicmapservicelayer、tiledmapservicelayer和graphicslayer全部繼承自layer類。dynamicmapservicelayer和tiledmapservicelayer也可以作為基類。dynamicmapservicelayer是動态地圖服務的基類,tiledmapservicelayer是切片地圖服務的基類。第3章“添加圖形到地圖”完全使用圖形和graphicslayer,是以我們将在本書後面部分讨論這種類型的圖層。layer、dynamicmapservicelayer和tiledmapservicelayer都是基類,是以在應用程式中不可以從這些類中指定建立一個對象。

《JavaScript建構Web和ArcGIS Server應用實戰》——2.5 使用地圖服務圖層

2.5.2 切片地圖服務圖層

如前面部分提到的那樣,切片地圖服務圖層引用預先定好的圖檔緩存切片拼接在一起顯示一幅無縫的地圖,它通常用作底圖。

如圖2-7所示,arcgistiledmapservicelayer類使用在當引用arcgis server暴露的切片(緩存)地圖服務時。這種類型的對象使用已經緩存過的切片地圖集合,是以性能得以改善。arcgistiledmapservicelayer構造函數接收url指針指向地圖服務,以及一些允許為地圖服務指定id和控制其透明度與可見性的選項。

《JavaScript建構Web和ArcGIS Server應用實戰》——2.5 使用地圖服務圖層

https://yqfile.alicdn.com/3e25aba43ab95de18dfaaac0954e81cd5f9c560e.png" >

如下列示例代碼,注意arcgistiledmapservicelayer構造函數接收一個引用地圖服務的參數。當一個圖層的執行個體建立後,調用接收一個包含引用切片地圖服務圖層的變量到map.addlayer()方法中并添加到地圖上。

arcgistiledmapservicelayer主要用來快速顯示緩存的地圖資料。你還可以控制顯示資料的層級。比如,你想展示廣義的arcgistiledmapservice的資料,當使用者放大到0~6級别時顯示州際公路和高速公路,一旦使用者進一步放大就切換到更詳細的arcgistiledmapservice。你還可以控制添加到地圖上的每個圖層的透明度。

2.5.3 動态地圖服務圖層

顧名思義,如圖2-8所示,arcgisdynamicmapservice類用來動态建立arcgis server地圖服務。和arcgistiledmapservicelayer一樣,arcgisdynamicmapservicelayer的構造函數接收一個指向地圖服務的url和一些參數選項用來為服務配置設定一個id、設定地圖圖檔的透明度和圖層初始可見性選項為true或者false。arcgisdynamicmapservicelayer的類名有時有誤導性。雖然看上去是引用一個單獨的資料圖層,但實際上不是。它指的是一個地圖服務而不是一個資料圖層。地圖服務内部的單個圖層可以通過setvisiblelayers()方法來打開或者關閉。

《JavaScript建構Web和ArcGIS Server應用實戰》——2.5 使用地圖服務圖層

建立一個arcgisdynamicmapservicelayer的執行個體和arcgistiledmapservicelayer非常類似,下列示例代碼說明了這一點。構造函數接收一個指向地圖服務的url參數。第二個參數定義了可選參數,用來控制透明度、可見性和圖像參數。

如下列代碼所示,将上面兩行代碼添加到arcgis api for javascript沙盒中。

運作上面的代碼可以看到動态圖層添加到了地圖上,如圖2-9所示。

《JavaScript建構Web和ArcGIS Server應用實戰》——2.5 使用地圖服務圖層

https://yqfile.alicdn.com/e1c32b9c4d9c0401d8402e12477bb0461b28d2ec.png" >

使用arcgisdynamicmapservicelayer執行個體可以執行多種操作。顯然,你可以建立地圖來顯示服務中的資料,你還可以查詢服務圖層中的資料、通過層定義控制特征顯示、控制單個圖層的可見性、設定時間相關資訊、導出地圖為圖檔、控制背景透明度和進行更多操作。

2.5.4 添加圖層到地圖

addlayer()方法接收一個圖層(arcgisdynamicmapservicelayer或者arcgistiledmapservicelayer)的執行個體作為第一個參數,一個可選索引訓示圖層放置的位置。下列示例代碼建立了一個新的arcgisdynamicmapservicelayer執行個體指向服務的url。然後調用map.addlayer()并傳遞圖層的一個新的執行個體。服務中的圖層現在在地圖上可見。

addlayer()方法接收圖層對象數組并一次添加成功。

除了能夠添加圖層到地圖外,還可以使用map.removelayer()或者map.removealllayers()來從地圖中移除某個或者所有圖層。

2.5.5 地圖服務設定可見圖層

可以使用setvisiblelayers()方法控制動态地圖服務中單個圖層的可見性。該方法僅适用于動态地圖服務圖層,對切片地圖服務圖層則不适用。該方法接收一個整型數組,對應地圖服務中的資料圖層索引編号。

這個數組是從0開始的,是以地圖服務中的第一個圖層占據位置0。如圖2-10所示,demographics地圖服務中demographics/esri_census_usa占據索引0。

《JavaScript建構Web和ArcGIS Server應用實戰》——2.5 使用地圖服務圖層

是以,如果隻想顯示這個服務中的census block points和census block group圖層的話,我們可以使用setvisiblelayers()方法,如下列代碼所示。

{"slider":false,"nav":true,"opacity":0.5,"imageparameters":imageparameters}

{"nav":true,"opacity":0.5,"imageparameters":imageparameters}

var map = new map("mapdiv", {

var map = new map("map");

var extent = new extent(-95.271, 38.933, -95.228, 38.976);

map.setextent(extent);

var extent = new extent();

extent.xmin = -95.271;

extent.ymin = 38.933;

extent.xmax = -95.228;

extent.ymax = 38.976;

map = new map("mapdiv", {extent:esri.geometry.geographictowebmercator (myservice2.fullextent) });

繼續閱讀