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

目录

  • 1、引言
  • 2、代码讲解
  • 3、注意事项
        • 微件的使用
        • 倾斜角度、方向角度
        • 全局变量

1、引言

本篇以加载OSM为例,主要介绍基于ArcGIS API for JavaScript 4.x 版本实现2D、3D地图视图的切换功能;
下面是运行效果:
【三】ArcGIS API for JavaScript 4.x之二三维视图转换_第1张图片

2、代码讲解

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

  • 获取当前视图状态
    switchView()方法主要获取当前视图的viewpoint,视点用来描述2D、3D视图状态,2D中视点包含视图中心点和比例尺,3D中使用相机camera来确定,可用于视图定位导航、创建书签。
    【三】ArcGIS API for JavaScript 4.x之二三维视图转换_第2张图片
    基于当前视图状态,重新定义视图参数对象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参数的微件,如长度、面积测量(DistanceMeasurement2DAreaMeasurement2DDirectLineMeasurement3DAreaMeasurement3D)、比例尺ScaleBar、草图绘制Sketch等等,这些微件在视图切换后,同样需要重新初始化才可以使用;

  • 倾斜角度、方向角度

如果在三维视图下对地图进行了旋转,直接切换到二维可能会得到一个旋转的二维地图:【三】ArcGIS API for JavaScript 4.x之二三维视图转换_第3张图片
因此,在三维切换到二维的时候,我们可以修改rotation的值为0,使地图旋转到正北方向。

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

  • 全局变量

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

你可能感兴趣的:(ArcGIS,API,for,JS,4.x,ArcGIS,API,for,JS,二三维视图转换)