当前位置: 首页 > 工具软件 > arcgis-js-api > 使用案例 >

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

吕俊哲
2023-12-01

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

});

});

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

 类似资料: