ArcGIS API for JavaScript 4.2直接从官网的Sample中学习，API Reference也是从官网翻译理解过来，鉴于网上截稿前还没有人发布过4.2的学习笔记，我就试试吧。

什么是ArcGIS API for JS？这里就不多介绍了，最关键的一点是4.x版本与3.x版本的变化，按官方的意思是重新写了底层。

笔记中规定：

ArcGIS API for JavaScript简称AJS

使用CDN（即不配置本地环境）进行测试开发

其余根据需要进行修改、增删。

要将地图显示在html页面上，那就要有一个块元素承接并执行渲染。

本节以最简单、最低需求的2D地图显示为例。

首先在html页面中肯定要有一个div，官方命名为“viewDiv”。然后就在js代码中对这个div进行输出即可。先贴出js代码的骨架部分（展开即可查看代码）

这部分代码将位于4.2的js文件引用之下。

require

(

    [

      "esri/Map",

      "esri/views/MapView",

      "dojo/domReady!"

    ] ,

    function(Map, MapView) {

        //你的代码

    }

);

现在对require入口函数的第一个参数（字符串数组）中的三个字符串的含义进行解释。

这三个字符串与C#中的using命名空间、C++中的include头文件、Java中的#import类似，是对第二个参数所需要的功能进行引用。

具体为什么是这三个字符串，后面再解释。

第二个参数是一个函数（C#里会传委托吧大概忽略这个括号），这个函数的函数体如下：

function(Map, MapView){

  var map = new Map({

    basemap: "osm" // 基础地图类型

  });

  var view = new MapView({

    container: "viewDiv",  // 承接地图的块元素的ID

    map: map,  // 地图对象，由上方new出

    zoom: 8,  // 缩放级别

    center: [114, 30]  // 中心经纬度

  });

}

我们对这里的两个实例化的对象map、view进行解释说明。

【map对象是地图的数据部分，而view则是地图的可视化部分。】

map对象的创建参数，在本例中是basemap，查询参考可以知道使用了osm这一个类型的基础地图。basemap是一个类，在参考文档中也可以查询到。官方使用的是streets地图，而114，30附近streets是没有的，我切换到了osm地图。

view对象构造时，拥有4个参数，注释中容易懂，就不做多的解释了，重要的是map对象是由上面new实例化出来的。

至于JS的function参数和奇怪的构造函数，我也不多解释了，总之，Map和MapView两个名词，是esri/Map模块和esri/views模块下的两个类而已。

这便是在第一个参数数组中前两个字符串的含义了。

["esri/Map", "esri/views/MapView", "dojo/domReady!"] //第三个字符串暂时不解释

【Map类和MapView类的引用】

对Map类的信息截图如下：

继承自Accessor，子类有WebMap和WebScene。

构造函数的参数有一个：basemap类型的参数

对于Map对象的属性和方法，可以参考下文：

Map

同理，MapView对象参考下文如下：

MapView

MapView对象构造函数、属性和函数也写的很详细了。MapView继承自View类，而View类则继承自Accessor类。

以上便为第二个参数的笔记。

现在，贴出完整的html页面代码，可以自行复制粘贴到本地html文件，双击打开即可看到地图。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

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

<title>Get started with MapView - Create a 2D map</title>

<style>

  html, body, #viewDiv {

    padding: 0;

    margin: 0;

    height: 100%;

    width: 100%;

  }

</style>

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

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

<script>

require([

  "esri/Map",

  "esri/views/MapView",

  "dojo/domReady!"

], function(Map, MapView){

  var map = new Map({

    basemap: "osm"

  });

  var view = new MapView({

    container: "viewDiv",

    map: map,

    zoom: 8,

    center: [114, 30]

  });

});

</script>

</head>

<body>

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

</body>

</html>

第一个例子

不出意外的话，会是这样子：

本人使用chrome 56浏览器，这是在网吧的机器，Win7+Chrome 55.

补充：

link和第一个script标签是对官方样式表和类库的引用，没有这俩是运行不了的。

因为AJS是基于dojo的，所以需要在require的第一个字符串数组参数的第三个元素中使用dojo/domReady!，具体是为什么，官方例子有写，作为应用级别的开发就不深入了，有兴趣的同学可以试看AJS的框架什么的。

ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图的更多相关文章

  1. ArcGIS API for JavaScript 4.2学习笔记[6] goTo()地图动画

    这是个很有意思的例子,不过例子给的比较复杂,需要查很多API,我会在文章最后给出关键的类和属性解释. 同样发现一个很有意思的事儿:博客园似乎有爬虫,我4号发布的blogs,5号就在百度和google搜 ...

  2. ArcGIS API for JavaScript 4.2学习笔记[23] 没有地图如何进行查询？【FindTask类的使用】

    从第一篇到现在都是基于地图的,不管怎么样,不管是2D还是3D,至少有个图. 这次来个没有图的例子,看看纯文字的空间查询是什么样的. 本例适用于后台查询或低性能电脑的查询. 预览图 由于4.3和4.2的 ...

  3. ArcGIS API for JavaScript 4.2学习笔记[2] 显示3D地图

    3D地图又叫场景. 由上一篇可知, require入口函数的第一个参数是字符串数组 ["esri/Map", "esri/views/MapView", &qu ...

  4. ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录

    放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 4.2全线基础学习请点击[直达] 4.3及更高版本的补充学习请关注我的博客. ArcGIS API for JavaScr ...

  5. ArcGIS API for JavaScript 4.2学习笔记[5] 官方API大章节概述与内容转译

    内容如上,截图自ESRI官网,连接:ArcGIS API for JavaScript 4.2 [Get Started] 类似于绪论一样的东西,抽取了最需要关注的几个例子.如:加载Map和View, ...

  6. ArcGIS API for JavaScript 4.2学习笔记[21] 对3D场景上的3D要素进行点击查询【Query类学习】

    有人问我怎么这个系列没有写自己做的东西呢? 大哥大姐,这是"学习笔记"啊!当然主要以解读和笔记为主咯. 也有人找我要实例代码(不是示例),我表示AJS尚未成熟,现在数据编辑功能才简 ...

  7. ArcGIS API for JavaScript 4.2学习笔记[16] 弹窗自定义功能按钮及为要素自定义按钮（第五章完结）

    这节对Popups这一章的最后两个例子进行介绍和解析. 第一个[Popup Actions]介绍了弹窗中如何自定义工具按钮(名为actions),以PopupTemplate+FeatureLayer ...

  8. ArcGIS API for JavaScript 4.2学习笔记[7] 鹰眼（缩略图的实现及异步处理、Promise、回调函数、监听的笔记）

    文前说明:关于style就是页面的css暂时不做评论,因为官方给的例子的样式实在太简单了,照抄阅读即可. 这篇文章有着大量AJS 4.x版本添加的内容,如监听watch.Promise对象.回调函数. ...

  9. ArcGIS API for JavaScript 4.2学习笔记[19] 搜索小部件——使用更多数据源

    上一篇中提到,空间搜索小部件是Search这个类的实例化,作为视图的ui属性添加进去后,视图就会出现搜索框了. 这节的主体代码和上篇几乎一致,区别就在上篇提及的sources属性. 先看看结果: 由于 ...

随机推荐

  1. docker-compose 所带来的方便

    docker-compose 是一款开源的docker 简化复杂容器环境的管理工具 . docker-compose 在结合Swarm 与 docker 进程化容器部署可以很方便的部署一套环境. 具体 ...

  2. 三种Dataase Mapping的系统架构

    ORM - O/R M - Object/Relational Mapping: A technique/idea used to map objects and thier individual r ...

  3. java中有几种类型的流？JDK为每种类型的流提供了一些抽象类以供继承，请说出他们分别是哪些类？

    java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类? Java中的流分为两种,一种是字节流,另一种是字符流,分别由四个抽象类来表示(每种流包括输入和输出两种 ...

  4. 在win10环境下安装eclipse mars版本

    1下载eclipse软件.下载地址:http://www.eclipse.org/downloads/ 不要下载.exe文件.直接下载安装包,下载对应的安装包,我下载的是这个Eclipse IDE f ...

  5. iOS友盟三方登陆

    Umeng三方登陆个人总结 Demo地址:https://github.com/haozheMa/UmengThirdLoginDemo这里仅以微信.QQ和新浪微博作为例子首先根据官方文档 导入以下依 ...

  6. iOS技术框架构和更新版本的技术特性

    Core OS层 Sytem 系统层包括内核环境,驱动及操作系统层unix接口.内核以mach为基础,它 负责操作系统的各个方面,包括管理系统的虚拟内存,线程,文件系统,网络以及进程间通讯.这一层包含 ...

  7. linux命令学习7-jstat命令

    最近维护的项目使用的是java开发的,所以对于jvm虚拟机相关的操作还是必须要了解的,就先从最基本的jstat来学习起来. 首先需要会的就是full gc的查看; 下面就从网上收集了一些工具介绍, 慢 ...

  8. iOS开发——汉字转拼音

    以前有一次做一个天气预报的项目,有一个功能是输入城市名,请求该城市的天气,需要把汉字转化成拼音,比如深圳——>shenzhen,加入到参数中.当时在网上找了一下,网友给出的方法很多都用不了,现在 ...

  9. ios数据存储——数据库：SQlite3以及第三方库FMDB

    [reference]http://blog.csdn.net/mad1989/article/details/9322307 原生数据库:SQlite3 一.必备条件 在ios项目中使用sqlite ...

  10. firefox 28.0

    Ubuntu 安装 firefox 28.0指令: apt-cache show firefox | grep Version sudo apt-get install firefox=28.0+bu ...