动态轨迹层(v4.x版本)

本文为您介绍动态轨迹层各配置项的含义。

图表样式

动态轨迹层是基础平面地图4.0的自组件,支持独立的样式和数据配置,能够展示物体或数据点上的运动路径、变化趋势或行为。

动态轨迹图

样式面板

image

说明

样式面板中设置交互效果时,点击和悬浮显示方式相关配置仅在预览、发布或启用交互模式时可见。

  • 搜索配置:单击样式面板右上角的搜索配置项图标image,可在搜索配置面板中输入您需要搜索的配置项名称,快速定位到该配置项,系统支持模糊匹配。详情请参见搜索配置项

  • 快速样式:动态轨迹层子组件具备快速样式功能,您可以根据实际应用场景选择不同的样式。

  • 通用:设置动态轨迹层的通用配置项。

    参数

    说明

    可见级别

    设置动态轨迹层的可见级别值,在设定的级别范围内动态轨迹层可见,级别之外不可见。

    不透明度

    设置动态轨迹层的不透明度值,取值范围为0~100,单位%,数值越大图层越不透明。

    交互穿透

    开启后组件交互被禁用, 鼠标会穿透该组件, 避免组件遮盖影响鼠标与下层组件的交互,有助于提升交互性能。

  • 图形:设置动态轨迹层的图形配置项,包括轨迹线样式、线头样式和关键点样式。

    参数

    说明

    轨迹线样式

    设置动态轨迹线样式。

    • 线型:单击下拉选项框,选择一种搭动态轨迹线的线型样式。

    • 线宽:请参见尺寸映射器使用说明,配置东套轨迹线的线宽。

    • 飞线颜色:请参见颜色映射器使用说明,配置动态轨迹线的映射颜色样式。

    • 长度:长度表示的是在飞出间隔飞行时间两者确定之后的动态轨迹线长度的基础上乘一个百分比,即当前动态轨迹线飞出频率下的动态轨迹线显示长度比例,取值范围为0~100,单位%。

    • 飞行时间:表示线头从起点出发到达终点的时间,取值范围为100~20000,单位ms。

    • 飞出间隔:表示上一条动态轨迹线尾部离开起点到下一条动态轨迹线从起点出发的时间,动态轨迹线相对于起点到终点距离的长度是由飞行时间飞出间隔决定的,飞出间隔/飞行时间的值越大,动态轨迹线就越短。

    • 动画类型:选择动态轨迹线的动画类型,包括同步随机

    • 发光效果:设置动态轨迹线的发光效果,包括泛光半径和发光强度。

    • 衬线样式:设置动态轨迹线下衬线的样式,包括衬线的线型、线宽和颜色。

    线头样式

    设置线头样式。单击左侧的眼睛图标图标,可控制线头样式的显隐。

    • 线头类型:线头部分线头,可选矢量图标

    • 矢量形状:选择一种矢量形状的线头样式,仅在线头类型选择矢量时可配置。

    • 颜色:设置当前矢量形状的颜色,仅在线头类型选择矢量时可配置。

    • 半径:设置当前矢量形状的图形半径。

    • 描边颜色:设置当前矢量形状的描边颜色,仅在线头类型选择矢量时可配置。

    • 描边粗细:设置当前矢量形状的描边粗细,范围为0~5,单位px。仅在线头类型选择矢量时可配置。

    • 图标形状:选择一种图标形状的线头样式,您可以单击样式右侧的下拉选项框,选择系统内置多种图标样式;也可在下拉框面板的输入框内自定义输入图片的URL地址,将远程服务器上的图片作为线头图标;或者单击输入框右侧的上传按键图标,上传本地图片作为线头图标。仅在线头类型选择图标时可配置。

    关键点样式

    设置动态轨迹线关键点样式。单击左侧的眼睛图标图标,可控制关键点样式的显隐。

    • 显示模式:可选跟随轨迹全部显示,选择跟随轨迹模式,关键点将跟随轨迹线的移动动态展示,当轨迹线到达点位时显示,离开时隐藏;而选择全部显示模式时,所有关键点将常驻展示。

    • 关键点类型:动态轨迹线关键点部分的类型,可选矢量图标

    • 矢量形状:选择一种矢量形状的线头样式,仅在关键点类型选择矢量时可配置。

    • 颜色:设置当前矢量形状的颜色,仅在关键点类型选择矢量时可配置。

    • 半径:设置当前矢量形状的图形半径。

    • 描边颜色:设置当前矢量形状的描边颜色,仅在关键点类型选择矢量时可配置。

    • 描边粗细:设置当前矢量形状的描边粗细,范围为0~5,单位px。仅在关键点类型选择矢量时可配置。

    • 图标形状:选择一种图标形状的线头样式,您可以单击样式右侧的下拉选项框,选择系统内置多种图标样式;也可在下拉框面板的输入框内自定义输入图片的URL地址,将远程服务器上的图片作为线头图标;或者单击输入框右侧的上传按键图标,上传本地图片作为线头图标。仅在关键点类型选择图标时可配置。

  • 交互:动态轨迹层的交互配置项。

    图形交互:在预览或发布页面,支持在点击或悬浮于地图要素时展示图形交互样式。单击图形交互左侧的眼睛图标图标,可控制图形交互的启用。

    参数

    说明

    点击态

    设置图形和标签,可通过眼睛图标图标,确认在图形交互点击态是否启用。

    • 图形:设置点击态时动态轨迹线图形样式,包括轨迹线样式线头样式关键点样式

    • 标签:设置点击态时动态轨迹线标签,包括显示标签相对位置相对偏移内容样式背景样式

    悬浮态

    设置图形和标签,可通过眼睛图标图标,确认在图形交互悬浮态是否启用。

    • 图形:设置悬浮态时动态轨迹线图形样式,包括轨迹线样式线头样式关键点样式

    • 标签:设置悬浮态时动态轨迹线标签,包括显示标签相对位置相对偏移内容样式背景样式

  • 标签:设置动态轨迹层内标签的样式参数。

    参数

    说明

    显示标签

    打开开关,轨迹线层显示标签样式。

    相对位置

    设置标签基于当前点的位置,包括左侧、中心、右侧、顶部和底部。

    相对偏移

    设置标签相对位置参数。

    偏移方式:标签偏移方式类型,可选固定值数据映射

    偏移量:设置水平或垂直方向,文字标签相对于原文字标签中心位置的偏移距离,范围为-100~100,单位为px。仅在偏移方式选择固定值时可配置。

    水平字段:设置水平字段。仅在偏移方式选择数据映射时可配置。

    垂直字段:设置垂直字段。仅在偏移方式选择数据映射时可配置。

    内容样式

    设置标签内内容的样式。

    • 每行样式:单击每行样式右侧的imageimage图标,添加或删除一个每行内容样式。 单击imageimage图标配置多个每行内容样式的排列方式。单击image图标,即可复制当前选中的内容样式并新增一个同样配置的内容样式。

      • 行字段:行内容的字段名称,需要和数据面板中的字段相匹配。

      • 字段样式:设置行字段样式,包括字段的字体样式、字号大小、颜色和粗细值。

      • 字段前缀:设置字段前缀的具体内容 、内容间隔值、字体、字号大小、颜色和粗细值。单击字段前缀左侧的眼睛图标图标,可控制字段前缀样式的显隐。

      • 字段后缀:设置字段后缀的具体内容 、内容间隔值、字体、字号大小、颜色和粗细值。单击字段后缀左侧的眼睛图标图标,可控制字段后缀样式的显隐。

    • 最大宽度:标签的最大宽度,单位px。

    • 行高比例:标签的行高比例值,取值范围为1~2。

    • 内容描边:设置标签内容描边,包括描边的颜色和粗细。单击内容描边左侧的眼睛图标图标,可控制内容描边样式的显隐。

    • 内容阴影:设置标签内容阴影,包括阴影的颜色、模糊、偏移X和偏移Y。单击内容阴影左侧的眼睛图标图标,可控制内容阴影样式的显隐。

    背景样式

    设置动态轨迹线层内标签的背景样式参数,单击背景样式左侧的眼睛图标图标,可控制背景样式的显隐。

    • 背景类型:标签背景的类型,可选矢量图片

    • 背景颜色:设置标签的背景颜色,仅在背景类型选择矢量时可配置。

    • 边框样式:设置标签边框的样式,包括边框的线类型,线宽的值和颜色。仅在背景类型选择矢量时可配置。

    • 边框圆角:设置标签边框的圆角在四个方向的值,单位为px。仅在背景类型选择矢量时可配置。

    • 图片模板:选择背景图片的模板样式,仅在图片模板选择图片时可配置。

    • 不透明度:设置背景图片的不透明度值,取值范围为0~100,仅在图片模板选择图片时可配置。

    • 内容边距:设置标签中的内容距离上下左右四个方向的边距值。

  • 条件:条件样式说明。

    条件样式:单击右侧的imageimage图标,添加或删除一个条件样式。 单击imageimage图标配置多个条件样式的排列样式。单击image图标,即可复制当前选中的条件样式配置并新增一个同样配置的条件样式。具体样式配置说明,请参见条件树使用说明

    图形:打开开关,配置该样式中的图形配置项;关闭开关,无法配置该样式下的图形配置项。

    参数

    说明

    轨迹线样式

    设置动态轨迹线的飞线样式,包括飞线的线型、线宽、飞线颜色、长度和飞行时间、飞出间隔、动画类型和发光效果,可通过眼睛图标图标,确认在符合当前条件时是否应用当前样式。

    衬线样式

    设置动态轨迹线的衬线样式,包括衬线的线型,线宽和颜色,可通过眼睛图标图标,确认在符合当前条件时是否应用当前样式。

    线头样式

    设置动态轨迹线的线头样式,包括线头的矢量形状、颜色、半径、描边颜色和描边粗细,可通过眼睛图标图标,确认在符合当前条件时是否应用当前样式。

    关键点样式

    设置动态轨迹线的线头样式,包括关键点的显示模式、关键点类型、矢量形状、颜色、半径、描边颜色和边面粗细,可通过眼睛图标图标,确认在符合当前条件时是否应用当前样式。

数据源面板

image

  • 轨迹点数据接口

    字段

    说明

    trackId

    动态轨迹在地图中轨迹线ID。

    pointId

    动态轨迹在地图中轨迹点ID。

    keyPoint

    轨迹点是否为关键点。

    city

    轨迹点所在城市。

    colorField

    可选,动态轨迹点的颜色映射字段。

    sizeField

    可选,动态轨迹点的尺寸映射字段。

    iconField

    可选,动态轨迹点的图表映射字段。

    coordinate

    可选,动态轨迹点坐标。

    lng

    可选,动态轨迹点的经度坐标。

    lat

    可选,动态轨迹点的纬度坐标。

  • 轨迹线数据接口

    字段

    说明

    trackId

    动态轨迹在地图中轨迹线ID。

    colorField

    可选,动态轨迹线的颜色映射字段。

    sizeField

    可选,动态轨迹线的线宽映射字段。

    name

    可选,动态轨迹线名称

数据项配置

说明

数据源

组件的数据源中通过代码编辑可视化编辑展示了组件所包含的数据字段。也可以修改数据类型,灵活配置组件数据。

数据映射

当您需要自定义图表字段配置时,可以在数据映射模块设置不同的字段映射内容,将这些字段映射到组件对应的字段上。无需修改数据源中的字段,就可以实现数据的实时匹配。也可以单击image图标对字段分别样式配置。

过滤器

打开过滤器,选择已创建的数据过滤器或新建数据过滤器,并配置数据过滤器脚本,实现数据的筛选功能。详情请参见管理数据过滤器

数据响应结果

实时展示了组件所使用的数据。当组件数据源发生变化时,数据响应结果会对应展示最新的数据。如果系统反应延迟,您可以单击右侧的image图标,查看数据响应结果,也可以单击右侧的image图标,获取组件的最新数据。您也可以单击查看示例,查看当前组件的响应结果示例。

禁止加载态

勾选复选框,在组件更新和预览数据看板时,将看不到组件初始化时的加载内容,去勾选则相反。默认为去勾选状态。

受控模式

勾选复选框,组件初始化状态下不请求数据,仅通过全局变量或蓝图编辑器配置的方法发起请求数据;去勾选复选框,可以使用自动更新请求数据。默认为去勾选状态。

自动更新请求

勾选复选框,可以手动输入轮询的时间频次设置动态轮询。清除后则不会自动更新,需要手动刷新页面,或通过蓝图编辑器和全局变量事件来触发请求更新数据。

高级面板

image

通过高级面板配置交互事件或关联全局变量,实现组件之间的联动。具体操作请参见组件交互配置

蓝图交互

  1. 单击页面左上角的image图标,进入蓝图页面。

  2. 图层节点页签下,添加当前组件至主画布中。

  3. 查看蓝图配置参数。

    image

    说明

    图层事件和动作的参数提示信息,可以在画布右侧的锚点配置中单击image图标查看。

    • 事件

      事件

      说明

      当轨迹线数据接口更新时

      当数据返回结果发生变化时触发事件并抛出数据。

      当轨迹线数据接口请求状态变化时

      当数据请求状态发生变化时(例如,返回成功或失败状态)触发事件并抛出数据。

      当轨迹点数据接口更新时

      当数据返回结果发生变化时触发事件并抛出数据。

      当轨迹点数据接口请求状态变化时

      当数据请求状态发生变化时(例如,返回成功或失败状态)触发事件并抛出数据。

      当点击点时

      当单击图层中动态轨迹线时触发事件并抛出数据。

      当点击图层外区域时

      当单击图层外区域时触发事件并抛出数据。

      当鼠标移入要素时

      当鼠标移入图层的某区域时触发事件并抛出数据。

      当鼠标移出要素时

      当鼠标移出图层的某区域时触发事件并抛出数据。

      当鼠标在要素上移动时

      当鼠标在图层的某区域移动时触发事件并抛出数据。

      组件加载完成

      数据接口请求返回并经过过滤器处理后抛出的事件,同时抛出处理后的JSON格式的数据。具体数据示例请参见画布编辑器中组件右侧配置面板数据源页签的数据响应结果区域。

      轨迹到达关键点

      当轨迹线到达关键点时触发事件并抛出数据。

      轨迹离开关键点

      当轨迹线离开关键点时触发事件并抛出数据。

  • 动作

    动作

    说明

    导入轨迹线数据接口

    按组件绘制格式处理数据后,导入组件,重新绘制。不需要重新请求服务端数据。具体数据示例请参见画布编辑器中组件右侧配置面板数据源页签的数据响应结果区域。

    请求轨迹线数据接口

    重新请求服务端数据,上游数据处理节点或图层节点抛出的数据将作为参数。例如动态轨迹层配置了API数据源为https://api.test,传到请求数据动作的数据为{ id: '1'},则最终请求接口为https://api.test?id=1

    导入轨迹点数据接口

    按组件绘制格式处理数据后,导入组件,重新绘制。不需要重新请求服务端数据。具体数据示例请参见画布编辑器中组件右侧配置面板数据源页签的数据响应结果区域。

    请求轨迹点数据接口

    重新请求服务端数据,上游数据处理节点或图层节点抛出的数据将作为参数。例如动态轨迹层配置了API数据源为https://api.test,传到请求数据动作的数据为{ id: '1'},则最终请求接口为https://api.test?id=1

    清空选中要素

    取消轨迹线选中状态。

    切换显隐

    切换显隐显示隐藏组件默认不需要参数,可以按需添加动画配置,参考数据示例。

    {
      //动画方式,可选值为:appear|fade|slideToUp,默认值为 fade,不填无动画。
      "animationType": "fade",
      //动画延迟,默认值为1000,单位ms。
      "animationDuration": 1000,
      //动画曲线,可选值为:linear|easeInOutQuad|easeInOutExpo,默认值为 linear。
      "animationEasing": "linear"
    }

    显示

    隐藏

    更新组件配置

    动态更新组件的样式配置。需要先在组件的样式面板中,单击复制配置到剪贴板,获取组件配置数据。再根据需要在蓝图编辑器配置页面的数据处理节点中更改对应样式的字段值。