原文來自于
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"
});
