多层地图

更新时间：2023-11-13

多层地图是一种以百度地图为底图的多层地图图表，可以添加多种子图层：地图底图层，区域色彩层，散点层，热力层，飞线层和路径层。您可以灵活的添加图层来展示您的数据。

子图层管理

在「多层地图」的控制面板的顶部中可以看到子组件管理模块。

您可以在这里对地图的图层进行如下操作：

新增图层

拖拽调整图层层叠顺序
点击某个图层来切换控制面板配置对象
切换某个在编辑状态下的显隐
编辑图层名称
删除图层

通用配置

在「多层地图」的「基础」选项卡中有一些通用的基础设置：

在这里可以对地图的初始位置，缩放，鼠标操作进行配置。

地图底图层

地图底图层不受图层顺序调整影响，始终存在于最底层作为其他图层的容器。

在「地图层」的高级选项卡中，您可以对百度地图的样式进行自定义配置。 Sugar BI中内置了几种地图主题供您选择，主题的种类还会不断丰富，通过点击「地图层」->「高级」进行配置：

如果内置主题不能满足您的要求，我们支持更详细的地图样式自定义，可以对地图的各个元素做详细的样式自定义：

区域热力层

区域热力层可以展示数据在各地理区域中的分布情况，地理区域可以是Sugar BI中内置的省，市，区行政划分，也可以通过上传您自己的 geoJSON 来绘制个性化的地理区域。

地理区域配置

在「区域色彩」类型图层的「高级选项卡」中，可以配置地理区域的范围，可以在「高级」->「区域范围设置」中进行配置：

Sugar BI中内置了省，市，区的行政划分供您选项。您还可以上传自己的 geoJSON 文件来显示自定义的地理区域，详见自定义 GeoJSON。值得一提的是，如果上传的 geojson 和地图没有完全贴合（由于坐标系不同的原因），可以开启「国测局转百度坐标系」或「WGS84 转百度坐标系」来进行校正。

数据绑定

下面介绍使用 SQL 方式绑定数据时的配置：

SQL 查出来的结果应该是如下格式的，一列数据是省市名称，一列数据是对应的取值：

取值	名称
80	上海
117	河南
112	香港

在控制面板中选取对应的字段：

在区域色彩层中除了可以展示颜色映射数据，还可以在 Tooltip 悬浮窗中展示一些附加数据，通过在「数据」->「添加在 Tooltip 中显示的附加数据项」配置中进行设置：

高级设置

在高级设置中，您可以对地理区域的样式和范围进行配置。在区域范围设置也可以通过上传自定义 GeoJSON 文件，展示自定义地图区域，详见自定义 GeoJSON。值得一提的是，如果上传的 geojson 和地图没有完全贴合（由于坐标系不同的原因），可以开启「国测局转百度坐标系」或「WGS84 转百度坐标系」来进行校正。

这里可以配置数据中的数值颜色映射的类别，可以使用默认配色，跟随大屏整体的主题配色，或完全自定义映射里的各个颜色。

除此之外，您还可以配置区域名称的显隐和样式，以及 Tooltip 弹窗和轮播：

散点层

散点层可以通过散点的大小和颜色在地图上可视化两个维度的数据。叠加在区域色彩层上的效果如下：

数据绑定

下面介绍使用 SQL 方式绑定数据时的配置：

SQL 查出来的结果中，每一行对应一个散点，每行中有名称字段，颜色映射取值字段，散点大小映射取值字段、散点系列字段等

在控制面板中选取对应的字段，散点名称必填，其余的颜色映射取值字段，散点大小映射字段、散点系列选填：

经纬度数据

在定位散点时是需要使用到地点的经纬度数据的，默认情况下，Sugar BI会根据用户绑定的「省、市、地点的名称」自动从系统中查找对应的经纬度坐标，但是Sugar BI系统中的经纬度坐标数据很有限（一般只能匹配全国的省份和城市以及城市下的区县），在一些情况下用户需要展示一些自己定义好经纬度坐标的地点数据，因此Sugar BI支持让用户绑定经纬度字段来展示数据，通过「数据」->「散点位置的经纬度计算方式」进行配置。此外还支持将国测局坐标转换为百度坐标系和 WGS84 转百度坐标系：

在散点图中除了可以展示颜色映射数据和散点大小映射数据，还可以在 Tooltip 悬浮窗中展示一些附加数据：

高级设置

在高级设置中，您可以对散点的样式进行配置：

这里可以配置数据中的颜色映射方式和数值颜色映射的类别，可以使用默认配色，跟随大屏整体的主题配色，或完全自定义映射各个颜色。此外可以开启颜色叠加，进行 blending 效果的渲染。

您还可以配置散点的尺寸和名称。当散点的尺寸不映射到数据时，可以通过「常规散点大小」来调整所有散点的尺寸；当散点映射到数据时，可以配置最大散点和最小散点的尺寸：

除此之外，您还可以配置 Tooltip 弹窗和轮播。展示弹框信息的的方式有两种，一种是通过 Tooltip，轮播的时候每次只能展示一个信息，可以展示百分比和排名，设置 Tooltip 的字体大小。另一种则是通过标签的方式，这种方式功能强大，一次可以轮播多个标签。可以显示最值气泡的标签、高亮气泡标签等。当您在「散点标签和 Tooltip 设置」中开启「使用标签展示数据内容」并切换为高级模式后，便可以支持对标签内容的自定义设置。支持对以下几个字段的数据映射 name, value, sizeValue, type, rank, tooltipValues 和 percent。其中 tooltipValues 为数组，使用时候需要添加数组下标，例如 tooltipValues[0]。

name 表示散点的名称
value 表示设置的散点颜色字段
sizeValue 表示设置的散点大小字段
type 表示设置的散点系列字段
tooltipValues 表示设置的其他维度和度量，使用时需要附带相应的下标
rank 该项数据的 value 在整个数据中排名，需要设置散点颜色字段
percent 该项数据的 value 在整个数据中所占百分比需要设置散点颜色字段

相比于百度地图散点和平面地图散点的自定义标签内容，多层地图的散点标签内容自定义支持对 HTML 标签的渲染，功能更加强大，例如您可以这样： <span style="color: red;">{name}</span>的GDP是{value}<br/>占比是{percent}，全国名次为 {rank} <div><span>头像</span><img src={tooltipValues[0]} width=24 height=24></div> 等。

当您在数据中设置了散点系列字段，那么就可以设置不同的散点形状来映射数据中不同的类型。系列设置除了可以使用Sugar BI内置的部分图形，还可以上传本地图片和外链图片。图片的优先级高于内置的形状。

热力层

热力层可以通过颜色变化直观的展现数据分布情况

数据绑定

下面介绍使用 SQL 方式绑定数据时的配置：

SQL 查出来的结果中，每一行对应一个热力区域，每行中有名称字段和取值字段，取值字段可以不填，系统会给统一的取值。

在定位热力区域时是需要使用到地点的经纬度数据的，默认情况下，Sugar BI会根据用户绑定的「省、市、地点的名称」自动从系统中查找对应的经纬度坐标，但是Sugar BI系统中的经纬度坐标数据很有限（一般只能匹配全国的省份和城市以及城市下的区县），在一些情况下用户需要展示一些自己定义好经纬度坐标的地点数据，因此Sugar BI支持让用户绑定经纬度字段来展示数据，此外还支持将国测局坐标转换为百度坐标系和 WGS84 转百度坐标系：

高级设置

在高级设置中，您可以对热力点的样式进行配置：

这里可以配置数据中的数值颜色映射的类别，可以使用默认配色，跟随大屏整体的主题配色，或完全自定义映射里的各个颜色。

除此之外，您还可以配置热力点的半径和透明度等。

蜂窝聚合层

蜂窝聚合层的是另一种展现形式的散点图，各散点数据可以随着地图的缩放层级聚合成更大的散点。

数据绑定

数据绑定的方式与散点层和热力层基本一致。

高级设置

在高级设置中，您可以对蜂窝的样式进行配置：

这里可以配置数据中的数值颜色映射的类别，可以使用默认配色，跟随大屏整体的主题配色，或完全自定义映射各个颜色。

除此之外，还可以配置蜂窝透明度、大小、形状和标签等。

点聚合层

点聚合层是一种展示散点聚合信息的图层，可以展示范围内散点的数量，随着地图的缩放而变化。

数据绑定

与散点层类似，但只需要绑定名称字段即可。经纬度的绑定方式则和散点一致。

高级配置

在高级设置中，您可以对点的样式进行设置，包括聚合点和非聚合点的样式，例如颜色、大小、描边、阴影等。

还可以对聚合标签以及非聚合点的 tooltip 进行样式设置

飞线层

飞线层可以展示数据在区域间的流动，飞线的颜色还可以映射流的大小。

数据绑定

下面介绍使用 SQL 方式绑定数据时的配置：

SQL 查出来的结果中，每一行对应一条飞线的信息，其中飞线起点名称和飞线终点名称是必填的，飞线名称、飞线取值字段（映射飞线颜色）飞线宽度字段（映射飞线宽度）是选填的，如果使用经纬度来定位飞线位置的话，起点终点的经纬度也需要。如下表所示：

飞线名称	起点名称	终点名称	取值	宽度	起点经度	起点纬度	终点经度	终点纬度
名称 1	北京	上海	3	1	-75.440806	40.652083	-80.943139	35.214
名称 2	天津	重庆	5	2	113.298786	23.392436	117.298436	31.780019
名称 3	深圳	郑州	6	4	-106.6091944	35.0402222	-112.011583	33.434278

在控制面板中选取对应的字段：

经纬度数据

在使用飞线图时，是需要使用到地点的经纬度数据的。默认情况下，Sugar BI会根据用户绑定的「省、市、地点的名称」自动从系统中查找对应的经纬度坐标，但是Sugar BI系统中的经纬度坐标数据很有限（一般只能匹配全国的省份和城市以及城市下的区县），在一些情况下用户需要展示一些自己定义好经纬度坐标的地点数据。因此Sugar BI支持让用户绑定经纬度字段来展示数据，包括飞线起点的经纬度字段和终点的经纬度字段。此外还支持将国测局坐标转换为百度坐标系和 WGS84 转百度坐标系：

飞线图的 tooltip 除了可以展示排名、飞线名称以及颜色映射数据外，还可以展示一些附加数据：

高级设置

在高级设置中，您可以在「高级」->「飞线样式设置」对飞线的样式进行配置，包括飞线的粗细和颜色映射、在「高级」->「飞线动画设置」对飞线的动画进行配置：

这里可以配置数据中的数值颜色映射的类别，可以使用默认配色，跟随大屏整体的主题配色，或完全自定义映射里的各个颜色。

还可以对飞线的动画进行配置：

可以在「高级」->「飞线端点设置」对飞线的端点展示气泡和名称进行相关配置：

还可以在「高级」->「Tooltip 设置」对 tooltip 的样式和展示内容进行配置：

对飞线宽度的映射设置：

路径层

路径层可以根据坐标数据绘制一条路径，路径的颜色还可以映射数据的大小。

数据绑定

下面介绍使用 SQL 方式绑定数据时的配置：

路径层通过途径点的位置信息绘制路径。对于途径点数据的处理方式支持以下几种：

同路径取累加值
同路径取平均值
同路径取最大值
同路径取最小值
同路径取第一个值
同路径取最后一个值

SQL 查出来的结果中，每一行对应一条路径的一个途经点，每行中需要有：

路径名称字段：标记这个途径点属于哪条路径/飞线，不同路径/飞线的名称不能相同
途经点的位置字段：可以提供中国省市名称，系统会自动查找途经点的经纬度。也可以直接提供经度和纬度字段
取值字段（映射线条颜色）选填
宽度字段（映射线条宽度）选填

在控制面板中选取对应的字段绑定即可：

需要注意的是，同一条路径的途径点在结果集中需要保证从起点到终点有序，不同路径的途径点的相对顺序可随意

如果需要开启路径的颜色映射，比如想将一条路径的流量大小映射到颜色进行可视化，则每个途径点还需要有一个颜色映射数据取值字段。可以选择以下几种方式将每条路径途经点的数据汇总到路径上：

经纬度数据

在使用路径图时，是需要使用到地点的经纬度数据的。默认情况下，Sugar BI会根据用户绑定的「省、市、地点的名称」自动从系统中查找对应的经纬度坐标，但是Sugar BI系统中的经纬度坐标数据很有限（一般只能匹配全国的省份和城市以及城市下的区县），在一些情况下用户需要展示一些自己定义好经纬度坐标的地点数据。因此Sugar BI支持让用户绑定经纬度字段来展示数据，包括飞线起点的经纬度字段和终点的经纬度字段。此外还支持将国测局坐标转换为百度坐标系和 WGS84 转百度坐标系：