对于二三维联动,有多种方法进行实现,当时旧项目使用了当时能掌握的一种写法,在技能提升了这么多后当然要对这些写法做一个总结。

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