网络场景 - slide
slide 保存着 WebScene 和 SceneView 的几个预设属性的快照，例如 basemap、viewpoint、visible layers。
slide 还包含title、description、thumbnail 之类元数据。slide 可以被创建、更新、应用到 SceneView 。除此之外，slide 还也能存储为 WebScene.presentation 的一部分。
这个示例演示了如何从 ArcGIS for Portal item 加载 WebScene 并使用它的 slide。使用 slide 能导航场景到指定视图或者说是准确地恢复场景到一个状态。这个示例显示了如何新建 slide 并保存到 WebScene 的 presentation 中。
这个程序描绘了一个在波特兰市虚构的城市开发项目，它包含几个 slide 。每个 slide 会切换图层的可见性或包含不同的开发景观。
WebScene 的 presentation 属性用于处理场景的 slide 。slide 的属性能创建 DOM 元素并显示到每个景观中。
程序完整源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Web scene - slides - 4.5</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#createSlideDiv {
background-color: white;
opacity: 0.9;
color: black;
padding: 6px;
}
#slidesDiv {
background-color: white;
opacity: 0.9;
color: black;
padding: 10px;
visibility: hidden;
bottom: 20px;
overflow-y: auto;
text-align: center;
height: 260px;
}
#slidesDiv .slide {
/* 设置 停留在 slide 上的指针形状 */
cursor: pointer;
margin-bottom: 6px;
}
#slidesDiv .slide .title {
/* 文本水平居中 */
text-align: center;
}
/* Draw active slide with a nice border around the thumbnail */
#slidesDiv .slide.active img {
box-shadow: 0px 0px 12px black;
border-style: solid;
border-width: thin;
border-color: black;
}
</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/views/SceneView",
"esri/WebScene",
"esri/webscene/Slide",
"dojo/dom-construct",
"dojo/dom-class",
"dojo/dom",
"dojo/on",
"dojo/query",
"dojo/domReady!"
], function(
SceneView, WebScene, Slide, domConstruct, domClass, dom, on, query
) {
/*********************************************************************
* 创建一个 WebScene, 应用保存在网上的 WebScene 的 ID
*********************************************************************/
var scene = new WebScene({
portalItem: {
id: "1c7a06421a314ac9b7d0fae22aa367fb"
}
});
var view = new SceneView({
map: scene,
container: "viewDiv"
});
// 把 DOM 元素放到 视图右上角
view.ui.add(["createSlideDiv", "slidesDiv"], "top-right");
/*********************************************************************
* 函数: 创建 DOM 节点并添加到 slidesDiv 中
*********************************************************************/
function createSlideUI(slide, placement) {
/*********************************************************************
* 创建一个包含所有 slide 信息的 div
*********************************************************************/
var slideElement = domConstruct.create("div", {
id: slide.id,
className: "slide"
});
/*********************************************************************
* 把新建的 DOM 元素放到 slidesDiv 的起始位置
*********************************************************************/
var position = placement ? placement : "last";
domConstruct.place(slideElement, "slidesDiv", position);
/*********************************************************************
* 创建一个 div 元素来包含 slide 标题
*********************************************************************/
domConstruct.create("div", {
textContent: slide.title.text,
className: "title"
}, slideElement);
/*********************************************************************
* 创建一个 img 元素来放置新建的 slide 元素，它将引用 slide 的缩略图
*********************************************************************/
domConstruct.create("img", {
src: slide.thumbnail.url,
title: slide.title.text
}, slideElement);
/*********************************************************************
* 为新建的 slide 设置单击事件处理.
*********************************************************************/
on(slideElement, "click", function() {
/*******************************************************************
* 从 .slide 元素中移除 active 类
*******************************************************************/
query(".slide").forEach(function(node) {
domClass.remove(node, "active");
});
/*******************************************************************
* 在当前元素上添加 active 类
*******************************************************************/
domClass.add(slideElement, "active");
/******************************************************************
* 将 slide 设置到 SceneView.
*
* 每个 slide 有一个 viewpoint 属性和 visiablelsyers 属性。
* 他们定义了相机或者视图的位置以及可见的图层
******************************************************************/
slide.applyTo(view);
});
}
view.then(function() {
/*********************************************************************
* slide 将被放到 'slidesDiv' 元素中 .
*********************************************************************/
dom.byId("slidesDiv").style.visibility = "visible";
/*********************************************************************
* 在 WebScene 的 presentation 中，slide 是一个集合。
*********************************************************************/
var slides = scene.presentation.slides;
/*********************************************************************
* 遍历集合中的 slide 并显示
*********************************************************************/
slides.forEach(createSlideUI);
/*********************************************************************
* 当单击 Create 按钮时，使用 Slide.createFrom 新建一个 slide
*********************************************************************/
on(dom.byId("createSlideButton"), "click", function() {
/*******************************************************************
* Slide.createFrom 返回一个 promise
*******************************************************************/
Slide.createFrom(view).then(function(slide) {
slide.title.text = dom.byId("createSlideTitleInput").value;
scene.presentation.slides.add(slide);
createSlideUI(slide, "first");
});
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="createSlideDiv">
New slide: <input type="text" id="createSlideTitleInput" size="10" />
<button
id="createSlideButton">Create</button>
</div>
<div id="slidesDiv"></div>
</body>
</html>
程序运行效果：
（完）