Arcgis API for JS——普通分屏聯動及二三維聯動

對於二三維聯動，有多種方法進行實現，當時舊項目使用了當時能掌握的一種寫法，在技能提升了這么多后當然要對這些寫法做一個總結。

一、通過監聽View上的鼠標事件變化來進行分屏聯動（同一坐標系）

（同理可以用此方法進行二三維聯動）

前期工作，簡單創建了四個View：

（已經不再是當時那種小白，建4個View寫4遍var view = new MapView()，想想真丟人）

var views = []
//根據需要來創建多個視圖並綁定地圖容器div的id
for (var i = 0; i < 4; i++) {
      var view = new MapView({
            map: map,
            container: 'map_' + i
      })
      views.push(view);
}

接下來就是多屏聯動的功能了：

on('load', function () {
    views && views.forEach(function (view) {
        //定義一個范圍變量
        var fullextent = null;
        //設置鼠標滾輪事件
        view.on("mouse-wheel", function (e) {
            //延遲獲取范圍的函數
            window.setTimeout(function () {
                //獲取操作圖層的范圍
                fullextent = view.extent
                //遍歷所有視圖來設置這個范圍
                views.forEach(function (nview) {
                    nview.extent = fullextent
                })
            }, 1000)
        })
        //設置鼠標拖拽事件
        view.on("drag", function (e) {
            //獲取操作圖層的范圍
            fullextent = view.extent
            //遍歷所有視圖來設置這個范圍
            views.forEach(function (nview) {
                nview.extent = fullextent
            })
        })
    })
})

感覺代碼簡潔了好多，下面就是效果圖了（雖然丑爆了，畢竟是簡單記錄一下嘛）。

 

二、通過控制放置View的DIV進行二三維聯動（不同坐標系）

（同理可以用此方法進行分屏聯動）

使用Jquery Easy UI插件，使用了tab選項卡，不同的選項卡放置了MapView和SceneView

<div id="tt" class="easyui-tabs">
       <div id="mapDiv" title=" 二維地圖" class="tab-page"></div>
       <div id="sceneDiv" title="三維地圖" class="tab-page"></div>
</div>

通過點擊不同的選項卡進行聯動

//綁定事件
$('#tt').tabs({
    onSelect: function (title, index) {
        if (index == 0) {
            var params2Dto3D = new ProjectParameters({
                geometries: [sceneView.extent],
                outSpatialReference: s2364
            });
            geometryService1.project(params2Dto3D).then(function (result) {
                mapView.extent = result[0]
            })
        }
        else {
            var params3Dto2D = new ProjectParameters({
                geometries: [mapView.extent],
                outSpatialReference: s4326
            });
            geometryService1.project(params3Dto2D).then(function (result) {
                sceneView.extent = result[0];
                sceneViewlocal.extent = result[0];
            });
            //sceneViewlocal.clippingArea=xzqhLayer.fullExtent.expand(0.5);   //即地圖裁剪至xzqhLayer范圍的一半。
            //sceneViewlocal.extent = mapView.extent;   //這種方式取決於地圖坐標系相同
        }
    }
});