ArcGIS API for JavaScript 能够实现的最基本功能就是地图展示，包括地图缩放、平移、定位、实时显示坐标、展示地图要素（指北针、比例尺、图例）、切换地图等。本文将详细介绍地图展示的代码构成以及常用的部件等。
一、创建一个地图 "Hello World"
- 由于JavaScript是镶嵌在HTML内的脚本语言，因此要调用JS API就先得创建一个HTML网页。下面就是一个最简单的HTML框架：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>hello world</title>
<style>
html, body, #view {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="view"></div>
</body>
</html>注：通常html由head,body和foot三部分组成，JavaScript存放在head中。
2.有了基本的HTML框架之后，接下来就是引用CSS和调用API了。
//引用CSS,themes分light和Dark两类。
<link rel="stylesheet" href="https://js.arcgis.com/4.13/esri/themes/light/main.css">
//调用API
<script src="https://js.arcgis.com/4.13/"></script>3.最后可以通过调用API中的类库来实现地图展示。
<script>
require([
"esri/Map", //引用地图类
"esri/views/MapView"
], function(Map, MapView) { //参数位置要和引用类的顺序一致
//新建一个地图
var map = new Map({
basemap: "topo" //地图底图
});
//新建一个地图视图
var view = new MapView({
container: "view",
map: map,
center: [116.31357, 39.97104], // 地图中心的经纬度坐标
zoom: 13 //地图缩放级别
});
});
</script>
至此，一个最简单的Web地图就完成了。可以操作的功能有地图缩放和平移。
4.JS API遵循AMD模块要求，AMD(异步模块加载定义)规范是Dojo1.7版本开始采用的一种模块规范，相较于Dojo以前采用的模块风格，它在许多方面做了很大的改进和优化，比如完整的异步操作，真正的包可移植性，更好的依赖管理以及改进的debug支持。AMD模块要求：
require （[ ]，function （ ）{ / * code goes here * / }）; 二、地图要素展示
指北针、比例尺和图例是地图基本的三要素。ArcGIS API for JavaScript通过调用widgets类实现部件的添加。widgets是一个功能丰富的类库，集成了多种常用的部件，且调用起来十分方便，极大减轻了开发者的负担。通过调用widgets中的指北针、比例尺和图例部件可以轻松实现地图要素的展示。
示例代码：
requrie([
"esri/widgets/Compass",
"esri/widgets/ScaleBar",
"esri/widgets/Legend"],
function(Compass,ScaleBar,Legend){
//添加指北针
var compass = new Compass({
view:view
});
view.ui.add(compass,"top-right");
//添加比例尺
var scalebar = new ScaleBar({
view:view
});
view.ui.add(scalebar,"bottom-right");
//添加图例
var legend = new Legend({
view:view
});
view.ui.add(legend,"bottom-left");
});结果展示：
三、地图底图切换
ArcGIS API for JavaScript中的地图底图库部件提供了多种地图，如地形图、街道图、影像图等，每种地图展示的主题也不尽相同。通过调用widgets库中的BasemapToggle类和BasemapGallery类可以实现底图之间的切换。
示例代码：
requrie([
"esri/widgets/BasemapToggle",
"esri/widgets/BasemapGallery",],
function(BasemapToggle,BasemapGallery){
//切换底图
var toggle = new BasemapToggle({
view:view,
nextBasemap:"osm"
});
view.ui.add(compass,"bottom-right");
//添加底图库
var gallery = new BasemapGallery({
view:view,
source:{
portal:{
url: "https://www.arcgis.com",
useVectorBasemaps: true //加载切片底图
}
}
});
view.ui.add(gallery,"top-right");
});结果展示：
四、Web Map展示
ArcGIS online 是ESRI公司开发的一个面向全球用户的公有云GIS平台，包含了全球范围内的底图、要素图层和地图应用程序。用户可以直接使用平台已有的的数据，同时也可以将本地数据上传至云平台从而实现数据共享。ArcGIS API for JavaScript通过调用web map的id来展示该地图。
示例代码：
require(["esri/views/MapView", "esri/WebMap"], function(MapView, WebMap) {
//新建WebMap
var webmap = new WebMap({
portalItem: {
id: "82d4d0ba61734f608fce4e62a100d12d" //地图的id
}
});
var view = new MapView({
map: webmap,
container: "viewDiv"
});
});结果展示：
五、结语
地图展示是WebGIS最基础也是最重要的功能。通过ArcGIS API for JavaScript用户可以快速构建一个简单的Web地图应用，既省去了在桌面端作图的繁琐步骤，还可以实现地图的共享，极大提高了地图展示的效率。当然，除了地图展示之外，调用ArcGIS API for JavaScript还可以对地图图层进行查询、编辑甚至是空间分析，用户可以制作各种炫酷的webmap，而这正是WebGIS的魅力所在。