多层地图

更新时间:2021-07-22

私有部署中如果要使用多层地图,要求用户的浏览器所在的网络环境能够连接公网(能够访问百度地图)。

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

图片

子图层管理

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

图片

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

  • 新增图层

图片

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

通用配置

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

图片

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

地图底图层

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

图片

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

图片

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

图片

区域热力层

区域热力层可以展示数据在各地理区域中的分布情况:

图片

地理区域配置

在「区域色彩」类型图层的「高级选项卡」中,可以配置地理区域的范围:

Sugar BI中内置了省,市,区的行政划分供您选项。您还可以上传自己的 GeoJSON 文件来显示自定义的地理区域,详见自定义 GeoJSON

图片

数据绑定

如展示各个「省份」的「销售额」情况:

图片

在区域色彩层中除了可以展示颜色映射数据,还可以在 Tooltip 悬浮窗中展示一些附加数据:

图片

高级设置

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

图片

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

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

图片

散点层

散点层可以通过散点的大小、颜色和形状在地图上可视化三个维度的数据。

数据绑定

如展示各个「省份」的「销售额」情况: 图片

还可以用散点的「大小」来表示数据的大小,如将「利润」拖入到散点大小中:

图片

还可以设置散点的系列,并在高级设置中设置每个系列的形状:

图片

Tooltip 附加数据绑定

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

图片

经纬度数据

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

图片

高级设置

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

图片

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

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

图片

除此之外,您还可以配置 Tooltip 弹窗和轮播。展示弹框信息的的方式有两种,一种是通过 Tooltip,轮播的时候每次只能展示一个信息,可以展示百分比和排名,设置 Tooltip 的字体大小。 另一种则是通过标签的方式,这种方式功能强大,一次可以轮播多个标签。可以显示最值气泡的标签、高亮气泡标签等。当您在「散点标签和 Tooltip 设置」中开启「使用标签展示数据内容」并切换为高级模式后,便可以支持对标签内容的自定义设置。支持对以下几个字段的数据映射 name, value, sizeValue, type, rank, tooltipValuespercent。其中 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内置的部分图形,还可以上传本地图片和外链图片。图片的优先级高于内置的形状。

图片

热力层

热力层可以通过颜色变化直观的展现数据分布情况,和上面的散点图非常类似,大多数配置也基本一样

数据绑定

图片

高级设置

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

图片

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

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

蜂窝聚合层

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

数据绑定

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

图片

高级设置

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

图片

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

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

点聚合层

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

数据绑定

数据绑定,如果散点通过名称来定位,这只需要绑定名称字段即可,如果通过经纬度来定位,则不仅要绑定名称字段也要绑定经纬度字段。经纬度数据的详细内容可以查看散点层。

图片

点聚合的 tooltip 除了展示名称外,还可以展示一些附加数据,需要说明的是,只对没有聚合的离散点支持交互,包括 tooltip 展示,图表下钻和联动。

图片

高级配置

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

图片

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

图片

飞线层

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

数据绑定

可以用线条的「宽度」和「颜色」来表示数据的大小,可以在 Tooltip 悬浮窗中展示一些附加数据。

图片

经纬度数据

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

图片

Tooltip 附加数据绑定

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

图片

高级设置

在高级设置中,您可以对飞线的样式进行配置,包括飞线的粗细和颜色映射,还可以「开启颜色叠加」达到下图的效果。

图片

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

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

图片

飞线的端点可以展示气泡和名称,相关配置:

图片

还可以对 tooltip 的样式和展示内容进行配置:

图片

对飞线宽度的映射设置:

图片

路径层

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

数据绑定

对于途径点数据的处理方式支持以下几种:

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

图片

经纬度数据

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

图片

高级设置

在高级设置中,您可以对路径的样式进行配置,包括路径的粗细和颜色映射。此外还支持开启颜色叠加,实现 blending 效果。

图片

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

还可以对路径的动画进行配置:

图片

路径的端点可以展示气泡和名称,注意,气泡名称显示的前提是设置根据名称自动查找定位,并设置途经地点名称字段。

图片

还可以对 tooltip 的样式和展示内容进行配置:

图片

对路径宽度的映射设置:

图片

本页内容