arcgis api3.x for js轉向arcgis api4.x，我也是最近的3-4個月時間的事情，剛好公司有個webgis項目需要展示三維場景，項目選擇arcgis api4.x。我純碎記錄一下自己學習arcgis api4.x過程中的一些心得體會，自己個人的一些理解，不對之處，還請各位同仁見諒以及多多指教。

一、談談本篇自己認為比較重要的幾個專業術語名稱的理解：

1.View

View即視圖，提供了查看和與地圖組件交互的方法。地圖僅僅是一個容器，存儲了包含在基礎層和操作層中的地理信息，而視圖呈現地圖及其各個層，使它們對用戶可見。View是基類，它有兩個子類，代表兩種類型的視圖：MapView和SceneView。

2.MapView

MapView顯示一個二維視圖的地圖實例，MapView必須建立和參考至少兩個對象：一個地圖實例和一個DOM元素，每個分別設置在映射和容器屬性中。

3. SceneView

SceneView顯示3D查看地圖或webscene實例，渲染3D技術采用的是WebGL。SceneView必須有有效的地圖實例和一個DOM元素中的一個非零的高度和寬度來渲染。

4.Map

map類包含用於存儲、管理和覆蓋二維和三維視圖共同的圖層的屬性和方法。圖層可以添加和刪除掉，但通過一個視圖（在二維查看數據）或場景視圖中能（在3D查看數據）。因此，地圖的實例是一個簡單的容器保存層，而視圖顯示與地圖的層和基相互作用的方式。Map類有兩個子類：WebMap以及WebScene，分別對應二維視圖MapView和三維視圖SceneView。

5.Basemap

Basemap用於創建自定義底圖。這些底圖創建可以從自己服務器發布瓦片服務或者由第三方發布的瓦片服務。

6.Camera

Camera相機從位置、傾斜和航向角度來定義SceneView視圖可見程度，Camera只適用於3D sceneviews。

二、arcgis api4.x離線部署：

離線部署的思路跟我之前寫的：arcgis api3.x離線部署，基本一致的。稍微改的是我在項目裏面定義一個變量arcgisapiPath來配置離線api的路徑：

var arcgisapiPath = "http://localhost:8888/ocean/js/arcgisapi/4.5/dojo";

然後配置api的init.js以及dojo.js文件即可：

備註：項目引用arcgis api之前，必須要引入arcgisapiPath變量才行，不然api的離線配置那裏獲取不到arcgisapiPath配置路徑的。

三、基礎底圖具體實現思路：

1.配置地圖信息文件mapconfig.js

/* --------------------------------地圖初始信息配置-------------------------------- */
function MapConfig() { }
MapConfig.mapInitParams = {
    fullExtent: {//全圖範圍
        xmin: 13026179.382488998,
        ymin: 2677291.306672236,
        xmax: 13044409.613734988,
        ymax: 2685919.1362399133    
    },
    extent: {//初始化範圍
        xmin: 11810425.929735247,
        ymin: 2257718.8019195194,
        xmax: 13209314.679703815,
        ymax: 2956468.0219521355
    }, 
    center: {        
        x:12561975.237333735,
        y:2440969.8343777806,
        spatialReference:3857
    },
    spatialReference: {
        wkid: 3857
    },
}
MapConfig.imgMap={Url: "http://localhost:6080/arcgis/rest/services/ImageMap/MapServer", LabelUrl: "", type: 1 };

2.初始化變量定義

var appConfig = {
                 mapView: null,
                 sceneView: null,
                 activeView: null,
                 container: "viewDiv" 
};

3.初始化視圖參數

var initialViewParams = {
                       map: map,
                       //zoom: 4,
                       //center: MapConfig.center,
                       extent:new Extent({
                           xmin: MapConfig.mapInitParams.extent.xmin,
                           ymin: MapConfig.mapInitParams.extent.ymin,
                           xmax: MapConfig.mapInitParams.extent.xmax,
                           ymax: MapConfig.mapInitParams.extent.ymax,
                           spatialReference: {
                             wkid: MapConfig.mapInitParams.spatialReference.wkid
                           }
                         }),
                       container: appConfig.container
};

部分參數說明：

（1）extent，視圖初始化顯示範圍；

（2）zoom，視圖初始化縮放級別；

（3）center，視圖初始化顯示的中心點位置；

（4）container，視圖渲染的容器DIV；

    <div id="viewDiv" class="map">
        <div class="themeBtn">
             <div id="infoDiv">
                 <input class="esri-component esri-widget-button esri-widget esri-interactive" type="button" id="switch-btn" value="2D">
            </div> 
        </div>  
    </div>

（5）map，地圖對象。

 //加載默認影像底圖
 var imgLayer = new TileLayer({
                         url: MapConfig.imgMap.Url,
                         id:  "BaseMapID"
 });
 var imgBasemap  = new Basemap({
                         baseLayers: [imgLayer],
                         title: "影像底圖",
                         id: "imgBasemap"
 });
 var map = new Map({
                       basemap: imgBasemap                                   });

4.默認創建三維視圖模式：

appConfig.sceneView = createView(initialViewParams, "3d");
appConfig.activeView = appConfig.sceneView;           
initialViewParams.container = null;
appConfig.mapView = createView(initialViewParams, "2d");
function createView(params, type) {
                       var view;
                       var is2D = type === "2d";
                       if (is2D) {
                         view = new MapView(params);
                         return view;
                       } else {
                         view = new SceneView(params);
                       }
                       return view;
}

5.實現效果如下：

四、二三維模式切換具體實現思路：

1.2D3D按鈕監聽事件：

var switchButton = document.getElementById("switch-btn");
switchButton.addEventListener("click", function() {
    switchView();
});

2.二三維切換功能實現：

function switchView() {
    var is3D = appConfig.activeView.type === "3d";
    appConfig.activeView.container = null;
    if (is3D) {
                         appConfig.mapView.viewpoint = appConfig.activeView.viewpoint.clone();
                         appConfig.mapView.container = appConfig.container;
                         appConfig.activeView = appConfig.mapView;
                         switchButton.value = "3D";
                       } else {
                         appConfig.sceneView.viewpoint = appConfig.activeView.viewpoint.clone();
                         appConfig.sceneView.container = appConfig.container;
                         appConfig.activeView = appConfig.sceneView;
                         switchButton.value = "2D";
                       }                       
                     }

3.實現效果如下：

arcgis api 4.x for js之基礎地圖篇