一、簡介
子路曰：“衛君待子而爲政，子將奚先？”子曰：“必也正名乎！”
孔子認爲，爲政最先要做的事情是正名，名不正則言不順。
語言是上天賦予人類的神奇能力，而“名”則是語言的基礎。很多時候，我們掌握了事物的名，就掌握了利用它的能力。對未知的事物，我們要命名，而想要理解已知的事物，要先從它的名字入手。
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，使用瀏覽器打開，就可以看到效果了。（寫文章的地方網絡很差，圖像可能還沒完全渲染出來，大家不要太在意細節的差異哈）
接下來的所有程序都以這個爲基礎添加代碼，大家可以親手敲一遍來加深印象和理解。下一篇文章將講解如何對圖層進行操作，感謝閱讀！