天天看点

ArcGIS API for Javascript 3.21地图开发实例(一、图形绘制和删除及popup弹出层)前言代码结束语

Arcgis是一个地理系统的平台,可用来进行数据数据展示或二次开发。这里我们所使用的是Arcgis对于JavaScript的api,也就是web端的api进行开发。我们使用的版本是3.21,这个版本包含了完整的2D地图的api。如果想对3D地图进行开发,可以使用4.4版本的api。在这个demo中,我们要完成如下的几个功能:

基本地图展示

搜索功能

图形绘制

图形点击显示详情

图形删除

在本篇博客的结尾可以看到本例的下载链接。

先来看程序的截图:

首先是页面打开时:

ArcGIS API for Javascript 3.21地图开发实例(一、图形绘制和删除及popup弹出层)前言代码结束语

接下来是使用搜索功能时:

ArcGIS API for Javascript 3.21地图开发实例(一、图形绘制和删除及popup弹出层)前言代码结束语

绘制的图形:

ArcGIS API for Javascript 3.21地图开发实例(一、图形绘制和删除及popup弹出层)前言代码结束语

左键点击图形产生popup:

ArcGIS API for Javascript 3.21地图开发实例(一、图形绘制和删除及popup弹出层)前言代码结束语

在右键点击图形的时候弹出删除按钮:

ArcGIS API for Javascript 3.21地图开发实例(一、图形绘制和删除及popup弹出层)前言代码结束语

接下来是程序的完整代码。除了引入arcGIS包之外,也引入了jquery包,jqeury在本例中并非必需,主要是用于后面实例的开发。

简单的说一下流程:首先创建popup实例,接着创建map实例,将map的弹出层指定为刚创建的popup实例。然后创建地图图层和绘制图层,将地图图层和绘制图层加入到map实例中去。在地图载入时初始化绘制工具栏和右键菜单,并且把工具栏和右键菜单的事件与绘图的图层绑定,这样之后对图形的绘制和删除都会在绘制的图层上进行。接着初始化搜索框即可。

具体的函数说明都写到注释里了。

继续阅读