GIS组件
GIS组件包括地图容器、设备层、报警层、区域层、自定义层、工具箱组件,可实现地图显示设备、查询设备、新增设备及报警等相关功能。
地图容器
地图容器组件是一种用于在Web页面或应用程序中显示地图的组件,与设备层、报警层、自定义层等配合使用,例如地图容器下加一个设备层,设备的位置会在地图容器中展示,属性配置如图所示:
- 图层:设置地图的图层,可同时设置多个图层;
瓦片图层类型:设置瓦片图层类型,有XYZ、TileArcGISRest、geoserver/wms、热力图、离线地图、GeoJSON、TileWMS、OSM、wms、Tile、ImageWMS、TileJSON、VectoreTile、风向粒子层、压力层、海浪层十六种类型;
- XYZ瓦片图层:使用X、Y、Z坐标表示瓦片的位置;
- TileArcGISRest瓦片图层:使用ArcGIS REST API获取地图数据,可以从ESRI ArcGIS Server中获取;
- geoserver/wms瓦片图层:通过WMS服务发布的地图图层,可以是矢量图层或者栅格图层;
- 热力图瓦片图层:热力图瓦片图层是一种基于热力图的地图图层,通过将热力图渲染成瓦片图层的形式,实现了高效的地图数据展示和交互效果;
- 离线地图瓦片图层:本地存储瓦片图层数据以实现离线地图;与在线地图服务不同,离线地图可以在没有网络连接或者网络不稳定的情况下进行地图浏览,具有较好的稳定性和灵活性;
瓦片图地址:点击选择瓦片图层,当瓦片图层类型为离线地图时,需手动输入该离线地图的服务器地址;
图层滤镜:图层滤镜功能允许用户对地图图层应用不同的视觉效果。开启后,用户可以选择内置的三种滤镜,或自定义滤镜参数以创建独特的样式。
- 使用方法:
- 开启图层滤镜:在图层设置中找到“图层滤镜”选项,切换为“开启”。
- 选择内置滤镜:开启后,用户可以在下拉菜单中选择三种内置滤镜之一,切换展示不同的样式。
- 自定义滤镜参数: 点击“编辑”按钮,进入滤镜参数设置界面, 根据需求调整滤镜参数,如亮度、对比度、饱和度等。完成后,选择“保存为新样式”,为自定义样式命名并保存。
- 切换新样式:保存的新样式将出现在样式列表中,用户可以随时选择并应用。
进制转化:当离线瓦片地图的格式非标准格式需开启进制转化,以便地图可显示;
投影:当瓦片图层类型为geoserver/wms时,需要设置该图层的地图坐标系,包括EPSG:3857和EPSG:4326,默认4326国际坐标系;
版本:当瓦片图层类型为geoserver/wms时,需要设置该图层的版本信息;
图层名:当瓦片图层类型为geoserver/wms时,需要设置该图层的图层名;
标题: 自定义设置图层标题,图层标题在地图的右上显示;
透明度:设置图层的透明度,范围0~1;
隐藏:点击是,该图层将隐藏;
层级:当多个图层时,可以通过设置层级控制图层上下层级,层级数值越大的图层会覆盖在层级数值较小的图层上面;
最大分辨率:设置图层可见的最大分辨率;
最小分辨率:设置图层可见的最小分辨率;
最大缩放:设置图层可见的最大分辨率;
最小缩放:设置图层可见的最大分辨率;
- 缩放:地图的放大缩小设置,点击进行配置;
- 缩放:点击是,地图左上角显示放大缩小按钮,默认为8,最小是3,最大为18;
- 初始缩放数:地图原始大小,没有经过放大或缩小的缩放数;
- 最大缩放数:地图最大放大数;
- 最小缩放数:地图最小缩放数;
- 动画时长:点击放大或缩小按钮时的动画显示时长;
- 放大提示文字:鼠标悬浮在放大按钮时的提示文字设置;
- 缩小提示文字:鼠标悬浮在缩小按钮时的提示文字设置;
- 全屏配置:点击进行地图全屏配置;
- 全屏:点击是,右上角显示全屏按钮;
- 按钮内容:自定义全屏按钮名称;
- 按钮文字提示:当鼠标停留在全屏按钮上时,显示按钮文字提示;
- 比例尺配置:点击可进行比例尺配置
- 比例尺:点击是,左下角显示比例尺;
- 最小宽度:比例尺的宽度设置;
- 单位:单位有通用千米单位、美国单位、航海单位、英制单位和以度、分、秒为单位;
- 步进:即将最小宽度分为几等份,只有开启柱子样式时才能生效;
- 柱子:点击是,比例尺显示柱子形态;
- 文本比例:显示比例尺上方的文本比例,仅在柱子为真时适用;
- 图标:图标作用在设备层,当图标处添加图片时,地图上设备图标显示为当前设置图片;
- 文本:文字作用在设备层的设备名称的显示;
- 名称:点击是,层显示设备名称;
- 颜色填充:设备层设备名称字体的颜色设置;
- 缩放:文字缩放设置;
- 文字大小:文字大小设置;
- 对齐方式:以设备图标为基准点,设备名称的放置位置;
- 基准线:基准线的位置设置,一般指水平线;
- 水平偏移距离:文字的水平方向调整,以基准线为参考位置;
- 垂直偏移距离:文字的垂直方向调整,以基准线为参考位置;
- 旋转:文字方向设置;
- 视图:视图主要用来查看地图编辑效果,视图配置可配置地图旋转角度、分辨率、动画时长和中心位置;
- 中心位置:点击设置地图的中心位置,可手动输入,也可在小地图中点击相应位置;
- 旋转:设置整个地图的旋转角度;
- 分辨率:根据需要设置分辨率;
- 动画时长:默认为250毫秒;
- 地图当前层级:点击绑定画面变量,再增加一个文本组件,和地图容器同级,文本内容绑定相同变量,可在文本中显示地图当前图层;
- 重置中心位置:开启后根据设备坐标重置中心位置,需选择设备,设备支持绑定记录变量;
- 多弹窗:默认只展开一个弹窗,若开启多弹窗时,则点击设备层图标时,所有被点击的设备的弹窗均展示弹窗;
- 图标缩放:可设置图标在地图层级的缩放比
数据表层
地图容器中添加设备层组件后,地图中显示设备位置和图标,设备的位置可在表管理>表记录>地理信息中进行设置,也可通过驱动采集获取,属性设置如图所示
- 数据表:通过选择数据表表记录,地图只显示当前选择数据表下的表记录位置;
- 表记录:点击选择表记录,地图只显示当前选择的设备;
- 部门:通过选择部门过滤设备,地图只显示当前选择部门下的设备;
- 内置查询:通过内置查询,可以添加过滤条件来选择设备,例如选择名称为A003的设备,内置查询条件支持绑定;
- 图标:上传图标后,地图上所有设备都显示相同的图标;
- 点击高亮图标:选中的设备显示高亮图标,取消选中后高亮图标消失,显示默认图标;
- 地图弹窗:可指定画面作为地图弹窗内容;
- 类型:包括编辑和预览两种类型。选择编辑时,弹窗为对应设备的编辑表单弹窗;选择预览时,弹窗为对应设备引用的弹窗画面。
- 长显示:选择是时,则弹窗以卡片的形式在设备位置处长显。
- 数据表:选择引用的弹窗生效的数据表,这里的数据表为已经安装地理信息的表。 ;
- 设备:选择引用的弹窗生效的设备。
- 引用画面:选择引用的弹窗画面,弹窗将展示该画面最新发布的内容。
- 弹窗位置配置:通过设置相对于设备位置的X/Y轴偏移量来调整弹窗的位置。
- 热力图:配置后,地图上设备位置显示热力图
- 显示:点击是,显示热力图;
- 渐变色:点击添加热力图的颜色;
- 半径:半径默认为8px;
- 模糊距离:模糊距离默认为15px;
- 聚合:范围内的设备聚合成一个;
- 聚合:点击是,开启聚合功能;
- 聚合显示文案:默认显示聚合数,可自定义显示文案,如自定义时需显示聚合数,请用xx表示,例如:A模型下设备xx;
- 聚合半径:聚合半径大小设置,半径大小区域内的设备进行聚合;
- 圆半径:聚合后,以圆显示聚合后的效果,此处设置显示圆的半径大小;
- 文字颜色:显示文案的颜色设置;
- 文字大小:文字大小设置;
- 填充颜色: 填充颜色设置。
- 层级隐藏:当前层级超过设定层级后该图层隐藏, 未定义初始层级时,初始层级为8, 一般地图省层级为1-5,市7-11,县11,例如当层级大于等于9时隐藏设备层;
- 当前坐标系:当前图层的坐标系,有EPSG:4326和EPSG:3875两种类型;
- 目标坐标系:当前图层的目标坐标系;
- 输出变量:可绑定画面变量进行输出,输出值为选中设备的信息;
- 内置弹窗:点击是,则不显示地图弹窗,可配置内置弹窗,内置弹窗的数据可绑定输出变量中的数据;
- 点击定位到中心点:点击是,点击图标定位到中心点;
- 点击图标放大层级:**点击图标,放大层级定义,默认不放大,层级定义值1-18;
- 图标缩放:默认8-18层级图标缩放比为1,6-8缩放比为0.8,5-6缩放比为0.6,4-5缩放比为0.45,1-4缩放比为0.3;
数据表层事件:数据表层事件触发动作包括图标点击和高亮图标点击,可实现点击图标时触发事件,比如图标点击时,打开新页面、修改画面变量等;这里对打开新页面做一下说明,新页面如果是通过画面制作的,这个新画面是可以获取到点击设备的数据,获取说明如下:
- 数据传输原理:当点击设备层图标时,会将表ID和记录ID拼到目标画面的url中,则需在目标画面的浏览器参数中分别创建参数名为“tableId”和“tableDataId”的变量,即可将浏览器中的值赋到创建的的变量中。
- 步骤:
- 新画面浏览器参数中创建“tableId”和“tableDataId”的变量;
- 若想绑定点击设备的表记录,则需要做如下的公式转换,即可获取设备层输出的表记录的全部数据。
报警层
报警层可在地图上显示报警点,和设备层配合使用,组件属性如图:
- 设备表:选择设变表后,地图上只显示当前设备表下的报警;
- 设备:选择设备后,地图上只显示当前设备下的报警;
- 部门:选择部门后,地图上只显示当前选择部门下的报警;
- 报警级别:选择级别后,地图上只显示当前级别下的报警;
- 报警类别:选择类别后,地图上只显示当前类别下的报警;
- 初始显示历史数据:勾选后,初始打开地图会将满足条件的数据中,未处理的报警查询回来并显示;
- 颜色:报警点颜色设置;
- 时间:报警点显示时长设置;
- 半径:报警点的大小设置;
区域层
用来在地图上圈出区域,属性配置如图所示:
- 区域绘制-多线段:在地图中画出区域,绘制结束后先鼠标右击结束当前图形绘制,再次点击结束绘制按钮结束本次绘制,也可双击结束本次绘制
- 类型及数据:点击选择绘制图形所用的线段类型,有点、折线、多边形和圆四种。选择后,点击绘制图层按钮,进行图层绘制;
- 颜色:线的颜色设置;
- 背景色:所绘制图层的背景色设置;
- 线宽:线的宽度设置;
- 线拐点样式:线拐点样式有尖角、圆角和斜角三种样式;
- 线两端线帽的样式:**有无头、圆头和方头三种样式;
- 点图标:在类型为点时使用;
- 衔接极限:主要用来设置拐角之间的衔接;
- 间隙样式:主要设置区域间隙,这里我们设置为13 :13来展示一下效果;
- 测距-多线段:用来测量绘制图层线段间的距离或面积;
- 类型及数据:选择测距离或侧面积,点击按钮是,然后进行图层绘制;
其余属性的配置说明在“区域绘制-多线段”中已经描述
自定义层
当用户需要自行绑定数据时,可使用自定义层,相关配置项同区域层。
工具箱
当用户需要在地图中进行测距、侧面积测量、轨迹回放、查询、新增记录、合并记录或拆分记录时,需在地图容器下添加工具箱实现响应功能,在画面前台访问或者预览时,可通过应用工具箱中的功能,实现响应的功能。
- 工具列表:选择工具;默认展示全部,单独配置后按照定义的列表显示;
测距:测量地图中多点之间的距离。测量点击工具箱中的“测距”选项,鼠标将进入绘制状态。左键单击以确定起点,添加转折点,并通过双击结束绘制。绘制完成后,线段将显示起点及每条线段的距离,线段终点提供删除功能,点击删除图标即可删除相应的测距线段。
侧面积:测量地图中区域的面积。点击工具箱中的“侧面积”选项,鼠标将进入绘制状态。左键单击以确定起点,用户可依次点击确定多边形的各个顶点,最后通过双击闭合多边形。完成后,系统将自动计算并显示所绘制区域的面积,同时提供删除功能,用户可选择删除已绘制的多边形。
轨迹回放:用来对记录的变化位置进行回放显示。点击工具箱中的“侧面积”选项,地图上方弹出轨迹回放配置弹窗。用户可以设置回放的时间范围和选择要回放的记录。时间范围默认为当前时间起的24小时内,记录需选择的数据点映射的记录,支持多选。确认查询后,系统将展示所选轨迹的回放记录。可开始回放、暂停、继续回放。
查询:查询地图中符合查询条件的记录信息。用户可以通过点击工具箱中的“查询”选项,在地图上方弹出查询记录配置弹窗。支持按查询条件、框选查询、定点范围查询方式查询记录。
- 查询条件:选择查询条件方式进行记录查询时,需先选择设备表及添加过滤条件。
- 设备表:单选所需查询的设备表,如“设备表A”。
- 条件定义:添加查询条件,例如查询“名称”字段包含“设备”的记录。注意:需在选择设备表后进行条件定义,条件字段为所选表的字段。
- 查询结果:查询完成后,结果将在底部抽屉弹窗中显示。用户可通过鼠标悬浮在弹窗顶部并拖拽调整弹窗高度。
- 框选查询:用户可通过鼠标绘制图形进行查询。
- 类型:包括线段、矩形、圆形、自由。
- 线段:绘制线段进行查询。当线段覆盖记录的坐标时,记录将被查询到。单击开始绘制起点,继续单击可添加折点,双击结束绘制。
- 矩形:长按快捷键 Ctrl + 鼠标左键绘制矩形,松开后即完成绘制,系统会自动查询,不需再次确认。
- 圆形:单击确认圆心后,拖拽鼠标绘制圆形,单击结束绘制,按 Esc 可退出。
- 自由:通过单击确认多边形的顶点,用户可依次点击确定多边形的各个顶点,最后通过双击闭合多边形。
- 定点范围查询:用户可以通过中心点和半径查询范围内的记录。
- 中心选择:用户可以通过鼠标单击确认中心点,也支持手动输入中心点的经纬度进行确认。
- 半径(米):输入所需的查询半径,以米为单位。
- 查询条件:选择查询条件方式进行记录查询时,需先选择设备表及添加过滤条件。
新增记录:在地图中新增记录。点击工具箱中的“新增记录”选项,地图上方弹出新增记录配置弹窗,可在地图中绘制记录位置以添加新记录。。
- 记录显示形式:选择记录的形式,包括定位点、线段、多边形、圆,选择记录显示形式后,鼠标进入对应形式的绘制状态,如选择定位点,则数据表进入点的绘制形式。
- 定位点:绘制定位点类型的记录,双击后确认绘制位置,并弹出添加记录弹窗,需选择添加记录的数据表,填写记录新增表单,保存后即完成新增记录的功能,也可继续对记录的其他功能的设置进行编辑,同添加表记录操作。
- 线段:绘制线段类型的记录,继续单击可添加折点,双击结束绘制,并弹出添加设备弹窗,填写表单部分同定位点说明。
- 多边形:绘制多边形类型的记录,通过单击鼠标绘制多边形的端点,双击鼠标结束绘制,并弹出添加设备弹窗,填写表单部分同定位点说明。
- 圆:绘制圆类型的记录,单击确认圆心后,拖拽鼠标绘制圆形,单击结束绘制,并弹出添加设备弹窗,填写表单部分同定位点说明。
- 记录显示形式:选择记录的形式,包括定位点、线段、多边形、圆,选择记录显示形式后,鼠标进入对应形式的绘制状态,如选择定位点,则数据表进入点的绘制形式。
合并记录:在地图中,将相交的多个记录合并为一个记录。点击工具箱中的“合并记录”选项,地图上方弹出合并记录配置弹窗,选择需要合并的设备以及保留的记录。
- 选择记录:选择需要合并的记录,单击第一个记录进行选择,添加其他记录时,请同时按下 CTRL 键并单击所需记录。
- 保留记录:选选择需要保留的记录,确保所有选择的记录被保留为所选记录。
拆分记录:在地图中对记录进行拆分。通过点击工具箱中的“拆分记录”选项,地图上方将弹出拆分记录配置弹窗,用户可以选择需要拆分的记录。
- 拆分方式:选择拆分记录的方式,包括按距离拆分和按位置拆分。按距离拆分为根据与记录端点的距离进行拆分;按位置拆分为在固定的经纬度处进行拆分。
- 选择记录:选用户需选择需要拆分的设备。仅支持线段、多边形、圆形和半圆类型的记录进行拆分。
- 距离定义米:当选择按距离拆分时,用户需选择记录的端点,包括左端点和右端点,并输入拆分距离,单位为米。
- 坐标定义:当选择按位置拆分时,用户需定义拆分点的坐标,可以通过鼠标点击选择,或手动输入经纬度进行确认。
- 测距配置:配置测距时的测量单位以及样式。
- 展示方式:设置工具箱的展示方式,包括折叠显示和展开显示。
- 展开显示: 默认为展开展示,也可收起。
- 折叠显示:通过点击按钮查看工具选项。
- 工具箱icon:上传工具箱的图标,不设置时,使用平台默认的图标icon。
- 展示位置:设置工具箱的展示位置,包括左上角、右上角、左下角、右下角、左居中、右居中、上居中、下居中。
案例使用
表记录选择树+地图容器+数据表层
场景1:点击表记录选择树的记录,实现地图记录坐标高亮的功能。
在此场景中,用户点击表记录选择树中的某一记录时,系统会自动根据该记录的坐标信息,在地图容器中高亮显示对应位置的标记或坐标点。这一交互方式通过将表格中的数据与地图上的位置关联起来,帮助用户直观地查看选中记录在地图中的实际位置。
步骤 1:添加表记录选择树组件
- 在画面中添加【表记录选择树】组件。
- 为【表记录选择树】指定显示的表,例如选择“设备表A”,此时,表记录树中的节点将展示“设备表A”中的所有记录。
步骤 2:添加地图容器及数据表层组件
- 在画面中添加【地图容器】组件。
- 在【地图容器】组件内部,放入【数据表层】组件,并为【数据表层】指定需要展示的表,例如选择“设备表A”,则地图中显示的位置为设备表A下记录的位置。
- 【数据表层】上传高亮图标,作为该记录在地图上的高亮显示图标。
步骤 3:创建画面变量 - 创建一个新的画面变量,类型选择“自动”。该变量将用于存储和传递选择树的选中值。
步骤 4:绑定变量到数据表层组件
- 在【数据表层】组件的基本属性中的“变量”配置项,绑定步骤3中创建的变量。
- 该变量将在后续的事件中进行动态更新,用于控制数据表层展示的内容。
步骤 5:配置表记录选择树的事件
在【表记录选择树】组件的事件配置中,设置“值变化时”触发的事件,修改步骤3创建的变量,值为组件值。
当用户选择表记录树中的某一条记录时,系统会自动将该记录的值(如记录ID或其他标识符)赋值给步骤3中创建的变量。
结果:
- 当用户在【表记录选择树】组件中选择一条记录时,系统会更新变量的值,并自动触发【数据表层】的更新,地图容器将高亮显示与选中记录相关联的坐标位置,并展示高亮图标。
- 通过这种方式,用户可以直观地从表格记录中获取和显示地理位置信息,并在地图上实时查看相关记录。