# 高德地图 高德地图是地图组件的一种，支持底图、样式、2D、3D模式、图标和飞线等动态配置，用于满足用户在GIS或IOC等场景对地图的要求。 在大屏设计页面，从"地图"中，拖拽"高德地图"组件至画布空白区域，如[图1]。 图1高德地图 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158424673.png "点击放大") 图2边距样式说明 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123184108.png) #### 卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。 图3高德地图卡片 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123026536.png "点击放大") - 背景 - 背景色：设置组件卡片的背景颜色。 - 边框：组件卡片边框设置，支持无边框、全边框和角边框三种样式。设置为全边框和角边框时，支持设置组件外圈边框的线型、圆角等。 - 样式：选择图片时，图片显示的样式，支持普通、居中、拉伸和平铺四种样式。 - 选择图片：使用本地的图片作为组件背景，支持新增目录和子目录，便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片，且每张图片不能超过50MB。 - 特效：组件是否高亮显示，支持默认展示和跳转到页面时展示。 - 边距：组件中图表距离整个组件四边（上、下、左、右，如[图2]）的距离，默认为0，即铺满整个组件。 - 布局模板 \> 地图样式：在下拉框中选择地图的样式，如"控件+标签图层"、默认样式、"地图行政区+图标图层"等。 #### 配置 在配置中，设置地图组件的基本信息、地图样式、地图控件和地图控制等。 图4高德地图配置 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123184604.png "点击放大") - 地图基本配置 - 地图密钥：输入地图的服务密钥，请参考[高德开放平台](https://lbs.amap.com/api/webservice/guide/create-project/get-key)中操作自行到官网申请。 - 安全密钥：如果您的地图密钥是在2021年12月02日以后申请的key，需要配合安全密钥一起使用。如何使用安全密钥，请参见[JS API 安全密钥使用](https://developer.amap.com/api/javascript-api-v2/guide/abc/jscode)。 - 地图中心：设置地图中心的设置类型，支持自定义和行政区。 - 行政区编码：设置行政区或行政区对应的编码，如何下载行政区编码，请参见[Web服务 API 相关下载](https://lbs.amap.com/api/webservice/download)。"地图中心"设置为"行政区"时，才显示该配置。 - 地图中心经度：设置地图中心点的经度。"地图中心"设置为"自定义"时，才显示该配置。 - 地图中心纬度：设置地图的中心点的纬度。"地图中心"设置为"自定义"时，才显示该配置。 - 缩放级别：设置地图的缩放层级。"地图中心"设置为"自定义"时，才显示该配置。 - 缩放范围：设置地图可以缩放的范围，取值范围为2\~26。 - 视角放大：是否视角放大，地图范围会放大一倍，仅用于静态展示。 - POI显示：是否开启POI显示，关闭后不会显示全部地图文字和POI信息。 - 地图样式 - 底图样式：设置底图的样式类型，支持标准地图和卫星图。 - 显示要素：设置地图显示的元素，支持区域面、道路、建筑物和标注。当"底图样式"设置为"标准地图"时，才显示该配置项。 - 显示路网：是否显示路网，当"底图样式"设置为"卫星图"时，才显示该配置项。 - 实时路况：是否显示实时路况。 - 视图模式：设置地图的视图模式，支持2D平面图和3D平面图。 - 俯仰角度：设置地图的初始化俯仰角度。"视图模式"设置为"3D平面图"时，才显示该配置项。 - 地图样式：设置地图样式模板，支持标准模板和自定义模板。 - 标准模板：设置地图标准的样式模板，可选择高德地图支持的11种模板，即标准、幻影黑、月光银、远山黛、草色青、雅士灰、涂鸦、马卡龙、靛青蓝、极夜紫和酱籽。 - 自定义地图：根据实际需求自定义地图。 如何自定义地图，请参见[自定义地图](https://lbs.amap.com/api/javascript-api-v2/guide/map/map-style)。 - 区域掩模 - 区域掩模：是否显示区域内的掩模。开启后，只显示区域内的图层和覆盖物。 - 掩模边界：掩模边界信息的获取方式，支持直接设置行政区和geojson两种方式。 - 行政区编码：设置行政区或行政区对应的编码，如何下载行政区编码，请参见[Web服务 API 相关下载](https://lbs.amap.com/api/webservice/download)。"掩模边界"设置为"行政区"时，才显示该配置项。 - 选择数据：通过上传geojson来设置掩模的边界信息。"掩模边界"设置为"geojson"时，才显示该配置项。 - 掩模边框：设置掩模边框的颜色和大小。 - 地图行政区 - 行政区：是否高亮显示行政区。 - 行政区范围：设置行政区范围的获取方式，支持直接设置行政区和geojson两种方式。 - 行政区编码：设置行政区或行政区对应的编码，如何下载行政区编码，请参见[Web服务 API 相关下载](https://lbs.amap.com/api/webservice/download)。"行政区范围"设置为"行政区"时，才显示该配置项。 - 选择层级：设置高亮行政区的下钻范围，支持显示省级、显示市级和显示区级。选择的层级必须低于设置的行政区，例如，行政区编码设置为A市，选择层级只能设置为市级或者区级才会有效。"行政区范围"设置为"行政区"时，才显示该配置项。 - 选择数据：通过上传geojson，来设置行政区范围。"行政区范围"设置为"geojson"时，才显示该配置项。 - 层级颜色：设置高亮行政区的颜色。 - 行政区边框：设置高亮行政区的边框颜色。 - 地图控件 - 缩放：开启后，地图右下角会添加缩放控件。 图5开启缩放效果 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123184584.png "点击放大") - 旋转：开启后，地图右上角会添加旋转控件。 图6开启旋转效果 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123184676.png "点击放大") - 比例尺：开启后，地图左下角会添加比例尺控件。 图7开启比例尺效果 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123184680.png "点击放大") - 地图控制 - 拖拽：设置地图是否支持拖拽。 - 缩放：设置地图是否支持缩放。 - 双击放大：设置地图是否支持双击放大。"缩放"设置为"开启"时，才显示该配置项。 - 旋转：设置地图是否支持旋转。 #### 图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图8高德地图图形 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158306245.png "点击放大") - 统一配置 - 显示范围：统一设置图层的显示范围，地图缩放级别在该范围内时，显示对应图层。 - 图层透明度：统一设置图层的透明度。 - 图层：单击"新增图层"，可新建图标图层、标签图层、柱状图层、飞线图层、基础热力图层和区域热力图层。 图9新建图标图层 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123184580.png "点击放大") - 基本配置 - 类型：固定为"图标图层"。 - 图层：显示或隐藏图层。 - 显示范围：设置图层的显示范围，地图缩放级别在该范围内时，显示对应图层。 - 图层透明度：设置图层的透明度。 - 标签避让：开启后，地图中重叠的图标会避让。 - 图层样式 - 显示类型：设置图标的显示类型，支持均分显示和区间显示。 - 图标图片："显示类型"设置为"均分显示"时，会根据图标图片的数量，将图标值从最小值到最大值的范围进行均分，落在不同范围的值，将显示对应的图标。"显示类型"设置为"区间显示"时，可设置不同的区间，当图标值落在对应的区间内，显示对应的颜色值，区域范围外的图标将不显示。 - 悬浮放大：是否开启鼠标悬浮后图标放大。悬浮方法和标签避让同时开启会影响显示效果。 - 图片宽度：设置图片的宽度。 - 图片高度：设置图片的高度。 - 上下偏移：设置图标根据点经纬度的上下偏移。 - 左右偏移：设置图标根据点经纬度的左右偏移。 - 图层标签 - 标签：是否开启图标标签。 - 标签悬浮：开启时，图标鼠标悬浮时显示标签。关闭时，标签常显。 - 系列名：标签是否显示系列名，对应静态数据中的"label"字段。 - 系列名字体：设置系列名的字体、大小和颜色等。"标签悬浮"设置为"开启"时，显示该配置项。 - 数值：标签是否显示数值，对应静态数据中的"value"字段。 - 数值字体：设置数值字体。"标签悬浮"设置为"开启"时，显示该配置项。 - 文字大小：设置常显标签的文字大小。"标签悬浮"设置为"关闭"时，显示该配置项。 - 文字颜色：设置常显标签的文字颜色。"标签悬浮"设置为"关闭"时，显示该配置项。 - 数值显示：是否显示最大值、最小值。选中后，对应最大值最小值的标签背景色、字体颜色将会发生变化。 图10新建标签图层 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123026500.png "点击放大") - 基本配置 - 类型：固定为"标签图层"。 - 图层：显示或隐藏图层。 - 显示范围：设置图层的显示范围，地图缩放级别在该范围内时，显示对应图层。 - 图层透明度：设置图层的透明度。 - 标签样式 - 最大宽度：设置标签的最大宽度。 - 溢出文本：设置文本溢出时的显示方式，支持省略和换行。 - 文字对齐方式：设置文本对齐方式，支持左对齐、居中和右对齐。 - 系列名：标签是否显示系列名，对应静态数据中的"label"字段。 - 系列名字体：设置系列名的字体、大小和颜色等。 - 数值：标签是否显示数值，对应静态数据中的"value"字段。 - 数值字体：设置数值的字体、大小和颜色等。 - 背景样式：设置标签的背景样式，支持颜色和图片。 - 显示类型：设置标签背景的显示类型，支持均分显示和区间显示。 - 颜色设置："显示类型"设置为"均分显示"时，会根据颜色设置的数量，将标签值从最小值到最大值的范围进行均分，落在不同范围的值，将显示对应的背景颜色。"显示类型"设置为"区间显示"时，可设置不同的区间，当标签值落在对应的区间内，显示对应的背景颜色，区域范围外的图标将不显示。 - 填充方式：图标的填充方式，支持普通、居中、拉伸和平铺。"背景样式"设置为"图片"时，显示该配置项。 - 背景图片："显示类型"设置为"均分显示"时，会根据背景颜色的数量，将标签值从最小值到最大值的范围进行均分，落在不同范围的值，将显示对应的背景图片。"显示类型"设置为"区间显示"时，可设置不同的区间，当标签值落在对应的区间内，显示对应的背景图片，区域范围外的图标将不显示。 - 选中色：设置标签鼠标悬浮时的字体颜色，同时也是交互动作中，高亮标签的颜色。 - 上下偏移：设置标签根据点经纬度的上下偏移。 - 左右偏移：设置标签根据点经纬度的左右偏移。 - 标签图标 - 标签图标：是否显示标签图标。 - 显示类型： 标签图标的显示类型，支持均分显示和区间显示。 - 填充方式：图标的填充方式，支持普通、居中、拉伸和平铺。 - 图标图片："显示类型"设置为"均分显示"时，会根据图标图片的数量，会将标签值从最小值到最大值的范围进行均分，落在不同范围的值，将显示对应的图标。"显示类型"设置为"区间显示"时，可设置不同的区间，当标签值落在对应的区间内，显示对应的图标，区域范围外的图标将不显示。 - 图片宽度：设置图片的宽度。 - 图片高度：设置图片的高度。 - 上下偏移：设置图标根据点经纬度的上下偏移。 - 左右偏移：设置图标根据点经纬度的左右偏移。 图11新建柱状图层 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158306253.png "点击放大") - 基本配置 - 类型：固定为"柱状图层"。 - 图层：显示或隐藏图层。 - 显示范围：设置图层的显示范围，地图缩放级别在该范围内时，显示对应图层。 - 图层透明度：设置图层的透明度。 - 图层样式 - 显示类型：设置图标的显示类型，支持均分显示和区间显示。 - 颜色设置：根据颜色设置的数量，会将值从最小值到最大值的范围进行均分，落在不同范围的值，将显示对应的颜色。"显示类型"设置为"均分显示"时，才显示该配置项。 - 填充颜色：根据设置不同的区间，当值落在对应的区间内，显示对应的颜色值，区域范围外的将不显示。"显示类型"设置为"区间显示"时，才显示该配置项。 - 选中色：设置鼠标悬浮和单击颜色，同时也是交互动作中，高亮柱体的颜色。 - 边数：柱状图的边数，边数越多越接近圆柱形。如果希望做成圆柱体效果，可以将此参数设置为一个较大的值，例如32。 - 单位：图层的单位，支持像素和米。 - 半径：棱柱的半径。 - 高度范围：棱柱的高度。 - 图层标签 - 标签：是否开启图标标签。 - 标签悬浮：开启时，图标鼠标悬浮时显示标签。关闭时，标签常显。 - 系列名：标签是否显示系列名，对应静态数据中的"label"字段。 - 系列名字体：设置系列名的字体、大小和颜色等。"标签悬浮"设置为"开启"时，显示该配置项。 - 数值：标签是否显示数值，对应静态数据中的"value"字段。 - 数值字体：设置数值的字体、大小和颜色。"标签悬浮"设置为"开启"时，显示该配置项。 - 数值显示：是否显示最大值、最小值。选中后，对应最大值最小值的标签背景色、字体颜色将会发生变化。 图12新建飞线图层 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158424681.png "点击放大") - 基本配置 - 类型：固定为"飞线图层"。 - 图层：显示或隐藏图层。 - 显示范围：设置图层的显示范围，地图缩放级别在该范围内时，显示对应图层。 - 图层透明度：设置图层的透明度。 - 图层样式 - 颜色样式：设置飞线的颜色样式，支持单色和渐变色。 - 显示类型：设置飞线颜色的显示类型，支持均分显示和区间显示。 - 颜色设置：根据颜色设置的数量，会将飞线值从最小值到最大值的范围进行均分，落在不同范围的值，将显示对应的颜色。"显示类型"设置为"均分显示"时，才显示该配置项。 - 填充颜色：根据设置不同的区间，当飞线值落在对应的区间内，显示对应的颜色值。区域范围外的飞线将不显示。"显示类型"设置为"区间显示"时，才显示该配置项。 - 选中色：设置飞线鼠标悬浮颜色，同时也是交互动作中，高亮飞线的颜色。 - 飞线弧度：设置飞线的弧度，只在3D模式下生效。 - 弧顶位置：设置弧顶位置，代表距离起点的哪个位置是弧顶最高点。 - 起点宽度：设置飞线的起点宽度。 - 终点宽度：设置飞线的终点宽度。 - 动画效果 - 脉冲效果：是否开启飞线的脉冲效果。 - 脉冲点长度：设置脉冲长度，开启脉冲效果后显示该配置项。 - 脉冲点速度：设置脉冲速度，开启脉冲效果后显示该配置项。 - 头部颜色：设置脉冲的头部颜色，开启脉冲效果后显示该配置项。 - 尾部颜色：设置脉冲的尾部颜色，开启脉冲效果后显示该配置项。 - 气泡效果：是否开启飞线终点的气泡效果。 - 气泡样式：设置气泡的颜色，支持蓝色、黄色、绿色、红色，开启气泡效果后显示该配置项。 - 气泡半径：设置气泡的半径，开启气泡效果后显示该配置项。 - 动画速度：设置气泡的动画速度，开启气泡效果后显示该配置项。 - 图层标签 - 标签悬浮：飞线鼠标悬浮时，是否显示标签。 - 系列名：标签是否显示系列名。 - 系列名内容：请输入系列名内容。 - 系列名字体：设置系列名的字体、颜色和大小等。 - 数值：标签是否显示数值，对应静态数据中的"value"字段。 - 数值字体：设置数值的字体、颜色和大小等。 - 数值显示：是否显示最大值、最小值。选中后，对应最大值最小值的标签背景色、字体颜色将会发生变化。 图13新建基础热力图层 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123184596.png "点击放大") - 基本配置 - 类型：固定为"基础热力图层"。 - 图层：显示或隐藏图层。 - 显示范围：设置图层的显示范围，地图缩放级别在该范围内时，显示对应图层。 - 图层透明度：设置图层的透明度。 - 图层样式 - 颜色设置：设置图层的颜色，单击"新增颜色设置"，可添加新的颜色。 - 最大值：热力值的最大值，默认为数据中的最大值，也可以自定义设置，会控制热力的最热区域的显示效果。 - 最小值：热力值的最小值，默认为数据中的最小值，也可以自定义设置，会控制热力的最冷区域的显示效果。 - 单位：热力的单位，支持"像素"单位和"米"单位的热力聚合。 - 半径：设置热力的聚合半径。 图14设置半径 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123184612.png "点击放大") - 高度：设置热力最高点的高度值。 图15设置高度 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123184600.png "点击放大") 图16新建区域热力图层 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123184672.png "点击放大") - 基本配置 - 类型：固定为"区域热力图层"。 - 图层：显示或隐藏图层。 - 显示范围：设置图层的显示范围，地图缩放级别在该范围内时，显示对应图层。 - 图层透明度：设置图层的透明度。 - 图层样式 - 显示类型：设置图标的显示类型，支持均分显示和区间显示。 - 颜色设置：根据颜色设置的数量，会将值从最小值到最大值的范围进行均分，落在不同范围的值，将显示对应的颜色。"显示类型"设置为"均分显示"时，才显示该配置项。 - 填充颜色：根据设置不同的区间，当值落在对应的区间内，显示对应的颜色值，区域范围外的将不显示。"显示类型"设置为"区间显示"时，才显示该配置项。 - 选中色：设置鼠标单击和悬浮颜色，同时也是交互动作中，高亮区域的颜色。 - 区域边框：设置行政边界的颜色和边框大小。 - 图层标签 - 标签：是否开启图标标签。 - 标签悬浮：开启时，图标鼠标悬浮时显示标签。关闭时，标签常显。 - 系列名：标签是否显示系列名，对应静态数据中的"label"字段。 - 系列名字体：设置系列名的字体、大小和颜色等。"标签悬浮"设置为"开启"时，显示该配置项。 - 数值：标签是否显示数值，对应静态数据中的"value"字段。 - 数值字体：设置数值的字体、大小和颜色等。"标签悬浮"设置为"开启"时，显示该配置项。 - 数值显示：是否显示最大值、最小值。选中后，对应最大值最小值的标签背景色、字体颜色将会发生变化。 #### 镜头编辑 在弹窗上拖拽、缩放、旋转 (仅3D视图) 到期望位置后保存，组件的相应配置项会跟随更改。 #### 数据 在数据中，设置高德地图组件的数据来源，更多介绍请参见[数据接入](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6143.html)。**新增图层后，才会显示数据配置项。** 图17配置高德地图组件数据 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158306261.png "点击放大") #### 交互 在交互中，配置高德地图与其他组件或页面之间的交互能力。更多交互介绍，请参见[交互设置](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6140.html)。