基础地图

组件说明

该组件主要以二维轮廓地图和在线地图服务相结合的形式展示相应地理信息数据，可基于地图底图、散点、飞线图层等地理信息子组件，编辑地图样式。同时支持悬停、拖拽、单击下钻、双击聚焦等地图交互模式。

组件结构

基础地图组件主要由父组件及子组件两部分组成，子组件渲染覆盖在父组件上。可根据实际场景，分别定义对应配置项。

结构示意

子组件示意

组件配置

父组件样式配置

在样式中，可以设置组件的属性、基本设置、地图样式和交互设置。

属性

配置项	说明
位置	X：组件在画布中的横坐标。 Y：组件在画布中的纵坐标。
尺寸	W：组件宽度。 H：组件高度。

属性面板

位置尺寸示意图

基本配置

配置项	说明
地图范围	可选择中国、省、市、区，四级数据。
地图中心	初始地图可视范围中心点的经纬度。
缩放级别	初始地图的大小。

地图样式

配置项	说明
填充颜色	设置地图颜色，有纯色和线性渐变色两类可选。纯色可控制整体透明度，线性渐变可调整渐变角度。
描边	设置每一块地区区域的范围描边宽度和颜色。
阴影	设置地图整体的阴影参数。

底层地图子组件样式配置

在线瓦片地图，添加后默认展示在地图图层的最下方，可设置不同风格，支持自定义。

基本设置

配置项	说明
风格选择	支持 11 种风格选择。
风格选择-自定义	支持调用高德自定义地图样式，在高德自定义地图应用中配置 key 和样式 ID。

散点子组件样式配置

用于表示地图上的点位，支持根据不同数据类型设置不同点位样式。

散点类型

配置项	说明
普通点	根据数据返回的位置信息，展示在地图上。
大小点	根据数据返回的位置信息，展示在地图上，图形大小随数据动态变化。
自定义	普通点的变体，支持自定义上传图片，设置个性化点位图标。

普通点-散点样式

配置项	说明
点半径	设置点大小，单位为 px。
描边宽度	设置点描边宽度。
颜色属性	单色：所有点设置同一个颜色。 多色：根据不同数据类型，设置不同颜色。
叠加方式	正常。 变亮：散点有重合部分会变亮。

多色面板示意

大小点-散点样式

配置项	说明
点半径	设置点的最小和最大半径，对应数据中的最小和最大值，单位为 px。
描边宽度	设置点描边宽度。
颜色属性	单色：所有点设置同一个颜色。 多色：根据不同数据类型，设置不同颜色。
叠加方式	正常。 变亮：散点有重合部分会变亮。

自定义-散点样式

配置项	说明
图片尺寸	设置图片大小，单位为 px。
叠加方式	正常。 变亮：散点有重合部分会变亮。

飞线子组件样式配置

通常用来表示两种地理事物关系和联系，或者人口迁移、物流起点目的地等。

飞线样式

配置项	说明
飞线长度	设置飞线总体长度，单位为米。
线宽度	设置飞线的粗细，单位为米。
相对高度	设置飞线中点高度，单位为米。
颜色属性	开始颜色：飞线起点颜色。 结束颜色：飞线终点颜色。整体从起点颜色渐变到终点颜色。

动画设置

设置飞线的飞行速度。

数据配置

散点地图

组件数据格式-散点

字段	说明
lng	是 Longitude 的简写，表示经度。
lat	是 Latitude 的简写，表示纬度。
type	类型。
value	值。

样例数据

[
  {
    "value": 77,
    "type": "类型3",
    "lng": 109.883809,
    "lat": 29.08545
  },
  {
    "value": 42,
    "type": "类型1",
    "lng": 105.134251,
    "lat": 30.452189
  },
  {
    "value": 16,
    "type": "类型7",
    "lng": 104.923959,
    "lat": 26.052122
  }
]

飞线地图

组件数据格式-飞线

字段	说明
fromLng	起点经度。
fromLat	起点纬度。
toLng	终点经度。
toLat	终点纬度。
type	类型。

样例数据

[
 {
    "type": "流出",
    "fromLng": 116.419371,
    "fromLat": 39.91347,
    "toLng": 86.095104,
    "toLat": 39.81725
  },
  {
    "type": "流出",
    "fromLng": 116.419371,
    "fromLat": 39.91347,
    "toLng": 85.153658,
    "toLat": 33.864962
  },
  {
    "type": "流出",
    "fromLng": 116.419371,
    "fromLat": 39.91347,
    "toLng": 121.856834,
    "toLat": 39.22046
  }
]

数据配置项说明

配置项	说明
数据对接方式	选择数据源类型。
定时刷新	设置数据请求时间间隔。