高德地图v1.8.7

文档基于高德地图v1.8.7版本

组件说明

该组件主要以高德地图服务为依托对相对精细的地理位置信息进行展示，如精细到区域、街道或楼栋级别的点标记、热力分布等地理信息的呈现。

效果案例

*高德地图效果配置示例

组件结构

高德地图组件主要由「父组件」及「子组件」两部分组成，可根据实际场景分别定义对应配置项。

*组件结构说明

模块	说明
父组件	高德地图底座部分，支持对地图底座样式、中心点位、俯仰角度、地图信息显隐进行配置
子组件	地图内点、热力、线等数据叠加，可单独定义样式风格及相关数据

一、父组件配置

子组件管理

组件创建之初，系统会默认携带常用子组件，使用者可根据实际场景对子组件进行新增或编辑。

支持对已添加子组件进行隐藏、重命名、复制、删除操作。

*子组件管理

样式

1、基本属性

位置尺寸：

位置包括组件的横坐标和纵坐标，单位为px；横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。

尺寸包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。

*组件位置尺寸说明

默认隐藏：

控制组件在页面中隐藏，在预览和发布页面中不显示该组件，通常配合交互事件使用该配置项。

2、展示模式

基础配置

Key、地图样式ID，由高德控制台获取，使用者可通过高德控制台对地图底座风格样式进行编辑，定义好获取对应的Key及ID键入至此处即可。

获取自定义地图样式及Key请您查看👇

高德地图更改地图样式

3、地图设置

文字、道路、建筑、标识、路况，可根据实际需求选择性开启。

4、相机设置

经度、维度，即默认中线点位的位置。

初始化缩放，即初次加载地图当前的缩放等级（0~17级）。

支持切换至3D模式，3D模式下，可定义天空色彩、俯仰角度，也可选择开启自动旋转配置。

数据

高德地图父组件数据相对固定，系统默认对全球范围数据进行预置，故此处一般场景下无需进行编辑操作。

交互

载入动画

所有组件均提供移入、移入(小)、划变三种组件载入动画。

载入动画选择无时，则组件没有载入动画。

载入动画仅在可视化应用预览、发布组件加载时显示。

载入动画配置项：

配置项	说明
渐隐渐显	启用后载入动画增加渐隐渐显过渡
速率	匀速、慢快慢(cubic-bezier(0.25,0.1,0.25,1))、低速开始、低速结束、低速开始和结束(cubic-bezier(0.42,0,0.58,1))
方向	动画方向
持续时间	载入动画持续时间，单位为ms
延时	载入动画延时长，单位为ms

自定义事件

自定义事件为「交互事件」的增强模块，支持通过数据驱动组件状态、或变更组件样式配置，也可自定义编辑复杂的条件逻辑；

详细的自定义事件教学👉自定义事件教学

二、子组件配置

1、点标记

主要用于做点位分布密度的标识。

样式配置

显示范围：

字段	说明
最大	即最大显示在x层级地图范围内，如地图缩放到街道级别仍需显示点标记，则层级放大到16级以上，最大值为20
最小	即最小显示在x层级地图范围内，最小值为0

支持开启自动轮播（可配合回调ID使用，轮播切换相关数据）。

支持自定义上传标识图标，且支持自定义编辑图标颜色、大小、透明度。

数据

根据真实地理经纬度数据驱动。

字段	说明
lng	经度
lat	纬度
id	标牌序号
name	自定义名称字段
rotation	旋转角度

*组件数据格式说明

数据样例

[
	{
		"lng": 116.3,
		"lat": 39.9,
		"id": 1,
		"name": "text1",
		"rotation": 316
	}，
	{
		"lng": 120,
		"lat": 30,
		"id": 6,
		"name": "text6",
		"rotation": 201
	},
	{
		"lng": 72.85,
		"lat": 18.9,
		"id": 7,
		"name": "text7",
		"rotation": 120
	}
]

交互

轮播回调，可将数据内id或name字段定义为回调字段，对其他组件数据进行切换（用法同平台常规回调一致，详细可参见交互数据联动）。

旋转回调，可将对应点位或所有点位的x\y坐标回调出去，目标组件可选择性接收。

点击回调，支持定义回调id，当鼠标点击时，传递出所点击标记的值。

交互事件及自定义事件用法与其他常规组件一致。

2、地图中心行为

主要用于标记特殊场景下地图层级及中心点位位置。

样式配置

可选择性默认启动。

默认的缩放等级，当数据内有层级指示时，以数据内zoom字段值为优先，当数据内无该字段值时，此处样式内填写值大于0时，以此处为准进行驱动，此处小于0时，以父组件配置为准。

支持自定义中心点位标记，可自行上传表示icon。

数据

根据真实地理经纬度数据驱动。

字段	说明
lng	经度
lat	纬度
zoom	缩放等级

*组件数据格式说明

数据样例

[
	{
		"lng": 116.3,
		"lat": 39.9,
    "zoom": "10"
	}
]

3、热力图

主要用户点位聚合热力分布情况。

样式配置

支持自定义热力图的渲染层级。

支持自定义设置点位的热力颜色半径。

支持自定义最小及最大值所对应的透明度。

支持自定义热力图在地图上显示的缩放层级范围。

热力图层次的颜色区间色值及透明度。

数据

根据真实地理经纬度数据驱动。

字段	说明
lng	经度
lat	纬度
count	数值大小

*组件数据格式说明

数据样例

[
	{
		"lng": 116.191031,
		"lat": 39.988585,
		"count": 10
	},
	{
		"lng": 116.389275,
		"lat": 39.925818,
		"count": 11
	},
	{
		"lng": 116.287444,
		"lat": 39.810742,
		"count": 12
	}
]

4、路线高亮

主要用于地图上路线的展示。

样式配置

可选择使用随机颜色分布，当数据源内id为类时，线条颜色也会随机进行分配。

支持自定义路线的宽度、颜色、透明度，也可根据实际需求设置线条的描边样式。

大地线指地球椭球体面上的两点间的最短程曲线。

数据

根据真实地理经纬度数据驱动，提示：路线由以上经纬度点位，根据数据返回的先后顺序进行拼接。

字段	说明
lng	经度
lat	纬度
id	用于区分路线的id编号，不同id代表不同路线（提示：也可通过创建多个「路线高亮」子组件，分别填入不同路线的经纬度数据，来实现不同路线的场景）

*组件数据格式说明

数据样例

此处样例即通过 id字段的值（1和2）绘制两条不同的线段。

[
	{
		"id": 1,
		"lng": 116.3892245293,
		"lat": 39.9073496033
	},
	{
		"id": 1,
		"lng": 116.4033651352,
		"lat": 39.9077446377
	},
	{
		"id": 2,
		"lng": 116.4030432701,
		"lat": 39.9151181943
	},
	{
		"id": 2,
		"lng": 116.4025712013,
		"lat": 39.9234454086
	},
	{
		"id": 2,
		"lng": 116.4038157463,
		"lat": 39.9241530106
	},
	{
		"id": 2,
		"lng": 116.4063262939,
		"lat": 39.9242682009
	},
	{
		"id": 2,
		"lng": 116.4066696167,
		"lat": 39.9078927749
	}
]

*多线条示例

5、飞线

主要用于标识展示两地间数据往来、交互。

样式配置

支持定义渲染层级、显示范围大小。

支持定义飞线粗细、长度、宽度、飞线速度及飞线颜色（支持渐变色）。

数据

根据真实地理经纬度数据驱动。

字段	说明
start	起点经纬度
end	终点经纬度

*组件数据格式说明

数据样例

[
	{
		"start": {
			"lng": 121.499666,
			"lat": 31.239948
		},
		"end": {
			"lng": 121.490281,
			"lat": 31.238995
		}
	},
	{
		"start": {
			"lng": 121.499666,
			"lat": 31.239948
		},
		"end": {
			"lng": 121.491414,
			"lat": 31.242292
		}
	}
]

6、点聚合

点聚合子组件通过将同类散点聚合的方式综合显示数据，主要解决地图中点要素很多时候的表示困难的问题。点聚合可以用少量的点或图标来表示地图中的所有点，让地图显示更清晰明朗。

样式配置

层级

当地图中有很多子组件产生叠加时，层级越高则在上层显示，该数字没有明确数字，与其他子组件有对比即可。

聚合配置：

网格大小

聚合计算时网格的像素大小。

聚合级别

最大的聚合级别，大于该级别则不进行相应的聚合。

聚合下限

聚合的最小数量，默认值为2，即小于2个点则不能成为一个聚合。

集群图标

即将点聚合后的图标，可配置图标宽度、高度、及标签值文字大小、字体偏移、文字颜色。

单个图标

即单个点图标，可配置图标宽度、高度。

选中图标

即选中某个点后图标状态，可配置图标宽度、高度。

数据

点聚合仍然以真实地理位置信息为数据基础。

字段	说明
lng	经度
lat	纬度
id	聚合点id，需保持唯一性
name	聚合点显示名称

数据样例

[

  {
		"lng": 5.3395270612031265,
		"lat": 72.63863669541959,
		"id": 0,
		"name": "random_0"
	},
	{
		"lng": 11.834280342660154,
		"lat": 90.24710586180055,
		"id": 1,
		"name": "random_1"
	},
	{
		"lng": 121.75343314901733,
		"lat": 55.58012118927646,
		"id": 2,
		"name": "random_2"
	},
	{
		"lng": 22.775811741944946,
		"lat": 155.80346415686427,
		"id": 3,
		"name": "random_3"
	},
	{
		"lng": 30.301019085851166,
		"lat": 130.5397076192551,
		"id": 4,
		"name": "random_4"
	},
	{
		"lng": 120.27132995109947,
		"lat": 112.62549943111856,
		"id": 5,
		"name": "random_5"
	},
	{
		"lng": 163.87670267129275,
		"lat": 157.2985036193635,
		"id": 6,
		"name": "random_6"
	},
	{
		"lng": 46.31860540710653,
		"lat": 131.4194686217448,
		"id": 7,
		"name": "random_7"
	},
	{
		"lng": 153.59736723201758,
		"lat": 38.22281611179926,
		"id": 8,
		"name": "random_8"
	},
	{
		"lng": 172.98274259558366,
		"lat": 20.810784807291995,
		"id": 9,
		"name": "random_9"
	}

]

交互

单点回调

固定传出值：当点击某一点时默认会发送该点所有数据，如只需要传递某一字段数据，例如需要传递id字段，则填写"id"字段。

点击marker：默认传出点击点数据：{x,y,lng,lat,id,name}，默认发送的回调字段名称即clickMarker。

综上即点击某一点后会将该点"id"字段以"clickMarker"字段发送。

聚合回调

默认传出点击点集群数据：{x,y,lng,lat,id,name}，聚合回调即将“样式配置中”配置的“网格大小”中聚合的点数据进行聚合后发送回调，默认为"clickCluster"变量名。

交互事件&自定义事件

自定义事件为「交互事件」的增强模块，支持通过数据驱动组件状态、或变更组件样式配置，也可自定义编辑复杂的条件逻辑。

详细的自定义事件教学👉自定义事件教学

7、多边形组

主要用于地图上区块面的展示。

样式配置

支持定义区域面显示的最大、最小地图层级。

区域配置，支持自定义上传所对应的区域GeoJSON数据，可编辑对边框、面、文本的颜色、字号、透明度。

数据

数据有样式处自定义上传区域GeoJSON，数据源处一般场景下无需进行编辑操作。

8、id标记

id标记可以对地图上某一点进行标记。

全局

层级

标记点所在层级，数值越高显示等级越高。

显示范围

在放大或缩小地图时其实也是在切换地图中“地理范围”层级，在此可设置显示的层级范围

图标配置

图片	id标记点图片样式。
宽	id标记点图片宽度。
高	id标记点图片高度。
中心X	id标记点图片中心点X值。
中心Y	id标记点图片中心点Y值。
旋转	id标记点图片旋转角度。

图标

在图标中可以针对不同类型设置不同的图标样式，点击添加一个新的类型图标。

过滤值	不同类型过滤值。
图片	id标记点图片样式。
宽	id标记点图片宽度。
高	id标记点图片高度。
中心X	id标记点图片中心点X值。
中心Y	id标记点图片中心点Y值。
旋转	id标记点图片旋转角度。

数据

字段	说明
lng	经度
lat	纬度
type	类型
id	ID，必须保持唯一性

数据样例

[
	{
		"lng": 116.3,
		"lat": 39.9,
		"type": 1,
		"id": 0
	},
	{
		"lng": 121.48,
		"lat": 31.22,
		"type": 2,
		"id": 1
	},
	{
		"lng": 140,
		"lat": 35,
		"type": 3,
		"id": 2
	},
	{
		"lng": 151.12,
		"lat": -33.77,
		"type": 4,
		"id": 3
	},
	{
		"lng": 114.05,
		"lat": 22.55,
		"type": 5,
		"id": 4
	},
	{
		"lng": 120,
		"lat": 30,
		"type": 6,
		"id": 5
	},
	{
		"lng": 72.85,
		"lat": 18.9,
		"type": 7,
		"id": 6
	}
]

9、多边形组2

主要用于地图上区块面的展示。

样式配置

支持定义区域面显示的最大、最小地图层级。

默认样式

配色字段，从数据中读取该多边形的配色字段，并根据该字段值去区域配置中匹配对应的颜色。

文本字段，读取文字字段，并进行对应展示。

区域配置，支持自定义上传所对应的区域GeoJSON数据，可编辑对边框、面、文本的颜色、字号、透明度。

选中样式

可以设置选中多边形组的填充、边框、文字色彩样式以及透明度。

自动轮播

可选择是否开启自动轮播，可设置自动轮播的间隔时间，定义自动重启的重启时间（点击后暂停自动轮播）。

数据

字段	说明
source	可以是url也可以是geojson

数据样例

[
	{
		"source": "https://easyv-develop.oss-cn-hangzhou.aliyuncs.com/components/static-image/aMapComponent/polygon_0.json"
	},
	{
		"source": {
			"type": "FeatureCollection",
			"features": [
				{
					"type": "Feature",
					"properties": {
						"value": 25,
						"name": "polygon_3"
					},
					"geometry": {
						"type": "Polygon",
						"coordinates": [
							[
								[
									116.39420270919798,
									39.91208163596137
								],
								[
									116.3977324962616,
									39.910838994683154
								],
								[
									116.39842987060545,
									39.9125753944492
								],
								[
									116.39624118804932,
									39.91323373356285
								],
								[
									116.39433145523071,
									39.9129127940354
								],
								[
									116.39420270919798,
									39.91208163596137
								]
							]
						]
					}
				},
				{
					"type": "Feature",
					"properties": {
						"value": 35,
						"name": "polygon_4"
					},
					"geometry": {
						"type": "Polygon",
						"coordinates": [
							[
								[
									116.39907360076903,
									39.91337362980931
								],
								[
									116.39907360076903,
									39.91095420740544
								],
								[
									116.40237808227538,
									39.91088837158785
								],
								[
									116.4014446735382,
									39.91211455330463
								],
								[
									116.39999628067015,
									39.91148912107766
								],
								[
									116.39907360076903,
									39.91337362980931
								]
							]
						]
					}
				}
			]
		}
	}
]

10、提示

主要用于提示各区域字段信息。

样式配置

框

配置项	说明
方位	提示框位于坐标点的原点方位
宽度、高度	支持编辑提示框的整体宽度、高度
背景	支持自定义上传提示框背景图表

留白

配置项	说明
上、右、下、左	支持定义上下左右内部边距，设定后即给内部文本规范展示空间

偏移

配置项	说明
X、Y	支持定义提示框所在位置的x、y偏移量

行内容，可根据数据返回内容，选择性绑定显示至地图提示框内容。

配置项	说明
字段名	数据源内容需要显示在提示框内的字段，可在此处进行映射绑定
显示名	即实际需要显示在地图上的字段名称
排列、对齐方式	根据展示需求定义排版方式
单位	所需显示的单位后缀
位置	所需显示的x、y具体坐标
尺寸	文本显示范围宽高
标签样式	字段名称的字体、字号、颜色
值样式	对应值的字体、字号、颜色

数据

根据真实地理经纬度数据驱动。

字段	说明
adcode	行政区域编码
lng	经度
lat	纬度
其他	可自行定义提示框内所需的字段（字段于行内容配置项处映射即可）

*组件数据格式说明

数据样例

[
	{
		"lat": "29.6441500000",
		"lng": "91.1145000000",
		"adcode": "540000",
		"title": "拉萨",
		"category": 111,
		"newCategory": 2773,
		"amount": 9877
	}
]

实操模板

链接点击链接查看和创建实操教程：高德地图点标记

adcode参考

提示：此处提供全国各城市、区域adcode编码，可下载获取。

📎AMap_adcode_citycode.xlsx

欢迎您在评论区留下您对该组件的意见，管理员会及时回复您，如长时间未回复欢迎您搜索钉钉群：33782396或者扫描以下二维码添加微信群 @谨禧说出您的想法，采纳后将送出定制礼品。

也可以通过问卷来向我们反馈需求：https://jinshuju.net/f/XyCXU0