【三】ArcGIS API for JavaScript 4.x之二三维视图转换

1、引言

本篇以加载OSM为例，主要介绍基于ArcGIS API for JavaScript 4.x 版本实现2D、3D地图视图的切换功能；
下面是运行效果：

2、代码讲解

这里我们自定义了一个视图切换的模块ViewTransformation。实现思路：基于4.x版本将地图和视图分离的特点，以“一个Map，两个View”的思路来实现。具体而言，在视图切换的时候Map不变，根据当前视图的状态（参数），重新初始化View，即视图在MapView和SceneView之间来切换。

• 获取当前视图状态
  switchView()方法主要获取当前视图的viewpoint，视点用来描述2D、3D视图状态，2D中视点包含视图中心点和比例尺，3D中使用相机camera来确定，可用于视图定位导航、创建书签。
  
  基于当前视图状态，重新定义视图参数对象ViewParams。

switchView: function (type) {
    let activeViewpoint = view.viewpoint.clone();
    this.ViewParams = {
        map:map,
        container:"mapview",
        viewpoint: activeViewpoint
    };
    this.createView(this.ViewParams, type);
}

• 初始化视图
  根据传入的参数type，对view进行重新初始化，同时修改按钮内的文本内容：

createView: function (params, type) {
    this.showwaiting();
    view = null;
    if (type == '3D') {
        view = new SceneView(params);
        $("#viewswitch").text('2D');
    }else{
    	//避免视图旋转
        params.viewpoint.rotation = 0;
        view = new MapView(params);
        $("#viewswitch").text('3D');
    }
    setTimeout(this.removewaiting, 3000);
}

• 切换过渡效果
  在上一步中有两个函数方法showwaiting()、removewaiting()，它们主要负责在切换时添加一个过渡的效果界面，即动态创建一个DIV：

showwaiting: function(){
    var _PageHeight = $(window).height();
    var _PageWidth = $(window).width();
    var _LoadingTop = _PageHeight > 60 ? (_PageHeight - 60) / 2 : 0,
        _LoadingLeft = _PageWidth > 180 ? (_PageWidth - 180) / 2 : 0;
    var waitingDiv = '
+ _PageHeight + 'px;top:0;background:#F5F5F5;opacity:1;filter:alpha(opacity=80);z-index:10000;">
+ _LoadingLeft + 'px; top:' + _LoadingTop + 'px; width: auto; height: 60px; line-height: 60px; padding-left: 70px; padding-right: 15px;opacity:1; background: #fff url(image/loading.gif) no-repeat scroll 15px 10px; border: 1px solid #337AB7; color: #696969; font-family:\'Microsoft YaHei\';z-index:10005">视图加载中...
';
$("#mapview").append(waitingDiv);
},
removewaiting: function(){
$("#WaitingTip").fadeOut("normal", function () {
$(this).remove();
});
$("#WaitingTipText").fadeOut("normal", function () {
$(this).remove();
});
}

• 绑定事件
  对切换按钮【#viewswitch】绑定单击事件，传入type参数：

startup: function () {
    $("#viewswitch").click(lang.hitch(this, function (event) {
        this.switchView(event.currentTarget.innerText);
    }))
}

• 外部调用

require([
   "esri/Map",
    "esri/views/SceneView",
    "widget/ViewTransformation",
    "dojo/domReady!"
], function (Map,SceneView,ViewTransformation) {
    map = new Map({
        basemap: "osm"
    });
    view = new SceneView({
        container: "mapview",
        map: map,
        center: [108.62, 36.32],
        zoom: 4
    });

    var viewtrans = new ViewTransformation();
    viewtrans.startup();
});

3、注意事项

• 微件的使用

如果用到带有view参数的微件，如长度、面积测量（DistanceMeasurement2D、AreaMeasurement2D、DirectLineMeasurement3D、AreaMeasurement3D）、比例尺ScaleBar、草图绘制Sketch等等，这些微件在视图切换后，同样需要重新初始化才可以使用；

• 倾斜角度、方向角度

如果在三维视图下对地图进行了旋转，直接切换到二维可能会得到一个旋转的二维地图：
因此，在三维切换到二维的时候，我们可以修改rotation的值为0，使地图旋转到正北方向。

在二维转到三维的时候，camera中的参数会根据当前视图范围显示初始化，故我们可以在切换前修改相机参数（倾斜角tilt、位置position）等参数来满足实际需求。

• 全局变量

我们在自定义模块中经常使用到map和view，因此我们习惯性将他们定为成全局变量。