arcgis添加HTML语法,arcgis-api-for-js-之创建图层和添加图层（1）

1.引用资源

1.1引用ArcGIS API for JavaScript

首先引用ArcGIS API for JavaScript，采用script标签，注：里面的数字为版本号，可以等到版本更新时，更换对应的版本号即可。代码如下：

1.2引用样式

标签引用main.css样式表，其中包含特定于Esri窗口小部件和组件的样式。代码如下：

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可用。代码如下：

require([

"esri/Map",

"esri/views/MapView",

"dojo/domReady!"

], function(Map, MapView) {

// 创建地图和视图的代码将在这里

});

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代码可以访问到它。代码如下：

创建完成后，在container中引用。

5.样式页面

使用style标签中的标签来设置页面的内容head。要使地图填充浏览器窗口，在页面中添加以下CSS代码：

html, body, #viewDiv {

padding: 0;

margin: 0;

height: 100%;

width: 100%;

}

最终，小伙伴们，我们成功利用ArcGIS API for JavaScript 4.6,构建了第一个Web应用程序，效果请戳下面链接http://jiegiser.win/arcgisAPI/creat2Dmap.html

最后整体代码如下：

Intro to MapView - Create a 2D map

html, body, #viewDiv {

padding: 0;

margin: 0;

height: 100%;

width: 100%;

}

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对象，包括经度/纬度

});

});

原创作品，请勿转载。违权必追究。