地图

卡片

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

图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 自定义围栏数据
  
• 热力图层数据：热力图层数据桥接器/数据集，根据省/直辖市数值大小，热力图层颜色深浅不一。
• 柱状图层数据：柱状图层数据桥接器/数据集，根据省/直辖市数值大小，柱子颜色、高度不一。
• 标签图层数据：标签图层数据桥接器/数据集，以标签形式展示省/直辖市具体数据。

交互

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