【回顾与本篇预览】

上篇简单介绍了JsAPI中的数据与视图，并告诉大家这两部分有什么用、如何有机连接在一起。

这一篇快速介绍一下前端代码的骨架。当然，假定你已经熟悉HTML5、CSS3和JavaScript（最好了解一下ES6）

转载请注明出处，博客园/CSDN/bilibili：秋意正寒

目录：https://www.cnblogs.com/onsummer/p/9080204.html

1. 代码

为了方便演示，我将js代码和css代码全都写在一个html文件里，当然，更合适的做法是三者分离，不过要注意引用的顺序哦。

使用上篇三维视图的代码↓

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">

  <title>Intro to SceneView - Create a 3D map - 4.7</title>

  <style>

    html,

    body,

    #viewDiv {

      padding: 0;

      margin: 0;

      height: 100%;

      width: 100%;

    }

  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">

  <script src="https://js.arcgis.com/4.7/"></script>

  <script>

    require([

      "esri/Map",

      "esri/views/SceneView",

      "dojo/domReady!"

    ], function(Map, SceneView) {

      var map = new Map({

        basemap: "streets",

        ground: "world-elevation"

      });

      var view = new SceneView({

        container: "viewDiv",

        map: map,

        scale: 50000000,

        center: [-101.17, 21.78]

      });

    });

  </script>

</head>

<body>

  <div id="viewDiv"></div>

</body>

</html>

三维视图代码

2. HTML组成/CSS简单解释

先把标签都折叠，过一下HTML的组成。

什么？你说你不喜欢看代码？那怎么行，得培养梳理代码的能力。我在这继续用图解法，剖析页面结构：

其中，第二个script标签是我们自己的代码。

link标签用于引用官方预设css，没有它页面不能工作。

第一个script标签用于引用JsAPI的核心文件。

注意到，body是整个页面的组织，在这里只有一个id为viewDiv的div，用于承载视图。

在link标签上还有这么一个style样式标签，是对页面样式的预设，其实很简单，仅仅是对html的一些元素做无边框处理而已。

3. script标签的内容

把js代码折叠后，是这样的：

收缩起的代码上篇已经解释过了，map是数据，view是视图，view通过SceneView类的构造函数中的传参中的map属性进行连通，这里就不再复述。

结构图是这样的：

require()是JsAPI的基础——Dojo框架规定的一个全局入口，与初学C语言时接触的main()函数类似。

3.1 类引用列表

第一个参数，是一个字符串数组。它规定了接下来的代码需要用哪些类（官方说法叫模块），用字符串描述了所需类（模块）所在的包路径。与C#中using 命名空间;类似。

如"esri/views/SceneView"就代表引用esri这个包下的views这个包里的SceneView这个类。不妨在浏览器调试窗口中看看资源：

因为第一个script标签引用的地址是“https://js.arcgis.com/4.7/”，所以esri这个包就是基于此目录下的相对路径了。

同理，"esri/Map"也是这样引用的一个类。

至于"dojo/domReady!"这个，则是dojo框架的一个特殊类（模块），所以会在"domReady"后加一个叹号，这是dojo的一个插件，代表DOM加载完成后再执行后面的代码。

3.2 回调函数

回调函数的形参列表除了"dojo/domReady!"这个特殊的之外，均要与类引用列表中的类顺序上一一对应，但是名字可以自由，一般与官方的类名一致。

至于本例中回调函数的内容，上篇讲过啦。

既可以用Lambda表达式，也可以在外部定义函数，传函数名进require()中。

对了，上篇没讲如何将SceneView与HTML元素绑定的，其实只是SceneView构造函数中的一个属性而已：

container属性利用id选择器（不用写#）选择div。

scale是比例尺，center是中央经纬度。

3.3 总结

由于AMD规范的要求，require()就是这么一个异步操作。你要告诉后台，你要用哪些功能（参数1，类引用列表），你要拿这些功能做什么（参数2，回调函数）。

回调函数就代表，等相关的资源准备好后，再根据此回调函数做事情。回调函数中仍存在很多异步操作，这就是ES6中Promise的用法了，when()异步链使得异步操作写起来更方便，如果对异步和回调有什么不懂的，请到网上查资料学习，在此不展开了——但是，异步操作仍然是JsAPI中极为重要的一个技术。

4. 骨架整理图&总结

总结就是，require()这个唯一入口，带了一个引用列表（字符串数组），带了一个回调函数。

回调函数里写你需要做的事情，当然，回调的形参要与引用列表一一对应。

以下是骨架图。

本篇到此结束，有了这个骨架，后面只是在script标签里加自己的内容而已。

待工程茁壮到一定规模的时候，dojo的模块化技术才能用得上，那并不是本入门教程的内容了。

背景也交代完了，下篇进入约定好的几个部分的API的讲解。

ArcGIS API for JavaScript 入门教程[4] 代码的骨架的更多相关文章

  1. ArcGIS API for JavaScript 入门教程[0] 目录

    随时翻看. 转载注明出处,博客园/CSDN/B站:秋意正寒. Part 1 必看 ArcGIS API for JavaScript 入门教程[1] 渊源 你还真不一定知道这是啥.非得学吗? ArcG ...

  2. ArcGIS API for JavaScript 入门教程[1] 渊源

    ->对于萌新,你可能需要了解一下这个东西是什么 ->对于已经知道要用这个东西的开发者,你可能需要了解一下它的底层机制 不针对大牛.龟速更新ing. 转载注明出处.博客园&CSDN& ...

  3. ArcGIS API for JavaScript 入门教程[2] 授人以渔

    这篇仍然不讲怎么做,但是我要告诉你如何获取资源. 目录:https://www.cnblogs.com/onsummer/p/9080204.html 转载注明出处,博客园/CSDN/B站:秋意正寒. ...

  4. ArcGIS API for JavaScript 入门教程[3] 你看得到：数据与视图分离

    这篇开始正式讲API. 数据和视图分离不是什么奇怪的事情了,这是一个著名的设计--数据与视图分开. 转载注明出处,博客园/CSDN/B站:秋意正寒. 目录:https://www.cnblogs.co ...

  5. ArcGIS API for JavaScript 入门教程[6] 再讲数据——Map类之可操作图层

    [回顾]上篇交代了Map是各种图层(不管是实际上的图层还是由图层构成的对象)的容器,是数据的容器,并不作显示(由视图类绘制).并重点讲解了由图层构成的复杂图层——高程属性ground和底图属性base ...

  6. ArcGIS API for JavaScript 入门教程[5] 再讲数据——Map类之底图与高程

    [回顾]前4篇交代了JsAPI的背景.资源如何获取,简介了数据与视图分离的概念与实现,剖析了页面的大骨架. 这篇开始,讲Map类. 转载注明出处,博客园/CSDN/B站/知乎:秋意正寒 目录:http ...

  7. ArcGIS API for JavaScript 入门教程[7] 再讲视图——View的基本属性

    [回顾]上篇花大篇幅讲了ArcGIS Server上的数据服务与部分常用可操作图层的创建关系,还讲了OGC的几个规范. 本篇回到JsAPI 4.x的新特性——视图类中来. 在第3篇讲过,4.x将视图从 ...

  8. [ArcGIS]ArcGIS Server环境搭建，发布服务，以及使用ArcGIS API for JavaScript

    环境搭建 安装Web服务器 IIS 控制面板-程序-程序和功能-启用或关闭Windows功能,勾选以下 安装VisualStudio,选择包括ASP.NET模块 安装ArcGIS服务器 ArcGIS ...

  9. ArcGIS API for JavaScript开发初探——HelloMap

    1.前言 在开始ArcGIS API for JavaScript开发之前我们需要了解一些基本的知识: 1.开发工具选什么? 前端技术的开发工具选择是一个仁者见仁智者见智的问题,有人喜欢Hbuilde ...

随机推荐

  1. Unix系统的常用信号

    编号为1 ~ 31的信号为传统UNIX支持的信号,是不可靠信号(非实时的),编号为32 ~ 63的信号是后来扩充的,称做可靠信号(实时信号).不可靠信号和可靠信号的区别在于前者不支持排队,可能会造成信 ...

  2. sql中having、group by用法及常用聚合函数

    having是用在聚合函数的用法.当我们在用聚合函数的时候,一般都要用到GROUP BY 先进行分组,然后再进行聚合函数的运算.运算完后就要用到HAVING 的用法了,就是进行判断了. 注意:sele ...

  3. SSM-SpringMVC-06：SpringMVC关于静态资源无法展示的问题

     ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 按照之前的那种方式一路走下来,或许你没发觉有问题,只是你没有使用到而已 css,js,图片等无法正常使用怎么 ...

  4. Codeforces Round #483 (Div. 2)

    题目链接: https://cn.vjudge.net/contest/229761 A题: n个数字,两个人轮流去数字,直到剩下最后一个数字为止,第一个人希望剩下的数字最小,第二个人希望数字最大,最 ...

  5. 应用服务器性能优化 之 消息队列（MQ：Message Queue）

    一,消息队列基本概念 借用百科的一句话:消息队列就是在消息的传输过程中,保存消息的容器. 从图-1和图-2对比,可以很清晰的明白,消息队列服务器,是位于应用服务器和数据库服务器之间的一个服务器.消息队 ...

  6. MySQL索引及查询优化总结 专题

    小结:db名与应用名相同,表名:业务名_此表的作用 ,表名表示内容,不体现数量,如果表示boolean概念,表名需要使用is_业务含义来表示,但POJO中不应该出现isXXX,因为不方便序列化,中间的 ...

  7. Nginx从听说到学会

    第一章 Nginx简介 Nginx是什么 没有听过Nginx?那么一定听过它的"同行"Apache吧!Nginx同Apache一样都是一种WEB服务器.基于REST架构风格,以统一 ...

  8. Class path & Path

    Class path: 配置类文件 (配置完之后,在任何盘符下都可以访问该配置路径下的文件); Path: 配置可执行文件; Class path 配置时路径后面加分号与不加分号的区别 (当前路径与配 ...

  9. 对象和XML文件的转换

    很多时候,我们开发程序都需要使用到对象的XML序列化和反序列化,对象的XML序列化和反序列化,既可以使用XML对象(XmlDocument)进行操作,也可以使用XmlSerializer进行操作,两个 ...

  10. balancer.go

    package) , {         close(b.upc)     }     return nil } func getHost(ep string) string {     url, u ...