更新时间:2024-06-18 GMT+08:00
分享

地图

AstroCanvas中的地图组件为二维地图,支持高德、百度、天地图和自定义地图。

在大屏设计页面,从“地图”中,拖拽“地图”组件至画布空白区域,如图1

图1 地图
图2 边距样式说明

卡片

卡片是指包裹图表组件的外层架构,可以理解为组件由卡片中基础元素(卡片标题、图表、卡片背景、卡片边框)和图表元素构成。

图3 卡片
  • 背景
    • 背景色:设置组件卡片的背景颜色。
    • 边框:组件卡片边框设置,支持无边框、全边框和角边框三种样式。设置为全边框和角边框时,支持设置组件外圈边框的线型、圆角等。
    • 样式:选择图片时,图片显示的样式,支持普通、居中、拉伸和平铺四种样式。
    • 选择图片:使用本地的图片作为组件背景,支持新增目录和子目录,便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片,且每张图片不能超过50MB。
  • 特效:组件是否高亮显示,支持默认展示和跳转到页面时展示。
  • 边距:组件中图表距离整个组件四边(上、下、左、右,如图2)的距离,默认为0,即铺满整个组件。
    • 上边距:图表到组件边框顶部的距离。
    • 右边距:图表到组件边框右侧的距离。
    • 下边距:图表到组件边框底部的距离。
    • 左边距:图表到组件边框左侧的距离。

配置

在配置中,设置地图组件的基本信息、热力图层、柱状图层和标签图层等。

图4 配置
  • 地图基本配置
    • 地图类型:地图第三方服务商,如天地图、高德地图和百度地图。
    • 高德/百度/天地图密钥:地图第三方密钥,请自行到对应官网申请。
    • 自定义地图:根据实际需求,自定义地图。如果开启自定义地图,请配置地图GeoJson数据链接地址或配置GeoJson数据素材。
    • 地图中心经度:设置地图中心点的经度。
    • 地图中心纬度:设置地图的中心点的纬度。
    • 地图缩放级别:设置地图的缩放层级,最小级别为4,最大级别为19。
    • 地图样式:设置地图基本样式模板。
  • 热力图层配置
    • 显示热力图层:是否显示热力图层。
    • 数据标题:设置热力图层的数据标题。
    • 显示类型 :设置热力图层显示类型,如均分显示或区间部分。

      设置为“均分显示”时,会显示所有数据,且区域数据从小到大,对应图层颜色由浅到深。

      图5 均分显示

      设置为“区间显示”时,仅显示符合要求的数据,且区域图层颜色取决于其数据所处区间对应的颜色。

      图6 区间显示
    • 填充颜色:设置热力图层的填充颜色。“显示类型”“均分显示”时,区域数据从小到大,对应图层颜色由浅到深。“显示类型”“区间显示”时,区域图层颜色取决于其数据所处区间的对应颜色。
    • 描边样式:设置省/直辖市描边样式,如虚线、点线等。
    • 描边粗细:设置省/直辖市描边粗细,单位为px。
    • 描边颜色:设置省/直辖市描边颜色。
  • 柱状图层配置
    • 显示柱状图层:是否显示柱状图层。
    • 显示类型:设置柱图层显示内容,如均分显示或区间部分。

      设置为“均分显示”时,会显示所有数据,且区域数据从小到大,对应图层颜色由浅到深。

      图7 均分显示

      设置为“区间显示”时,仅显示符合要求的数据,且区域图层颜色取决于其数据所处区间对应的颜色。

      图8 区间显示
    • 填充颜色:设置柱子的填充颜色。“显示类型”“均分显示”时,区域数据从小到大,对应图层颜色由浅到深。“显示类型”“区间显示”时,区域图层颜色取决于其数据所处区间的对应颜色。
    • 柱子粗细:设置柱子的粗细,单位为px。
    • 柱子长度比:数据最大值对应的柱子高度与该地图上1个纬度直线距离的比值,取值范围为[0, 10]。
    • 显示标注:柱子上是否显示标注文字样式。设置为“显示”时,支持设置标注文字的字体、大小和颜色。
  • 标签图层配置
    • 显示标签图层:是否显示标签图层。
    • 数据标题:设置标签图层的数据标题。
    • 显示类型:设置标签的显示内容,如均分显示或区间部分。
      设置为“均分显示”时,会显示所有数据,且区域数据从小到大,对应图层颜色由浅到深。
      图9 均分显示

      设置为“区间显示”时,仅显示符合要求的数据(如0~10之间的数据),且区域图层颜色取决于其数据所处区间对应的颜色。

      图10 区间部分
    • 填充颜色:设置标签数据所处区间的对应颜色。均分显示时,区域数据从小到大,对应图层颜色由浅到深。区间显示时,区域图层颜色取决于其数据所处区间对应颜色。
    • 数值字体:设置标签数值的字体、颜色和大小等。
    • 数值后缀:设置标签数值的后缀,如%。
    • 内容字体:设置标签内容的字体、颜色和大小等。
    • 内容背景颜色:设置标签内容的背景颜色。

数据

在数据中,配置地图的数据来源,更多介绍请参见数据接入

图11 设置组件数据源
图12 桥接器设置
  • 自定义围栏数据:地图自定义围栏数据桥接器,数据中省/直辖市code一致,则认为属于同一围栏区域。预览或发布页面时,单击围栏区域,地图会下钻到围栏区域。若未配置该连接器,则下钻到单独省/直辖市。
    图13 自定义围栏数据
  • 热力图层数据:热力图层数据桥接器/数据集,根据省/直辖市数值大小,热力图层颜色深浅不一。
  • 柱状图层数据:柱状图层数据桥接器/数据集,根据省/直辖市数值大小,柱子颜色、高度不一。
  • 标签图层数据:标签图层数据桥接器/数据集,以标签形式展示省/直辖市具体数据。

交互

在交互中,配置地图与其他组件或页面之间的交互能力。更多交互介绍,请参见交互设置

分享:

    相关文档

    相关产品