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 maphtml, 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对象,包括经度/纬度
});
});
原创作品,请勿转载。违权必追究。