一、简介
子路曰：“卫君待子而为政，子将奚先？”子曰：“必也正名乎！”
孔子认为，为政最先要做的事情是正名，名不正则言不顺。
语言是上天赋予人类的神奇能力，而“名”则是语言的基础。很多时候，我们掌握了事物的名，就掌握了利用它的能力。对未知的事物，我们要命名，而想要理解已知的事物，要先从它的名字入手。
ArcGIS API for JavaScript 简称 ArcGIS JS API。
ArcGIS 不用多说。冠上这个名字，说明它一是 ESRI 的产品，二是跟我们所熟悉的那个东西有千丝万缕的联系。
API （应用程序接口），即一些预先封装的函数，我们可以通过阅读文档方便地使用这些函数开发所需要的功能。
JavaScript 是我们用于实现业务逻辑（即功能）的语言，而 API 已经提供了大部分基础的功能，我们要做的工作主要是“整合”。前文已经提到过，JavaScript 是 Web 前端的脚本语言，但在不断的发展中逐渐成为完整的高级语言，并衍生出各种框架，这也使通过它实现更复杂的 GIS 功能成为可能。
使用 ArcGIS JS API，我们可以方便地开发浏览器上的 GIS，实现地图的显示、查询、分析等功能。目前最新的版本是 4.9，随着不断地更新，该 API 的功能想必会越来越丰富。值得一提的是，Web 开发者的社区非常活跃，相关技术更新地非常快，所以我们 GISer 要学会搭便车，不断接受新知识，把有用的东西借鉴过来。ESRI 在这方面做得很好，版本更迭很快，所以很少有人去翻译它的官方文档，这时候就需要我们有一定的英文阅读能力了。刚开始我也很头大，但只要坚持几天，熟悉一些专业词汇，就可以很轻松地阅读了，所以不要畏惧，我们学了这么多年的英语，已经有足够的水准了。
如果你已经掌握了 Web 前端开发的最基本的知识，就可以直接上手编写第一个 Web GIS 应用啦！（如果没有也不用着急，只需要花一两天时间快速过一遍前端开发的手册即可）
二、快速上手：初始 app
参考：https://developers.arcgis.com/labs/javascript/create-a-starter-app/
这里，我们要构建一个初始的、基本的、可以重复利用的应用。除去写一个网页所必须的东西，一个 GIS，最起码要能显示地图。
开发网页可以使用许多工具，大致分为 IDE（集成开发环境）和编辑器两大类（实际上现在一些自称编辑器的软件功能已经十分逼近 IDE），比较主流的有
IDE：
WebStorm/PHPStorm
VisualStudio
VSCode
编辑器：
Sublime Text
Vim
用什么工具都可以，不用管网上的争论不休，觉得不好用换一个就是了，从一个转换到另一个不费什么时间。非要我推荐的话，我觉得新手可以用 WebStorm，熟练一点的 Windows 用 Sublime Text，Linux 用 vim，调试用 Chrome 即可。我是用的 Sublime Text。
1 创建 HTML
首先我们来写一个网页的基本框架。这里比较特别的是，<body> 里只有一个填满整个区域的 <div> 元素，当然也可以加别的东西，不过谷歌地图等都是采用这种设计，也确实比较好看。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS DevLabs: Create a JavaScript starter app</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
2 添加引用
为了使用 ArcGIS JS API，我们需要添加两个引用，一个是 ArcGIS CSS，一个是 JS API。
之前看有的教程是把 API 下到了本地，然后需要进行手动的配置，比较复杂，刚开始就做这个没太大意义，还容易失去耐心。在联网的情况下，我们可以直接引用官网的 URL，即在 <head> 标签中添加：
<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
<script src="https://js.arcgis.com/4.9/"></script>
3 添加 map 和 view
在 Web GIS 中，map 用来定义数据，而 view 用来显示数据。这一部分便是整个应用的核心。完整的代码如下，仍然要添加在 <head> 中：
<script>
require([
"esri/Map",
"esri/views/MapView",
"dojo/domReady!"
], function(Map, MapView) {
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-118.71511,34.09042],
zoom: 10
});
});
</script>
我们来一步步解析
require([
"esri/Map",
"esri/views/MapView",
"dojo/domReady!"
], function(Map, MapView){···});
这个部分声明了需要调用的模块，从名称上我们就可以直观地看出它的作用，除了最后一个 dojo，这个是一个前端的框架，domReady 是其中的一个模块，意思是加载完网页的所有 dom，也就是除了外部图片等资源的内容后再运行 JS 代码，我们默认使用这个模块，暂时不用深入理解。
除了这个，我们声明了几个模块，就要在 function 的参数中写几个，而且顺序要严格对应。实际上我们可以在参数中使用自定义的名称，但建议与原名保持一致，方便理解代码。
接下来看 function 里的内容：
function(Map, MapView) {
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-118.71511,34.09042],
zoom: 10
});
}
map 和 view 实际上是两个对象，分别使用了 Map 和 MapView 的构造函数创建。我们使用 topo-vector 作为底图，除此之外，ArcGIS 官方还提供了许多其它底图，可以根据需要选用，只需要知道底图的名字即可。（如果使用自己搭建的服务器，则需要配置 URL 等）。
view 的几个参数，container 即容器，设置成我们之前放在 <body> 里的 <div>。map 即需要显示的地图，center 是显示的中心位置，以经纬度坐标表示。zoom 为细节层次，即以什么样的程度显示地图（想想影像金字塔、瓦片地图等概念）。
这个应用的完整代码如下：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS DevLabs: JavaScript Starter App</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
<script src="https://js.arcgis.com/4.9/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"dojo/domReady!"
], function(Map, MapView) {
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-118.71511,34.09042],
zoom: 10
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
可以直接把这些代码复制到记事本中，然后更改后缀为 .html，使用浏览器打开，就可以看到效果了。（写文章的地方网络很差，图像可能还没完全渲染出来，大家不要太在意细节的差异哈）
接下来的所有程序都以这个为基础添加代码，大家可以亲手敲一遍来加深印象和理解。下一篇文章将讲解如何对图层进行操作，感谢阅读！
