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;   //这种方式取决于地图坐标系相同
        }
    }
});