原文來自于
Maps and Views:https://developers.arcgis.com/javascript/latest/guide/maps-and-views/
介紹
地圖(Map)是用于管理對圖層(layers )和底圖(basemaps)的引用的容器烤咧。視圖(Views)用于顯示地圖圖層并處理用戶交互恰响,彈出窗口,窗口小部件和地圖位置遮糖。
關(guān)于地圖
地圖是從Map類創(chuàng)建的嫌变。Map對象始終傳遞給View對象璃饱。有兩個View類用于顯示地圖:MapView用于2D地圖 和 SceneView類用于3D地圖胖笛。
創(chuàng)建地圖
創(chuàng)建地圖的一種方法是:Map類在指定一個底圖(basemap)和可選的圖層集合(layers)時創(chuàng)建類的新實例。
const myMap = new Map({ // 創(chuàng)建一個Map對象
basemap: "streets-vector",
layers: additionalLayers // 可選画切,添加其他圖層集合
});
const mapView = new MapView({ // 新建View對象竣稽,Map對象添加到View對象中
map: myMap,
container: "mapDiv"
});
詳細了解可以添加到地圖的不同類型的圖層。
從Web地圖或Web場景創(chuàng)建地圖
創(chuàng)建地圖的第二種方法是:加載Web地圖(用于2D地圖)或 Web場景(用于3D地圖)。
Web地圖和Web場景是包含地圖或場景設(shè)置的JSON結(jié)構(gòu)毫别。這包括底圖娃弓,圖層,圖層樣式拧烦,彈出窗口忘闻,圖例钝计,標(biāo)簽等的設(shè)置恋博。它們通常與ArcGIS Online地圖查看器或ArcGIS Online場景查看器以交互方式創(chuàng)建。ArcGIS Online或ArcGIS Enterprise為其分配唯一ID并將其存儲為門戶項目私恬。
WebMap
類和WebScene
類可分別通過其獨特的ID來訪問加載Web地圖和Web場景债沮。標(biāo)識項目的ID可以用在地圖查看器和場景查看器或者項目頁面中中的URL的參數(shù)。默認門戶網(wǎng)站是ArcGIS Online本鸣,URL是https://www.arcgis.com
疫衩。如果使用ArcGIS Enterprise,則必須指定門戶URL荣德。
例:
https://www.arcgis.com/home/item.html?id=41281c51f9de45edaf1c8ed44bb10e30
當(dāng)WebMap
和WebScene
對象加載Web地圖和Web場景時闷煤,所有設(shè)置都會自動應(yīng)用于Map
和Scene
。例如涮瞻,設(shè)置底圖和圖層鲤拿,應(yīng)用圖層樣式,并為每個圖層定義彈出窗口署咽。
注意:配置
Map
和Scene
的最快方法是近顷,以交互方式創(chuàng)建Web地圖和Web場景并通過唯一ID加載它們。在創(chuàng)建Web地圖”和顯示W(wǎng)eb地圖教程中了解如何創(chuàng)建和加載Web地圖宁否。
-
用WebMap創(chuàng)建地圖
const webMap = new WebMap({ // 定義Web地圖實例
portalItem: {
id: "41281c51f9de45edaf1c8ed44bb10e30",
portal: "https://www.arcgis.com" // 默認值:ArcGIS門戶網(wǎng)站
}
});
const view = new MapView({
map: webMap, // 加載Web地圖
container: "viewDiv"
});
在顯示W(wǎng)eb地圖教程中了解更多信息窒升。
-
用WebScene創(chuàng)建場景
const webScene = new WebScene({ // Define the web scene reference
portalItem: {
id: "579f97b2f3b94d4a8e48a5f140a6639b",
portal: "https://www.arcgis.com" // Default: The ArcGIS Online Portal
}
});
const view = new SceneView({ // Load the web scene
map: webScene,
container: "viewDiv"
});
在顯示W(wǎng)eb場景教程中了解更多信息。
關(guān)于視圖
視圖的主要作用是顯示圖層慕匠,彈出窗口和UI小部件饱须,處理用戶交互,以及指定地圖應(yīng)該關(guān)注的世界的哪個部分(即地圖的“范圍”)台谊。
創(chuàng)建視圖
有單獨的類用于為地圖和場景創(chuàng)建視圖:MapView
和SceneView
類蓉媳。MapView
用于顯示對象的2D視圖,和SceneView
用于顯示3D視圖Map
青伤。
要使地圖可見督怜,視圖對象需要一個Map
對象,并且container
屬性正確引用div
元素的id
屬性狠角。
const mapView = new MapView({ // Create MapView object
map: myMap,
container: "mapViewDiv"
});
const sceneView = new SceneView({ // Create SceneView object
map: myMap,
container: "sceneViewDiv"
});
設(shè)置地圖的顯示內(nèi)容
創(chuàng)建視圖SceneView
或MapView
時可以通過在設(shè)置中心點center
和(縮放級別zoom
或比例尺scale
)屬性來設(shè)置的初始位置号杠。
const view = new MapView({
center: [ -112, 38 ], // 地圖的中心 經(jīng)度/緯度
zoom: 13 // 將細節(jié)的縮放級別(LOD 細節(jié)層次(en:Level of detail))設(shè)置為13
});
注意:通過以編程方式更新屬性,視圖初始位置也可以改變。
使用SceneView
(3D)時姨蟋,可以通過定義鏡頭camera
屬性來設(shè)置觀察者的位置屉凯。
var view = new SceneView({
camera: {
position: [
-122, // 經(jīng)度lon
38, // 緯度lat
50000 // 海拔(米)
],
heading: 95, // 相機的羅盤角度
tilt: 65 // 相機相對于地面的傾斜
}
});
了解如何在創(chuàng)建入門應(yīng)用程序教程中創(chuàng)建2D和3D視圖。
將視圖設(shè)置為新位置的動畫
該goTo
方法還可以更改視圖MapView
的位置眼溶,而且提供了平滑過渡的附加選項悠砚。該技術(shù)通常用于地圖中心從一個位置“飛行”到另一個位置或者縮放到搜索結(jié)果。
該goTo
方法可以接受Geometry
堂飞,Graphic
或Viewpoint
對象灌旧。其他選項可以控制動畫。
view.goTo({ // 自定義動畫移動到設(shè)定的點
target: {
center: [ -114, 39 ]
}, {
duration: 5000
});
});
與視圖交互
該視圖還負責(zé)處理用戶交互和顯示彈出窗口绰筛。該視圖為用戶交互提供了多個事件處理程序枢泰,例如鼠標(biāo)單擊,鍵盤輸入铝噩,觸摸屏交互衡蚂,操縱桿和其他輸入設(shè)備。
當(dāng)用戶單擊地圖時骏庸,默認行為是顯示已在圖層中預(yù)先配置的任何彈出窗口毛甲。可以使用以下代碼具被,通過監(jiān)聽click
事件并使用該hitTest()
方法查找用戶單擊的功能玻募。
view.popup.autoOpenEnabled = false; // 禁用默認彈出行為
view.on("click", function(event) { // 監(jiān)聽點擊事件
view.hitTest(event).then(function (hitTestResults){ // 用戶單擊的功能實現(xiàn)
if(hitTestResults.results) {
view.popup.open({ // 打開一個彈出窗口以顯示結(jié)果
location: event.mapPoint,
title: "Hit Test Results",
content: hitTestResults.results.length + "Features Found"
});
}
})
});
將小部件和UI組件添加到視圖中
視圖也是用于添加窗口小部件和HTML元素的容器硬猫。在view.ui
提供了一個DefaultUI其用于顯示視圖的缺省窗口小部件补箍。還可以使用view.ui.add
方法將其他窗口小部件和HTML元素添加到視圖中。下面的代碼片段演示了添加搜索地址或地點的小部件啸蜜。
var searchWidget = new Search({
view: view
});
// 將搜索小部件添加到視圖的右上角
view.ui.add(searchWidget, {
position: "top-right"
});