(1)ArcGIS API for JavaScript之Hello World

阅读本文大概需要 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.预览

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180711G1O8IE00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券