多层地图

更新时间:2019-12-02

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

图片

子图层管理

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

图片

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

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

通用配置

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

图片

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

地图底图层

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

图片

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

图片

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

图片

区域热力层

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

图片

地理区域配置

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

图片

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

数据绑定

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

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

图片

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

图片

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

图片

效果如下:

图片

高级设置

在高级设置中,您可以对地理区域的样式进行配置:

图片

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

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

图片

散点层

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

图片

数据绑定

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

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

在控制面板中选取对应的字段,其中颜色映射取值字段必填,散点大小映射字段选填:

图片

经纬度数据

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

图片

如果您数据库中保存的经纬度数据是国测局坐标,可以打开转换到百度坐标系坐标的开关。

Tooltip 附加数据绑定

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

图片

效果如下:

图片

高级设置

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

图片

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

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

图片

除此之外,您还可以配置 Tooltip 弹窗和轮播:

图片

热力层

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

图片

数据绑定

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

SQL 查出来的结果中,每一行对应一个热力区域,每行中有名称字段和取值字段

图片

在定位热力区域时是需要使用到地点的经纬度数据的,默认情况下,Sugar会根据用户绑定的「省、市、地点的名称」自动从系统中查找对应的经纬度坐标,但是Sugar系统中的经纬度坐标数据很有限(一般只能匹配全国的省份和城市以及城市下的区县),在一些情况下用户需要展示一些自己定义好经纬度坐标的地点数据,因此Sugar支持让用户绑定经纬度字段来展示数据,如果您数据库中保存的经纬度数据是国测局坐标,可以打开转换到百度坐标系坐标的开关。

高级设置

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

图片

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

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

飞线层

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

图片

数据绑定

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

SQL 查出来的结果中,每一行对应一条飞线的信息,包括飞线名称、飞线取值字段(映射飞线颜色)、飞线起点名称、飞线终点名称,如下图所示:

图片

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

图片

经纬度数据

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

图片

Tooltip 附加数据绑定

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

图片

高级设置

在高级设置中,您可以对飞线的样式进行配置,包括飞线的粗细和颜色映射:

图片

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

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

图片

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

图片

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

图片

路径层

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

图片

数据绑定

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

路径层通过途径点的位置信息绘制路径。

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

  • 路径名称字段:标记这个途径点属于哪条路径,不同路径的名称不能相同
  • 途经点的位置字段:可以提供中国省市名称,系统会自动查找途经点的经纬度。也可以直接提供经度和纬度字段

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

图片

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

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

图片

高级设置

在高级设置中,您可以对路径的样式进行配置,包括路径的粗细和颜色映射:

图片

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

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

图片

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

图片

本页内容