这是我的第一篇随笔，在开始正文前说几句。
这个系列会记录我学习Arcgis js API 4.10的全过程，希望能对自己也对其他有需要的人有帮助。很多时候上网看一些大神的帖子会感到一头雾水，一是自己水平没达到，二来大神的讲解会有跳跃性。因此在我的随笔中会尽可能详细的讲解每一步，并在需要时添加截图等媒介以便大家更好的理解。
还有一点很重要：我并不是所谓的大神，我只是和大家一样希望慢慢变成大神的菜鸟。
学习Arcgis js API最重要也是最有效的途径就是学习官网的Sample Code 和 API Reference。
网址：
Sample Code：https://developers.arcgis.com/javascript/latest/sample-code/index.html
API Reference：https://developers.arcgis.com/javascript/latest/api-reference/index.html
截图：
话不多说，今天的实例代码（sample code）是Web scene - slides
首先我们先去API文档中查一下Slide，给大家简单翻译了一下，详情见截图。在这个实例中，我们通过点击不同的幻灯片可以快速定位到幻灯片所示的场景。
下面开始分析代码
首先是引用部分，引用部分有固定的格式：
require(["xxx/a","xxx/xx/b"], function (a,b) {});
此实例中为：
在这里作者想多说几句关于map和View的问题：
地图(map)仅仅是一个容器，用于存储包含在基础层和操作层中的地理信息。视图(view)提供查看地图组件并与之交互的方法。视图渲染地图及其各个层，使其对用户可见。
有两种类型的视图：Mapview和sceneview。MapView以二维(2D)呈现地图及其图层。SceneView以三维(3D)呈现这些元素。view是MapView和SceneView的基类，没有构造函数,也就是说不存在引用"esri/views/View"。要创建视图，必须直接创建MapView或SceneView的实例。
第二部分为js代码部分，首先看下面的代码
学例子的时候一定要多翻翻API文档，比如下面add()方法，文档中给出了很明确的解释。
下面这个截图是将两个小部件放置于右上角的显示。
然后看下面的代码解析
为了更好理解上述过程，我在用示意图和文字描述一边
上述此方法主要是一下几步骤：1.建立slideElement的div元素（图中棕色）2.将slideElement作为第一个子元素添加到sildesDiv中（图中红色）3.建立title的div元素（图中蓝色），添加到slideElement作为子元素 4.建立img的div元素（图中黄色）添加到slideElement作为子元素
最后一部分代码解析如下：
所有关于ArcGIS JavaScript API的部分就结束了，作为一个完整的网页，还需要设置很多别的东西，我们在这里就不详细介绍了，最后是完整代码。
<!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.10</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 {
/* Show cursor as pointer when on a slide */
cursor: pointer;
margin-bottom: 6px;
}
#slidesDiv .slide .title {
/* Center the title text */
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.10/esri/css/main.css">
<script src="https://js.arcgis.com/4.10/"></script>
<script>
require([ //引用部分
"esri/views/SceneView",//SceneView--显示地图（map）或网络场景（WebScene）的3D视图
"esri/WebScene",//WebScene--是ArcGIS平台三位映射的核心元素。它定义了场景的内容、样式、环境和幻灯片，并且可以在多个Arcgis Web和桌面应用程序之间共享
"esri/webscene/Slide",//Slide--存储了Webscene和SceneView的几个预设属性的快照，如基础地图、视点和可见层
"@dojo/framework/shim/array"//array--数组，作者这里也不太懂，查了很多资料也不是很明白，希望懂得大神们解释一下，谢谢。
], function (SceneView, WebScene, Slide, Array) {//这里是固定格式。顺序要和引用顺序一致！！！顺序要和引用顺序一致！！！顺序要和引用顺序一致！！！
var scene = new WebScene({//定义一个名为scene的WebScene变量
portalItem: {//WebScened的一个属性：portalItem
id: "1c7a06421a314ac9b7d0fae22aa367fb"//portalItem的一个属性：id 每一个id都对应唯一的portalItem
}
});
var view = new SceneView({//定义一个名为view的SceneView变量
map: scene,//map属性--确定视图（view）渲染什么，在这里渲染上述定义的scene map属性是必须有的！！！
container: "viewDiv"//container属性，container的中文意思的容器，也就是说需要一个HTML元素作为容器展示视图（view），"viewDiv"是一个Div元素，我会在下文标注它
});
view.ui.add(["createSlideDiv", "slidesDiv"], "top-right");//ui的全称是user interface也就是用户界面，显示视图中可用的默认小部件，并允许打开或关闭这些小部件。
//view.ui.add(component, position?)方法，第一个参数是要素，第二个参数是位置，也就是把要素放置在哪个位置，这里是把"createSlideDiv"和"slidesDiv"元素放置在右上角（"top-right"）
function createSlideUI(slide, placement) {//定义一个名为createSlideUI的方法，两个参数分别是slide（幻灯片）和placement（位置）
var slideElement = document.createElement("div");//document.createElement()方法的意思是创建元素，slideElement是一个div元素
slideElement.id = slide.id;//将参数slide的id赋予slideElement的id属性
slideElement.classList.add("slide");//classList.add()方法的意思是将slideElement这个div归于"slide"类中
var slidesDiv = document.getElementById("slidesDiv");//document.getElementById()方法的意思是得到ID为"xxx"的元素，slidesDiv是ID为"slidesDiv"的div元素
if (placement === "first") {//如果参数placement为"first"则，将slideElement插入到slidesDiv的第一个子元素前面。
slidesDiv.insertBefore(slideElement, slidesDiv.firstChild);//insertBefore（）方法就是将第一个参数元素插入到第二个参数元素前面
}
else {//否则，将slideElement添加做slidesDiv的子元素
slidesDiv.appendChild(slideElement);//appendChild()方法为添加子元素
}
var title = document.createElement("div");//定义title变量为一个div元素
title.innerText = slide.title.text;//title的内置文本为slide的title
slideElement.appendChild(title);//将title加入slideElement中作为子元素
var img = new Image();//定义一个名为img的图片
img.src = slide.thumbnail.url;//src为source的缩写，也就是源。thumbnail的意思是缩放图
img.title = slide.title.text;//图片的title属性设置为slide的title
slideElement.appendChild(img);//将图片加入slideElement中作为子元素
slideElement.addEventListener("click", function () {//对slideElement的click事件添加监听事件
var slides = document.querySelectorAll(".slide");//选择所有的slide的元素
Array.from(slides).forEach(function (node) {//循环
node.classList.remove("active");//把所有的slides移除active类
});
slideElement.classList.add("active");//将现在的slidELement添加active类
slide.applyTo(view);//将slide的设置应用于视图（view）中，也就是转换到定义的视图
});
}
view.when(function() {//when方法，当视图(view)加载好的时候
document.getElementById("slidesDiv").style.visibility = "visible";//slidesDiv的可见性设置为可见
var slides = scene.presentation.slides;//演示文稿（presentation）：提供用作书签的幻灯片集合，用于保存预定义的视点和可见层。
slides.forEach(createSlideUI);//将所有存在的幻灯片运行上述createSlideUI方法
document.getElementById("createSlideButton").addEventListener("click", function () {//对于ID为"createSlideButton"的元素添加监听事件
Slide.createFrom(view).then(function (slide) {//createFrom方法解释如下
//从sceneview创建幻灯片，可以将其添加到Webscene的演示文稿（presentation）中的幻灯片中。更新幻灯片是异步的，只有在返回的承诺解决后，视图快照才会完成。
slide.title.text = document.getElementById("createSlideTitleInput").value;//参数slide的标题（title）设置为用户添加的值
scene.presentation.slides.add(slide);//添加slide到场景（scene）的演示文稿（presentation）的幻灯片集合（slides）中
createSlideUI(slide, "first");//运行上述createSlideUI方法
});
});
});
});
</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>
后记：写道现在已经晚上十一点半了，其实代码并不多，麻烦的是不停的写注释和截图。不过既然开始了，我也会一直坚持下去。入职快五个月，深深感觉心中所学远远不够，唯有沉淀自己，一步一个脚印，将知识学到手才是正途。如果大家有什么问题欢迎留言，我们一起讨论。最后祝愿所有的giser同行们都能健康幸福，心想事成。写于2019年1月16日晚。