1.引用资源
1.1引用ArcGIS API for JavaScript
首先引用ArcGIS API for JavaScript，采用script标签，注：里面的数字为版本号，可以等到版本更新时，更换对应的版本号即可。代码如下：
<script src="https://js.arcgis.com/4.6/"></script>
1.2引用样式
<link>标签引用main.css样式表，其中包含特定于Esri窗口小部件和组件的样式。代码如下：
<link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
2.加载模块
2.1require()函数
在创建地图对象之前，必须首先通过使用require（）的函数来完成对地图资源的使用。arcgis api for js提供了很多资源，包括esri/map(创建地图使用)，Geometry、Graphic、和Symbols等等，
一旦提供了资源，就可以使用Map()构造函数来创建地图。
2.2确保DOM可用
为了避免Javascript代码访问一个还没有加载完成的网页的报错，dojo提供了两种方法
1>一个是ready函数，可以将其包括在require()函数中，它会在HTML元素和任何模块加载之后才执行。
2>另一个是可以在require()函数中使用dojo/domReady!（感叹号表示domReady是AMD加载器插件）插件。
esri/Map - 加载特定于创建地图的代码
esri/views/MapView - 加载允许以2D查看地图的代码
dojo/domReady! - 确保在执行代码之前DOM可用。代码如下：
<script>
require([
"esri/Map",
"esri/views/MapView",
"dojo/domReady!"
], function(Map, MapView) {
// 创建地图和视图的代码将在这里
});
</script>
3.创建一个2D视图
创建一个新的Map地图是通过我们先前在require()函数中引用的esri/Map资源来实现的，在require()函数内部，使用构造函数来创建一个新的Map对象，Map对象的构造函数中接收两个参数，第一个是页面中用于加载
地图的div标签的id，还有一个为可选参数，定义一些地图的加载选项（比如，可以控制加载地图显示的图层啊，地图的显示中心，显示的级数等等），这个可选项是定义成一系列的键：值对的JSON对象。
1>最常见的选项有：basemap，他就是一个预先定义的底图，包括：satellite，hybrid，topo，gray，dark-gray，oceans，osm，national-geographic等等。
2>zoom：定义地图初试缩放级别。
3>minZoom,maxZoom:定义地图最小和最大范围缩放级别。
4>center:定义初始显示地图时的中心点，这个点就是一个Point对象，包括经度/纬度
代码如下：
require([
"esri/Map",
"esri/views/MapView",
"dojo/domReady!"
], function(Map, MapView) {
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "viewDiv", // container为容器的意思，这里对将包含视图的DOM节点的引用，就是承载地图的div容器的id。
map: map // 引用我们在上一步中创建的地图对象。
});
});
其中，MapView通过传递一个对象给它的构造函数来设置它的属性。我们将container属性设置为将保存地图的DOM节点的名称。该map属性引用我们在上一步中创建的地图对象。
这里有两种可用的视图：MapView（用于查看2D地图）和SceneView（用于查看3D地图）。
4.定义页面内容
最后一个步骤就是创建一个用来承载地图容器的HTML标签div，我们需要给这个div给一个id，这样，Javascript代码可以访问到它。代码如下：
<body>
<div id="viewDiv"></div>
</body>
创建完成后，在container中引用。
5.样式页面
使用style标签中的标签来设置页面的内容head。要使地图填充浏览器窗口，在页面中添加以下CSS代码：
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
最终，小伙伴们，我们成功利用ArcGIS API for JavaScript 4.6,构建了第一个Web应用程序，效果请戳下面链接http://jiegiser.win/arcgisAPI/creat2Dmap.html
最后整体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Intro to MapView - Create a 2D map</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
<script src="https://js.arcgis.com/4.6/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"dojo/domReady!"
], function(Map, MapView){
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "viewDiv", // container为容器的意思，这里对将包含视图的DOM节点的引用，就是承载地图的div容器的id。
map: map, // 引用我们在上一步中创建的地图对象
zoom: 4, // 定义地图初试缩放级别
center: [15, 65] // 定义初始显示地图时的中心点，这个点就是一个Point对象，包括经度/纬度
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
原创作品，请勿转载。违权必追究。
网友评论