Sample Code之Web scene-slides
这是我的第一篇随笔，在开始正文前说几句。
这个系列会记录我学习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: ;
margin: ;
height: %;
width: %;
}
#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=" />
<button id="createSlideButton">Create</button>
</div>
<div id="slidesDiv"></div>
</body>
</html>
后记：写道现在已经晚上十一点半了，其实代码并不多，麻烦的是不停的写注释和截图。不过既然开始了，我也会一直坚持下去。入职快五个月，深深感觉心中所学远远不够，唯有沉淀自己，一步一个脚印，将知识学到手才是正途。如果大家有什么问题欢迎留言，我们一起讨论。最后祝愿所有的giser同行们都能健康幸福，心想事成。写于2019年1月16日晚。
Sample Code之Web scene-slides的更多相关文章
- 如何将经纬度利用Google Map API显示C# VS2005 Sample Code
原文 如何将经纬度利用Google Map API显示C# VS2005 Sample Code 日前写了一篇如何用GPS抓取目前所在,并回传至资料库储存,这篇将会利用这些回报的资料,将它显示在地图上 ...
- android studio2.2 的Find Sample Code点击没有反应
1 . 出现的问题描述: 右键点击Find Sample Code后半天没有反应,然后提示 Samples are currently unavailable for :{**** ...
- CityEngine Web Scene如何在IIS下部署 [转]
CityEngine2012新增了发布Web场景的功能,可以通过本地的Web Scene Viewer打开,也可以发布到ArcGIS Online云端进行共享.如下图: 注:3ws场景包制作方法: ...
- IOS开发苹果官方Sample Code及下载地址
IOS开发苹果官方Sample Code及下载地址 在线浏览地址:https://developer.apple.com/library/ios/navigation/#section=Resourc ...
- OAF Sample Code(转)
原文地址: OAF Sample Code
- VS Code For Web 深入浅出 -- 导读篇
下一代 IDE 的形态究竟是什么呢?VS Code For Web 试图回答这个问题. 背景 众所周知,VS Code 是当前工业界最优秀的代码编辑器之一.它由<设计模式>的作者 Eric ...
- VS Code For Web 深入浅出 -- 进程间通信篇
在上一篇中,我们一起分析了 VS Code 整体的代码架构,了解了 VS Code 是由前后端分离的方式开发的.且无论前端是基于 electron 还是 web,后端是本地还是云端,其调用方式并无不同 ...
- sample code java pom.xml
pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="htt ...
- sqoop sample code
本文使用的数据库是mysql的sample database employees. download url:https://launchpad.net/test-db/employees-db-1/ ...
随机推荐
- php 使用正则匹配中文 返回结果
$str = 'eg5455正则匹配中文123三国杀'; $patten='/[\x{4e00}-\x{9fa5}]+/u'; $a = preg_match($patten, $str, $mn); ...
- CodeForces 1204E"Natasha, Sasha and the Prefix Sums"（动态规划 or 组合数学--卡特兰数的应用）
传送门 •参考资料 [1]:CF1204E Natasha, Sasha and the Prefix Sums(动态规划+组合数) •题意 由 n 个 1 和 m 个 -1 组成的 $C_{n+m} ...
- H3C 以跳数评估的路由并非最优路径
- Vue的第一个实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- H3C RIP路由表的更新
- [Ramda] Handle Errors in Ramda Pipelines with tryCatch
Handling your logic with composable functions makes your code declarative, leading to code that's ea ...
- JSON怎样添加注释
今天在写一个程序的时候发现了一个问题,在json文件中添加注释之后,程序就出现bug了 于是,去搜了一下这个问题的相关解释,在这里和大家分享一下: JSON为什么不能添加注释? 这位外国友人给出的解释 ...
- 喵喵电影git操作
1.git remote 2.git remote add origin '项目地址' (origin为远程仓库名字) 3.git remote 4.git push origin master ...
- slot的使用方法
参考链接:https://www.cnblogs.com/loveyt/p/9946450.html 插槽的使用其实是很简单,你只需明白以下两点,就很容易理解. 1.插槽是使用在子组件中的, 2.插槽 ...
- Linux 内核总线注册
如同我们提过的, 例子源码包含一个虚拟总线实现称为 lddbus. 这个总线建立它的 bus_type 结构, 如下: struct bus_type ldd_bus_type = { .name = ...