arcgis api 4.x for js之基礎(chǔ)地圖篇

麋鹿終 2021-04-11

展開全文

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

一、談?wù)劚酒约赫J(rèn)為比較重要的幾個(gè)專業(yè)術(shù)語名稱的理解：

1.View

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

2.MapView

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

3. SceneView

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

4.Map

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

5.Basemap

Basemap用于創(chuàng)建自定義底圖。這些底圖創(chuàng)建可以從自己服務(wù)器發(fā)布瓦片服務(wù)或者由第三方發(fā)布的瓦片服務(wù)。

6.Camera

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

二、arcgis api4.x離線部署：

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

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

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

備注：項(xiàng)目引用arcgis api之前，必須要引入arcgisapiPath變量才行，不然api的離線配置那里獲取不到arcgisapiPath配置路徑的。

三、基礎(chǔ)底圖具體實(shí)現(xiàn)思路：

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.初始化視圖參數(shù)

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
};

部分參數(shù)說明：

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

（2）zoom，視圖初始化縮放級(jí)別；

（3）center，視圖初始化顯示的中心點(diǎn)位置；

（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，地圖對(duì)象。

 //加載默認(rèn)影像底圖
 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.默認(rèn)創(chuàng)建三維視圖模式：

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.實(shí)現(xiàn)效果如下：

四、二三維模式切換具體實(shí)現(xiàn)思路：

1.2D3D按鈕監(jiān)聽事件：

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

2.二三維切換功能實(shí)現(xiàn)：

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.實(shí)現(xiàn)效果如下：

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：麋鹿終 > 《wbgis》

舉報(bào)/認(rèn)領(lǐng)