3D边界地图子组件（散点、柱状图、灯光）

3D边界地图主要以三维形态对相对宏观地图数据进行展示，支持添加散点、热力、标牌、柱图、飞线等地图子图层的效果叠加。本文以散点、柱状图、灯光子组件为例，对3D边界地图的子组件进行介绍。

01 操作流程

1、散点

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

图片

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

图片

图片

1.1 样式

1.1.1 编辑点位

选择【样式】—【散点】—【编辑点位】，可以自定义添加或删除点位。

图片

图片

1.1.2 基础设置

层级序号：设置子组件的渲染层级，层级序号越大越在上层，上层的物体将完全遮挡下层的物体；同层的物体将按照深度值（物体距离相机的远近）来确定遮挡关系。

自动排序：勾选之后，物体将根据根据其深度值（距离相机远近）来决定遮挡顺序，就是符合真实世界中物体的遮挡关系。等价于层级序号的配置项中设置了层级为0。

图片

1.1.3 物体设置

始终面向镜头：勾选此项，则散点始终面向镜头，旋转和缩放镜头都不会改变散点的大小，只会改变散点在屏幕上的位置。并且散点的尺寸和屏幕像素直接关联。不勾选此项，则散点融入世界，成为一个普通的3D的平面，遵循透视关系。缩放镜头会改变散点大小，旋转镜头会改变散点朝向。

基准点：散点的位置是根据经纬度映射在场景中的世界坐标，而基准点设置的是散点图标上对齐到场景中的世界坐标的那个点。一般设置“50% 50%“，这样散点的尺寸变化后，会保持始终居中，散点能更准确地表示经纬度的位置。

图片

1.1.4 样式配置

散点可以设置三种显示模式：矢量形状、图片和视频、模型。支持上传自定义图片、视频和模型。

图片

1.2 数据

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

• lng：经纬
• lat：维度
• city：城市名
• adcode：城市编码
• value：数值，显示在标牌的主内容中，可以是数字也可以文字。

示例如下：

[ {	    "lng": 120.301785,    "lat": 29.225269,    "city": "金华市",    "adcode": 330700,    "value": 100  }]

1.3 交互

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

鼠标点击：鼠标点击某个点位的定位点后发送回调和自定义事件。

当请求完成或数据变化时：鼠标点击定位点或轮播动画轮播到某个点位时发送回调和自定义事件。和鼠标点击的区别在于：鼠标点击只在鼠标点击时发送，而状态改变不仅会在鼠标点击时发送，还会在轮播到某个点位时发送。

2、柱状图

2.1 样式

2.1.1 基础配置

同散点子组件。

2.1.2 样式配置

可以分别对柱状和标牌进行配置。

图片

a、柱状配置：

支持透明：勾选此选项可以出现半透明柱子的效果，如果不需要半透明效果，则必须关闭此项，否则容易出现渲染中的遮挡关系错误。

混合模式：可选择正常、正片叠底、相加、相减四种模式。

柱状类型：可选择方柱or圆柱。

系列间距：环绕区划中心分布时，每个系类的柱子之间的间距。

图片

数据标签：开启后柱子上方会显示对应的数据。

图片

b、标牌配置

可自定义背景、序号、数值、区划名称的样式。

图片

2.1.3 交互配置

数据动画：开启后，所有的柱状图在预览时会同时抬升，标牌同时出现。

图片

轮播动画：开启后，标牌会按顺序轮流出现。

图片

2.2数据

• name：城市名
• value：数值，显示在标牌的主内容中，可以是数字也可以文字。
• adcode：城市编码

示例如下：

[
	{
		"name": "温州市",
		"value": 20,
		"adcode": 330300
	}
]

3、灯光

3.1 样式

3.1.1 基础配置

支持自动排序，同散点的基础设置

3.1.2 参数设置

设置灯光的基本参数。

图片

类型：选择光源的类型。（可以选择方向光、聚光灯和点光源）

颜色模式：灯光的颜色

• 预设：可以选择火柴光、烛光、篝火、白炽灯、日光等不同的效果。
• 色温：通过调节色温来改变灯光的效果。
• 颜色：可以自定义需要的灯光颜色。
• 强度：灯光的光照强度。

投射：开启该选项后会显示地图块、柱体等的阴影。