跳到主要内容

气泡标注地图

配置步骤如下：

1、添加地图​

点击“”图标，选择"离线地图"，再点击“气泡标注地图”,如下图

2、使用场景​

气泡标注地图是结合散点气泡进行数据展示，适合按省份进行数据分布统计的应用场景，效果图如下

3、样式配置​

（1）地图级别​

地图支持国家、省、市3级行政区域展示如下图 国家地图

省级地图

市级地图

（2）地图比例​

调整地图显示比例，如下图

（3）地图样式配置​

  • 开启钻取：开启钻取后地图支持省市之间的下钻；
  • 名称显示：控制地图省份名称是否显示；
  • 字体大小：省份名称字体大小；
  • 字体颜色：省份名称字体颜色；
  • 字体高亮颜色：鼠标经过省份名称时的字体颜色；
  • 边框线宽：省界线宽度；
  • 边框颜色：省界界线颜色；
  • 区域颜色：地图每个省份的颜色；
  • 地图大小：设置地图的大小；
  • 上下边距：设置地图的上下边距；
  • 开启描边：开启后地图显示一个描边的效果，如图7.2.1
  • 描边颜色：设置描边的颜色
  • 描边大小：设置描边的大小
  • 开启筛选：开启后地图右下角会显示一个视觉映射组件，如图7.2.2
  • 排列方式：设置视觉映射组件的展示方式（横向/纵向）
  • 宽度：设置视觉映射组件的宽度
  • 高度：设置视觉映射组件的高度
  • 右边距：设置视觉映射组件距离容器的右边距
  • 底边距：设置视觉映射组件距离容器的底边距

图7.2.1

图7.2.2

（4）散点设置​

  • 比例：控制散点显示的大小比例；
  • 形状：散点图形样式选择；
  • 文字展示：控制是否显示散点处的文本；
  • 文字位置：控制散点处的文本显示的位置（左/中/右）；
  • 文本颜色：控制散点处显示的文本的颜色；
  • 文本大小：控制散点处显示的文本的字体大小；
  • 文本高亮颜色：控制散点处的文本鼠标移入后的的颜色；
  • 动态散点个数：设置涟漪效果的三点的个数

（5）自定义配色​

4、数据格式​

数据格式示例​

[
    {
        "name": "河南",
        "value": 107.9,
        "lng": 113.4668,
        "lat": 34.6234
    },
    {
        "name": "江苏",
        "value": 124,
        "lng": 118.8062,
        "lat": 31.9208
    },
    {
        "name": "安徽",
        "value": 115,
        "lng": 117.29,
        "lat": 32.0581
    },
    {
        "name": "湖北",
        "value": 116,
        "lng": 114.3896,
        "lat": 30.6628
    },
    {
        "name": "浙江",
        "value": 157,
        "lng": 119.5313,
        "lat": 29.8773
    },
    {
        "name": "内蒙古",
        "value": 101.3,
        "lng": 110.3467,
        "lat": 41.4899
    },
    {
        "name": "江西",
        "value": 134,
        "lng": 116.0046,
        "lat": 28.6633
    },
    {
        "name": "湖南",
        "value": 112,
        "lng": 113.0823,
        "lat": 28.2568
    },
    {
        "name": "吉林",
        "value": 100.4,
        "lng": 125.8154,
        "lat": 44.2584
    },
    {
        "name": "云南",
        "value": 134,
        "lng": 102.9199,
        "lat": 25.4663
    },
    {
        "name": "黑龙江",
        "value": 115,
        "lng": 127.9688,
        "lat": 45.368
    },
    {
        "name": "台湾",
        "value": 143,
        "lng": 121.4648,
        "lat": 25.563
    }
]

城市或者地区的数据格式和以上类似，只要修改对应的地区的经纬度的数据即可。- 拾取经纬度