arcgis for javascript(4.12)的Map對象和MapView對象

如果你剛入門,想要在頁面上加載地圖。推舉你先去看看官網初學者教程https://developers.arcgis.com/javascript/latest/guide/?會講得更詳細一點。初始化地圖一般需要兩步

1,初始化map對象,map對象是管理圖層的容器。

let map = new Map();

看看官網對map對象怎樣解釋

The Map class contains properties and methods for storing, managing, and overlaying?layers?common to both 2D and 3D viewing. Layers can be added and removed from the map, but are rendered via a?MapView?(for viewing data in 2D) or a?SceneView?(for viewing data in 3D).

理解起來意思就是,map對象是圖層存放的容器,可以對圖層進行管理,比如添加,刪除等操作。map對象對于2D,3D場景情形都是通用的。

map對象常見哪些屬性呢(只考慮二維情況)

(1)basemap 指定地圖地圖的底圖,一般都會指定一個圖層做地圖底圖,然后地圖的默認坐標系為底圖坐標系。

?(2)layers 操作圖層的集合,可以在這里對加入map的圖層進行管理

(3)allLayers所有圖層,這個屬性會把map對象里的basemap ,layers 都會列出來。

2,初始化view對象,綁定dom元素。view對象是底圖(basemap),操作圖層(layers)和用戶交互的橋梁,view對象包含2d,3d的情況,分別用MapView,SceneView構造函數來初始化

let view = new MapView({

? ? ? container: "viewDiv",

? ? ? map: map,

? ? ? center: [-118.80500, 34.02700],?

? ? ? ?zoom: 13? ? });

官網解釋

A view provides the means of viewing and interacting with the components of a?Map. The?Map?is merely a container, storing the geographic information contained in base layers and operational layers. The View renders the?Map?and its various?layers, making them visible to the user.

view對象提供了查看Map組件并與之交互的方法。map對象僅僅是一個容器,存儲了基本圖層和操作圖層中的地理信息。視圖則將渲染地圖及其各個圖層,從而使用戶可見

那我們看看view對象提供了哪些常用屬性或接口(主要解釋2維的情況MapView)

常用屬性

1,animation?視圖的動畫效果,初始化goTo()方法產生的動畫效果,goTo()方法下面介紹

2,center?視圖中心,是[x,y]的格式,x,y分別是經度和維度

3,container?這是view對象綁定的dom元素,初始化view需要指定一個div之類的

4,extent?視圖范圍,傳入經緯度范圍數組

5,graphics?這個屬性允許直接把一個graphic添加到view對象進行管理,graphic一般是會加到graphicLayer

6,height,width?視圖的高,寬

7,map?將初始化好的map對象傳入這個屬性,然后view對象就可以管理map對象的底圖或操作圖層了

8,popup?顯示地圖圖層屬性信息的彈框

9,resolution?視圖的分辨率

10,scale?比例尺

11,spatialReference?坐標系

12,ui?用于放置默認組件,比如放大,縮小,指北針等按鈕,你可以在ui添加你自定義組件

13,zoom?視圖的圖級,一般地圖服務會按照很多個等級進行顯示,設置zoom后就從當前級別顯示地圖

常用方法

14,goTo() 用于視圖位置跳轉,可以跳轉到

(1)[x,y]某個坐標位置

(2)Geometry?某個幾何對象(點線面)

(3)Graphic?某個圖形對象(點線面)

(4)Viewpoint?視點

(5)還可以是target,?center,?scale?and?rotation 等屬性的組合情形

比如視圖5秒之后跳到[-126,49]這個位置

var pt =newPoint({latitude:49,longitude:-126});

var opts = {

duration:5000

};

view.goTo({

target: pt,

zoom:15

}, opts);

15,on()注冊視圖事件,比如點擊,拖拽,鼠標滾輪滾動等

view.on("click", function(event){

? // event is the event handle returned after the event fires.

? console.log(event.mapPoint);

});

16,toMap()將屏幕坐標轉成地圖坐標

17,toScreen()將地圖坐標轉成屏幕坐標

18,when()用于確定視圖初始話好了之后,進行操作

19,hitTest() 返回每個圖層與指定屏幕坐標相交的元素,經常會用到這個方法哈,用于鼠標點擊獲取地圖圖層的要素信息


view對象就介紹這么多吧,在實際開發(fā)過程中可能會碰到這些情形,可以試著解決一下

1,添加圖層,刪除指定圖層,調整多個圖層的顯示順序(z-index)

2,將地圖視圖跳轉到某個位置,某個幾何對象,并加上動畫效果

3,清除掉默認是地圖組件,比如默認的放大,縮小按鈕

4,屏蔽掉地圖默認事件,比如雙擊放大效果

5,點擊操作圖層某個位置獲取該位置的要素信息

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內容