阅读本文大概需要 5 分钟。
从这篇文章开始,正式进入 ArcGIS API for JavaScript 的学习。
和几乎所有的编程语言入门示例一样,我们同样以一个「Hello World」来开始 ArcGIS API for JavaScript 的学习。
1. 新建一个 HTML 文档
使用熟悉的代码编辑器新建一个 HTML 文档,输入以下代码,并保存为 hello_world.html。
2.添加css、js的引用
在 head 标签中加入 ArcGIS API for JavaScript 的 css 和 js 的引用:
3.添加地图显示容器 div
在 body 中增加一个 div 标签,用于显示地图:
4.设置网页、地图视图样式
在 head 标签中,设置网页、地图显示 div 的样式,将地图显示 div 的大小设置为网页的大小, 内外边距都设置为 0:
注意,一定要设置 viewDiv 的 width 和 height,否则地图不会显示。
5.加载 API 模块
在 head 中写 js 代码,先加载用到的 API 模块:
require(Array, Function) 是一个基于 AMD 规范实现的函数,它能够异步地加载动态的依赖。
参数 Array 是一个由模块 ID 组成的数组,当这些模块加载完成且可用时,回调函数 Function 开始执行,并且只被执行一次。另外,各个模块还可以按照依赖数组中的位置顺序以参数的形式传入到 Function 里。
6.添加地图
在模块加载完成后,执行回调函数,我们所有的功能、操作都在写在这个回调函数中。
首先,新建一个地图:
这里,我将地图的底图设置为「national-geographic」, national-geographic 是 API 预先定义的底图,其他可用的底图还有streets、satellite、hybrid、topo、gray、dark-gray、oceans、osm等。
然后新建一个地图视图,将地图绑定到地图视图中进行显示:
新建地图视图时,需要设置「container」属性,该属性对应着之前我们的地图显示容器 div 的 id。注意,id 前不用加「#」。
最后,可以根据需要设置地图显示的缩放级别以及范围等,如这里我将地图的缩放级别设置为 3,地图显示的中心设置在东经116°、北纬40°的地方,差不多也就是北京附近。
7.预览
领取专属 10元无门槛券
私享最新 技术干货