js 两个map合并为一个map_ArcGIS API for JS3.x教程二：构建第一个简单的程序

本文衔接上文：

不睡觉的怪叔叔：ArcGIS API for JS3.x教程一：本地开发环境配置zhuanlan.zhihu.com

一、创建简单的HTML文档

创建一个简单的HTML文档：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Simple App</title>
</head>
<body></body>
</html>

二、引入ArcGIS API for JavaScript

要想在web程序中使用ArcGIS API for JS，当然就要引入该开发包：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Simple App</title><!-- 引入ArcGIS API for JS开发包 --><link rel="stylesheet" href="http://localhost:8080/arcgis3.30/esri/css/esri.css" /><script src="http://localhost:8080/arcgis3.30/init.js"></script>
</head>
<body></body>
</html>

上面引入的init.js包含ArcGIS API for JS的逻辑处理功能。

引入的esri.css样式文件用于指定程序小部件（widgets）和组件的样式。

还可以选择其他的四种主题的样式文件，有四个主题可供选择：

claro
tundra
soria
nihiilo

样式文件位于themes文件夹中：

当然也可以用CDN的方式引入（速度较慢）：

    https://js.arcgis.com/3.30/dijit/themes/claro/claro.csshttps://js.arcgis.com/3.30/dijit/themes/tundra/tundra.csshttps://js.arcgis.com/3.30/dijit/themes/nihilo/nihilo.csshttps://js.arcgis.com/3.30/dijit/themes/soria/soria.css

可以自行尝试使用不同的主题样式，选择合适的样式来契合程序，使之更完美。

三、创建地图容器

地图容器。。。简单来说就是一个HTML的div元素，ArcGIS API for JS会使用canvas或者webgl技术在该div元素上绘制地图。

在body元素中创建一个div元素当作地图容器：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Simple App</title><!-- 引入ArcGIS API for JS开发包 --><link rel="stylesheet" href="http://localhost:8080/arcgis3.30/esri/css/esri.css" /><script src="http://localhost:8080/arcgis3.30/init.js"></script>
</head>
<body><!-- 地图容器 --><div id="map"></div></body>
</html>

四、加载模块

ArcGIS API for JS构建于Dojo框架（类似于jQuery）之上，它的模块导入使用Dojo的模块系统。没必要深入学习Dojo，知道一些简单的Dojo语法、功能就可以了。

首先，导入"esri/map"模块：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Simple App</title><!-- 引入ArcGIS API for JS开发包 --><link rel="stylesheet" href="http://localhost:8080/arcgis3.30/esri/css/esri.css" /><script src="http://localhost:8080/arcgis3.30/init.js"></script>
</head>
<body><!-- 地图容器 --><div id="map"></div><script>require(["esri/map"], function(Map){    // 导入模块});</script>
</body>
</html>

模块导入的语法，以及模块名都能在API文档中找到，对应着导入就好。

比如刚才的"esri/map"其实就是导入了Map类的相关代码包，直接查Map类的API文档就能看到导入语法：

五、创建地图

刚才导入了Map类，那么就能调用Map类创建地图：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Simple App</title><!-- 引入ArcGIS API for JS开发包 --><link rel="stylesheet" href="http://localhost:8080/arcgis3.30/esri/css/esri.css" /><script src="http://localhost:8080/arcgis3.30/init.js"></script>
</head>
<body><!-- 地图容器 --><div id="map"></div><script>var map;require(["esri/map"], function(Map){    // 导入模块// 创建地图map = new Map("map", {basemap: 'topo',center: [-122.45, 37.75],zoom: 13})});</script>
</body>
</html>

参数"map"对应地图容器div元素的id特性，这就相当于告诉ArcGIS API for JS请在id特性为"map"的div元素上绘制地图。

根据"地图三明治结构"，一个WebGIS地图通常由底图+专题地图构成，上面的basemap就用于指定ArcGIS API for JS默认提供的底图，即直接填写对应的字符串它就能自动绘制对应的底图。该参数还可以指定为："satellite", "hybrid", "topo", "gray", "oceans", "osm", "national-geographic"。自行尝试这些精美的底图吧！

六、指定样式

由于body元素默认有外边距值，会在页面上构成一个白色沟壑，比较丑，因此要消去它。

另外地图默认高度只会是页面的一半，让地图全屏显示会更美观。

那么指定想要的样式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Simple App</title><!-- 引入ArcGIS API for JS开发包 --><link rel="stylesheet" href="http://localhost:8080/arcgis3.30/esri/css/esri.css" /><script src="http://localhost:8080/arcgis3.30/init.js"></script><style>/* 指定样式 */html, body, #map{height: 100%;margin: 0;}</style>
</head>
<body><!-- 地图容器 --><div id="map"></div><script>var map;require(["esri/map"], function(Map){    // 导入模块// 创建地图map = new Map("map", {basemap: 'topo',center: [-122.45, 37.75],zoom: 13})});</script>
</body>
</html>

现在第一个简单的程序就构建完成了，使用浏览器打开效果如下：