这是我的第一篇随笔，在开始正文前说几句。

这个系列会记录我学习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的更多相关文章

  1. 如何将经纬度利用Google Map API显示C# VS2005 Sample Code

    原文 如何将经纬度利用Google Map API显示C# VS2005 Sample Code 日前写了一篇如何用GPS抓取目前所在,并回传至资料库储存,这篇将会利用这些回报的资料,将它显示在地图上 ...

  2. android studio2.2 的Find Sample Code点击没有反应

    1 . 出现的问题描述:           右键点击Find Sample Code后半天没有反应,然后提示 Samples are currently unavailable for :{**** ...

  3. CityEngine Web Scene如何在IIS下部署 [转]

    CityEngine2012新增了发布Web场景的功能,可以通过本地的Web Scene Viewer打开,也可以发布到ArcGIS Online云端进行共享.如下图:   注:3ws场景包制作方法: ...

  4. IOS开发苹果官方Sample Code及下载地址

    IOS开发苹果官方Sample Code及下载地址 在线浏览地址:https://developer.apple.com/library/ios/navigation/#section=Resourc ...

  5. OAF Sample Code(转)

    原文地址: OAF Sample Code

  6. VS Code For Web 深入浅出 -- 导读篇

    下一代 IDE 的形态究竟是什么呢?VS Code For Web 试图回答这个问题. 背景 众所周知,VS Code 是当前工业界最优秀的代码编辑器之一.它由<设计模式>的作者 Eric ...

  7. VS Code For Web 深入浅出 -- 进程间通信篇

    在上一篇中,我们一起分析了 VS Code 整体的代码架构,了解了 VS Code 是由前后端分离的方式开发的.且无论前端是基于 electron 还是 web,后端是本地还是云端,其调用方式并无不同 ...

  8. sample code java pom.xml

    pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="htt ...

  9. sqoop sample code

    本文使用的数据库是mysql的sample database employees. download url:https://launchpad.net/test-db/employees-db-1/ ...

随机推荐

  1. 在字符串中查找id值MySQL

    PHPmyadmin中sql语句 SELECT * FROM `hz_article_type` WHERE FIND_IN_SET( 5, items_id ) LIMIT 0 , 30 结果: S ...

  2. 2012年NOIP普及组复赛题解

    题目涉及算法: 质因数分解:入门: 寻宝:模拟: 摆花:动态规划: 文化之旅:搜索. 质因数分解 题目链接:https://www.luogu.org/problem/P1075 这道题目只需要开个 ...

  3. Python--day48--今日内容

  4. element-ui-——el-uploadexcel导入

    布局文件:(选择文件放在了弹框内部——即点击导入按钮后弹框显示,先下载模板再选择文件点击提交按钮才上传) )) { this.$notify({ message: '数据导入成功', type: 's ...

  5. 初次使用pycharm 的interpreter option为空解决办法。

    第一步:进入Setting. 第二步:进入Project中的Project Interpreter.选择添加即可.

  6. Python--day32--ftp文件传输报错的原因

    解决办法:把buffer改小 server.py #实现一个大文件的上传或下载 #配置文件 ip地址 端口号 import json import socket import struct sk = ...

  7. easyui—window在vue-element-ui中的使用（坑）

    自己给自己挖的坑 !!! 项目中,布局外层使用easyui框架中的window;内部显示内容的table使用element-ui框架,需求将window使用border-image作为边框,之后发现拉 ...

  8. int64 DWORD 与cstring 互转

    //int64 与cstring 互转 int64_t val = 1111111111111111111; CString str; str.Format(("%I64d"), ...

  9. linux 系统挂起

    尽管内核代码的大部分 bug 以 oops 消息结束, 有时候它们可能完全挂起系统. 如果系 统挂起, 没有消息打印. 例如, 如果代码进入一个无限循环, 内核停止调度,[15]15 并且系 统不会响 ...

  10. 关于对height:100%的研究

    参考此链接: https://segmentfault.com/a/1190000012707337