二维地图切换到三维地图
本示例演示了如何使用相同的Map实例将地图视图从 2D 切换到 3D。单击视图左上角的 3D 按钮将视图从 2D 切换到3D，反之亦然。
实现这个功能需要将起始视图中的容器设置为目标视图的容器，在目标视图上设置地图实例和视点。
程序完整源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Switch view from 2D to 3D - 4.5</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#infoDiv {
position: absolute;
top: 15px;
left: 60px;
}
#infoDiv input {
border: none;
box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
<script src="https://js.arcgis.com/4.5/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/views/SceneView",
"dojo/domReady!"
], function(Map, MapView, SceneView) {
// 切换按钮
var switchButton = document.getElementById("switch-btn");
var appConfig = {
mapView: null,
sceneView: null,
activeView: null,
container: "viewDiv"
};
var map = new Map({
basemap: "streets",
ground: "world-elevation"
});
var initialViewParams = {
map: map,
zoom: 4,
center: [15, 65],
container: appConfig.container
};
// 创建二维视图 并记为激活状态
appConfig.mapView = createView(initialViewParams, "2d");
appConfig.activeView = appConfig.mapView;
// 创建三维视图，不初始化
initialViewParams.container = null;
appConfig.sceneView = createView(initialViewParams, "3d");
// 设置按钮单击事件处理
switchButton.addEventListener("click", function() {
switchView();
});
// 切换视图的函数
function switchView() {
var is3D = appConfig.activeView.type === "3d"; //激活视图是否是三维的
// 移除之前的值
appConfig.activeView.container = null;
if (is3D) {//当激活视图是三维的，切换为二维的
// 设置 mapview
appConfig.mapView.viewpoint = appConfig.activeView.viewpoint.clone();
appConfig.mapView.container = appConfig.container;
// 更新配置
appConfig.activeView = appConfig.mapView;
switchButton.value = "3D";
} else {
appConfig.sceneView.viewpoint = appConfig.activeView.viewpoint.clone();
appConfig.sceneView.container = appConfig.container;
appConfig.activeView = appConfig.sceneView;
switchButton.value = "2D";
}
}
// 用于创建二三维视图的函数
function createView(params, type) {
var view;
var is2D = type === "2d";
if (is2D) {
view = new MapView(params);
return view;
} else {
view = new SceneView(params);
}
return view;
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="infoDiv">
<input class="esri-component esri-widget-button esri-widget esri-interactive" type="button"
id="switch-btn" value="3D">
</div>
</body>
</html>
程序运行效果：
沙箱地址：https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=views-switch-2d-3d
（完）