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="/4.13/esri/themes/light/main.css"> //调用API <script src="/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: "",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) {//新建WebMapvar 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的魅力所在。
