一、简介

子路曰：“卫君待子而为政，子将奚先？”子曰：“必也正名乎！”

孔子认为，为政最先要做的事情是正名，名不正则言不顺。

语言是上天赋予人类的神奇能力，而“名”则是语言的基础。很多时候，我们掌握了事物的名，就掌握了利用它的能力。对未知的事物，我们要命名，而想要理解已知的事物，要先从它的名字入手。

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，使用浏览器打开，就可以看到效果了。（写文章的地方网络很差，图像可能还没完全渲染出来，大家不要太在意细节的差异哈）

接下来的所有程序都以这个为基础添加代码，大家可以亲手敲一遍来加深印象和理解。下一篇文章将讲解如何对图层进行操作，感谢阅读！

ArcGIS API for JavaScript ：简介与快速上手相关推荐

ArcGIS API for JavaScript——地图展示
ArcGIS API for JavaScript 能够实现的最基本功能就是地图展示,包括地图缩放.平移.定位.实时显示坐标.展示地图要素(指北针.比例尺.图例).切换地图等.本文将详细介绍地图展示的 ...
ArcGIS API For JavaScript Font字体简介，下载及本地部署
一.TextSymbol 字体font简介在ArcGIS API For JavaScript开发中,设置标注label 或Graphic时若使用TextSymbol,用font设置文字样式,如字体 ...
ArcGIS API for JavaScript心得体验
首发GIS派:ArcGIS API for JavaScript心得体验学习和使用ArcGIS API for JavaScript开发差不多有两年了吧,跌跌撞撞断断续续也做了几个小项目,学习之路相 ...
ArcGIS API for JavaScript如何使用本地的字体库
需求: ArcGIS API for JavaScript如何使用本地的字体库,解决内网环境,或者我想用我自己的好看的字体的需求. 思路: 下载对应的字体文件(.pbf)或者将操作系统自带的字体文件( ...
用ArcGIS API for JavaScript制作三维可视化图
前段时间接了一个项目,涉及到了空间信息三维可视化的工作.之前在网上查找无意中看到ArcGIS API for JavaScript(以下简称"ArcGIS API"或"该 ...
ArcGIS API for JavaScript 3.23汉化（下）
ArcGIS API for JavaScript 3.23汉化(下) 4更为具体一.Default API configurations 默认API配置三.Retrieve data from ...
arcgis api for JavaScript _跨域请求
arcgis api for JavaScript 中出现跨域请求是常见问题, 通常出现类似如下错误消息类似: XMLHttpRequest cannot load http://10.32.2.7 ...
基于ArcGIS API for JavaScript加载天地图
文章目录前言效果图详细代码总结参考链接前言该篇主要介绍如何用ArcGIS JS API加载天地图,具体应用场景以及需求分析等,在上篇基于ArcGIS API for JavaScript ...
基于ArcGIS API for JavaScript加载百度各种类型切片地图
文章目录应用场景需求分析效果图实现代码原理解读应用场景部分项目基于ArcGIS平台,但是甲方只提供部分矢量数据,用作底图的地形图数据没有,表示可以使用百度地图作为底图.所以才会有使用Ar ...

ArcGIS API for JavaScript ：简介与快速上手