webAppbuilder微件使用教程

--常用微件介绍

by 李远祥

上一章介绍了webappbuilder微件的一些基础操作,这一张主要是介绍一些常用微件的使用试用和配置方法。

微件的主要作用按照功能大概分为大类:

1.       内嵌的微件,例如比例尺、缩放滑块、我的位置、属性表、图例、等直接跟地图交互,这类型微件几乎不可以进行个性化的定制,只保留一些外观上的配置操作;

2.       地图交互微件,例如地图库、书签、绘图、测量、编辑、图层列表、查询、搜索、卷帘、时间、打印、滑块等。这些微件主要是跟地图进行交互的操作,简本上是以看图和查找为主。

3.       分析型微件,如批处理属性、图表、地理处理、事件分析等。这类型的微件功能比较强大,一般配置比较复杂,不但需要地图交互,还涉及到复杂的数据模型和分析模型,并且还需要对输出显示方面做一些自定义的配置。因此,要使用微件去解决应用上的问题,需要非常熟练的掌握这些分析型微件的使用和配置方法。

内嵌型微件由于配置简单,不作详细的操作。本章主要是对地图交互型微件和分析型微件进行讲解。

地图交互微件

地图交互微件基本上是处理一些简单的地图操作,以下是这类型微件的一些基本配置。

a.      底图库微件。底图库微件用户切换底图,如果在用户权限下定义了一系列的底图,可以通过底图库来让用户自选不同风格的底图。一般情况下,这个微件选择的是基础地理地图,但也可以自己定义一组专题图层来作为底图,这个在使用上是没有严格的限制,主要是底图定义原则问题。微件加载的时候会默认读取所有的可用底图,这些底图是可以添加或者删除的,如下图

添加新的底图,当然也可以通过增加外部的服务地址作为新的底图

配置完成后,启动应用,可以在界面中切换地理底图。

b.      书签微件。跟桌面软件的书签是同一个概念,实现地图区域的快速跳转。在添加书签的时候,会弹出一个地图界面,地图界面加载的就是当前应用选用的地图,通过在地图上缩放和平移位置,完成标签的跳转,如下图,缩放到珠三角的位置,并创建一个书签。

实际运行的效果如下

c.      绘图微件。绘图一般是用作临时标绘数据,例如圈定一个区域作为突出显示。绘图微件定义了一系列的点线面绘制方法,绘制的符号也可以定制。绘图微件跟编辑微件不一样,绘图只是临时在网络地图上标绘数据,当关闭浏览器后,绘制的信息会清除掉;而编辑微件则会将数据保存下来。如下图,绘图微件定义了绘图后的一些单位,这些单位也可以自行指定

绘图微件在配置阶段可配的不多,但运行的时候功能非常强大,可以绘制任意的图形,并且可以自定义这些图形的样式,以及显示其长度和面积等,如下图

d.      编辑微件。编辑微件是需要webMap里面带有要素服务,并且要素服务开启了编辑功能才能使用。因此,涉及到两步的操作,首先要对所边编辑的要素服务进行设置,将其编辑功能打开。在我的内容—打开要素服务,进入编辑界面,开启允许编辑选项,如下图是其中一个要素服务。

接在制作新的webMap,选择好底图和加入上一步的要素服务,保存webMap。接下来才能在编辑微件里面查看到能编辑的图层。如下图所示

此处可以看到编辑功能非常的强大,几乎可以跟桌面版arcgis媲美。配置好后,保存并打开运行界面,可以看到其编辑操作,如下图所示

注意:在使用编辑微件之前需要开启要素服务的编辑功能。如果之前做好的webMap加载过要素服务,但这些要素服务没有开启编辑功能,是不能启动编辑微件的。这种情况也不能直接在要素服务开启编辑,因为webMap记录的是之前要素服务的配置信息。因此,正确的做法是开启要素服务的编辑功能之后,重新制作webMap,这样才能被编辑微件所识别。

e.      查询微件。查询微件的功能不是字面上的查询,它实际上是个过滤功能,我们传统意义上的查询其实是搜索功能。因此,它跟搜索微件有着本质的区别。查询微件配置很简洁,进入配置界面之后,点击新增,然后可以通过多种途径引入不同的查询。本例中使用webMap里面的站点信息图层进行查询,查询主要设置分为过滤定义和结果设置,这里就是跟搜索的本质区别了。过滤定义可以识别图层的所有属性,使用不同的过滤计算器进行操作;结果设置是可以设置过滤结果的显示标题、显示字段和符号。如下图所示

查询微件的过滤能力不是真对数据进行过滤,而是通过这个过滤的条件,选择好要素,并且用特定的符号把符合这些条件的要素显示出来,类似arcMap中的选择功能(搜索是不能设定显示符号的)。具体的结果还会列表显示出来,如下图所示

f.       图表微件。图表微件允许计算选择的结果,并将指定的结果值用图表的方式显示出来。通常用作数据的对比,例如各种的指标值。其设置也相对简单,新增一个图表之后,选择要进行图表显示的图层,让后设置图表所用的数据信息(要使用图表,字段必须是数值类型的),可设置的内容包括图表的标题,图表所用的字段,分类方式,所展示的图表以及要素结果的显示符号等,如下图所示,使用了雨量站点的降雨量作为图标的对比值

运行的时候可以与地图进行交互操作,例如在地图上选择多个站点进行对比,选择后有不同的符号显示选择的结果,然后可以在面板中看到不同的图表,将鼠标放在图表上,还可以显示图表的一些相关值,非常具备动感。如下图所示

g.      卷帘微件。卷帘微件一般用作数据对比,例如有多个图层叠加在一起,对某个图层进行部分屏蔽进行对比。该微件配置非常简单,只需要选择一下卷帘所使用的图层即可。如下图所示,有三种的卷帘方式可选。

实际应用效果如下图

以上都是一些非常常用的微件,那些比较简单的如图层控制、测量等就不在累述。下一章就是最重要的地理处理微件。

webAppbuilder微件使用教程2 常用微件介绍的更多相关文章

  1. VS2010/MFC编程入门之二十(常用控件:静态文本框)

    上一节鸡啄米讲了颜色对话框之后,关于对话框的使用和各种通用对话框的介绍就到此为止了.从本节开始鸡啄米将讲解各种常用控件的用法.常用控件主要包括:静态文本框.编辑框.单选按钮.复选框.分组框.列表框.组 ...

  2. VS2010-MFC(常用控件:静态文本框)

    转自:http://www.jizhuomi.com/software/179.html 关于对话框的使用和各种通用对话框的介绍就到此为止,从本节开始将讲解各种常用控件的用法.常用控件主要包括:静态文 ...

  3. MFC编程入门之二十(常用控件:静态文本框)

    上一节讲了颜色对话框之后,关于对话框的使用和各种通用对话框的介绍就到此为止了.从本节开始将讲解各种常用控件的用法.常用控件主要包括:静态文本框.编辑框.单选按钮.复选框.分组框.列表框.组合框.图片控 ...

  4. MFC 控件使用教程

    combo box控件用法: 下拉选择控件,首先将控件拖动到你需要使用控件的地方,用ClassWizard为它关联一个变量,我们注意到变量类型是CString型的.右击属性,General中可以设置一 ...

  5. webAppbuilder微件使用教程3 地理处理微件

    webAppbuilder微件使用教程 --微件使用进阶地理处理微件 By 李远祥 地理处理是GIS解决问题的关键部分,也是其灵魂所在.由于WebAppBuilder框架的限制,用户如果想要非常灵活的 ...

  6. webAppbuilder微件使用教程1 快速入门

    by 李远祥 webAppbuilder是arcgis portal 和arcgis.com 上用来配置应用程序的利器.合理利用webAppbuilder的微件功能,可以实现应用程序的零代码定制,并能 ...

  7. spring cloud微服务快速教程之(七) Spring Cloud Alibaba--nacos(一)、服务注册发现

    0.前言 什么是Spring Cloud Alibaba? Spring Cloud Alibaba 是阿里开源的,致力于提供微服务开发的一站式解决方案.此项目包含开发分布式应用微服务的必需组件,方便 ...

  8. 2013 duilib入门简明教程 -- 自绘控件 (15)

        在[2013 duilib入门简明教程 -- 复杂控件介绍 (13)]中虽然介绍了界面设计器上的所有控件,但是还有一些控件并没有被放到界面设计器上,还有一些常用控件duilib并没有提供(比如 ...

  9. MFC编程入门之二十二(常用控件:按钮控件Button、Radio Button和Check Box)

    本节继续讲解常用控件--按钮控件的使用. 按钮控件简介 按钮控件包括命令按钮(Button).单选按钮(Radio Button)和复选框(Check Box)等.命令按钮就是我们前面多次提到的侠义的 ...

随机推荐

  1. golang中container/list包源码分析

    golang源码包中container/list实际上是一个双向链表 提供链表的一些基本操作,下面就结合定义和接口进行下说明 1. 定义 // Element is an element of a l ...

  2. 在windos 环境下安装

    在windows 环境下安装node 和 StrongLoop需要一些几个步骤. 本人使用的安装软件,文章最后的分享. 1,安装Git: 2,安装Node.js: 3,安装npm: 4,安装Stron ...

  3. CKeditor使用js验证不得为空

    if (CKEDITOR.instances.TextArea1.getData() == '') { alert('警告:详细内容不得为空!'); CKEDITOR.instances.TextAr ...

  4. SpringMVC和mybatis的框架

    1.首先以一个项目做例子,该项目用到的框架即为SpringMVC+mybatis,项目环境为MyEclipse+sqlserver+tomcat6,项目的地址(项目+数据库备份文件)大家可以上我的百度 ...

  5. 20、手把手教你Extjs5(二十)模块Grid的多列表方案

    对于有很多字段的模块在一个grid中显示所有的字段,会显得很臃肿,对于不同的用户其侧重的字段类型也不尽相同,因此就有必要为Grid的列表设计多个方案.在这个自定义系统进行设计的时候,我已经将这部分内容 ...

  6. FZU 2112 Tickets

    这个问题可以转变一下,先要知道有几个连通块,连通块之间肯定需要添加一条边, 还需要知道每个连通块内部需要添加几条边,这个问题等价于求一张图至少需要几笔画成,这个问题的答案是度为奇数的点的个数/2 #i ...

  7. Tsinsen-A1489 抽奖 【数学期望】

    乔明达太神,其实已经题解非常清楚了,我再推一遍吧. 题目意思相当于有n个盒子,无差别投m次球,每个盒子的得分为每个盒子里的球的个数. 第一问: 假设这个球放在了第i个盒子里,那么 ∆ans = (mi ...

  8. 在GitHub上创建上传下载开源项目代码

    1.注册GitHub帐号,创建GitHub项目代码仓库 1.1.注册GitHub帐号 在使GitHub之前,需要先登录其官网注册一个免费使用的账号.登录 https://github.com/join ...

  9. DEV控件的Gridview1

    DEV控件的Gridview小技巧总结 1.设置Gridview控件的某列不可编辑 this.gridData.gridView1.Columns["change_date"].O ...

  10. Bmob 之 列表查询

    查询列表,返回前20个数据: //创建BmobQuery实例,指定对应要操作的数据表名称 BmobQuery *query = [BmobQuery queryWithClassName:classN ...