通用3D-散点子组件

散点就是地图上显示的一个一个的点位,除了用位置表现经纬度信息之外,就是使用图标在业务上的表示点的类别。

可在数据源中接入带经纬度数据的数组,通过经纬度映射到世界坐标后,自动生成多个散点对象,生成的每个对象称为点位,每个点位对应着数据源数组中每个元素。

配置项

基础设置

层级序号

参见《通用配置项说明》中的子组件的层级序号部分

自动排序

参见《通用配置项说明》中的子组件的自动排序部分

事件优先级

参见《通用配置项说明》中的子组件的事件优先级部分

样式配置

始终面向镜头

勾选此项,则散点始终面向镜头,旋转和缩放镜头都不会改变散点的大小,只会改变散点在屏幕上的位置。并且散点的尺寸和屏幕像素直接关联。

不勾选此项,则散点融入世界,成为一个普通的3D的平面,遵循透视关系。缩放镜头会改变散点大小,旋转镜头会改变散点朝向。

基准点

设置散点的基准点,是一个锚点。(关于锚点的介绍可以参见《通用知识 - 锚点》

散点的位置是根据经纬度映射在场景中的世界坐标,而基准点设置的是散点图标上对齐到场景中的世界坐标的那个点。

一般设置“50% 50%“,这样散点的尺寸变化后,会保持始终居中,散点能更准确地表示经纬度的位置。

填充类型

散点可以设置三种显示模式:矢量形状、图片和视频,切换成不同的填充类型,下方的配置项数据系列将发生改变。数据系列是一个数组配置项,可以添加多个元素,多个元素的意义将在下文详述。

矢量形状

选择填充类型为矢量形状后,下方的数据系列配置项将变成如下图所示的配置:

矢量形状的散点可以表现为一些简单的几何图形,如圆、方形、三角形等。

系列名

渲染散点的每个点位时,会把数据中的“s”字段的值数据系列配置项下所有的系列名与逐一进行匹配,假如匹配成功,则使用该组配置项作为这个点位的样式。

这样就可以使用系列名来把一组散点数据用不同的样式来表现。

所以在系列名中填入自定义的文字,然后在数据中也设置相同的文字,这样就能给数据中的每一项设置样式。

矢量形状

可以选择圆、方形、三角形等三种形状。

半径

可选择两种确定散点半径的方式:数据映射半径和固定半径。

数据映射半径

散点的半径根据其数值大小,线性地映射到一个半径范围。

选择半径为数据映射半径后,配置项下方变成一个范围选择器,设置散点的最大半径和最小半径。计算散点半径时,数据中值最小的点位的半径是最小半径值,数据中值最大的点位的半径是最大半径值,数据中介于最大值和最小值之间的点位的半径也介于最小半径和最大半径之间。

固定半径

设置固定半径则所有散点的半径都是设置的值。

颜色模式

就是设置如果计算每个矢量形状点位的颜色,包括不映射、连续映射和分段映射。

不映射

不映射就是所有散点的颜色都使用一个固定的颜色值,下方会变成一个颜色选择器。

连续映射

连续映射就是设置一个渐变颜色的色带,每个点位的颜色按照其数据中数值的大小,线性地映射到这个色带上。

分段映射

分段映射就是设置多个数值区间,每个区间设置了一个数值范围(包括最小值和最大值)和一个区间颜色。每个点位的数据中的值与每个数值区间进行匹配,匹配到某个区间,则这个点位的颜色就是这个区间下配置的颜色。如果一个点位没有匹配到任何的区间,则不显示该点位

描边

设置矢量形状的描边样式,包括描边颜色和描边线的粗细程度。

图片

选择填充类型为图片后,下方的数据系列配置项将变成如下图所示的配置:

图片模式下,可以上传图片来作为散点的样式。

系列名

矢量形状下的系列名完全一致,可参考上文中的描述。

图片上传和尺寸

上传一张图片作为散点的样式,并设置图片的基础尺寸。

为什么说是基础尺寸呢?因为下面的配置可能会使得散点在这个基础尺寸上进行缩放。

启用数据映射

勾选启用数据映射之后,下方多出一个数据映射缩放的配置项:

数据映射缩放可以设置一个最小值和一个最大值,每个点位根据数据中值的大小线性地映射到这个缩放区间内,来计算这个点位的缩放大小。缩放大小是在散点尺寸的基础上再进行等比例缩放。

视频

选择填充类型为视频后,下方的数据系列配置项将变成如下图所示的配置:

系列名

矢量形状下的系列名完全一致,可参考上文中的描述。

视频上传和尺寸

上传一个视频作为散点的样式,并可以设置视频的基础尺寸。这个基础尺寸同样会受到下面的数据映射缩放的影响。可支持带透明通道的视频文件,例如webm格式的文件。视频渲染后会循环播放。

启用数据映射

勾选启用数据映射之后,下方多出一个数据映射缩放的配置项:

这个配置项和上文中的数据映射缩放的完全一致,可参见上文

数据

数据中支持传入数组,数组的每个元素是一个对象结构,对象的字段和意义如下:

  • lng:经纬
  • lat:维度
  • s:系列名,会和配置项中的数据系列进行匹配,来确定点位的样式,参见上文
  • value:数值,会决定散点的大小,用于一些根据数值来线性映射的配置项。

示例如下:

[
  {
    "lng": 120.853576,
    "lat": 28.887459,
    "value": 1578,
    "s": "系列一"
  }
]

交互

回调和自定义事件

该子组件中回调和自定义事件有着完全相同的触发时机,并且发送完全一样的数据,所以二者综合起来说明。

鼠标点击

鼠标点击某个点位后发送回调和自定义事件,发送的是数据源的数组中当前点位的数据。

自定义动作

暂无

400-8505-905复制
免费试用
在线咨询
微信社区
易知微-数据可视化
微信扫一扫入群