# OpenLayers地图 OpenLayers地图是一个离线地图组件，可以基于OpenLayers添加各类图层。 在大屏设计页面，从"地图"中，拖拽"OpenLayers地图"组件至画布空白区域，如[图1]。 图1OpenLayers地图 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158426117.png "点击放大") 图2边距样式说明 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123184108.png) #### 卡片 卡片是指包裹图表组件的外层架构，可以理解为组件由卡片中基础元素（卡片标题、图表、卡片背景、卡片边框）和图表元素构成。 图3OpenLayers地图卡片 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158426141.png "点击放大") - 背景 - 背景色：设置组件卡片的背景颜色。 - 边框：组件卡片边框设置，支持无边框、全边框和角边框三种样式。设置为全边框和角边框时，支持设置组件外圈边框的线型、圆角等。 - 样式：选择图片时，图片显示的样式，支持普通、居中、拉伸和平铺四种样式。 - 选择图片：使用本地的图片作为组件背景，支持新增目录和子目录，便于对图片进行分类管理。推荐使用JPG、JPEG、PNG或GIF格式的图片，且每张图片不能超过50MB。 - 特效：组件是否高亮显示，支持默认展示和跳转到页面时展示。 - 边距：组件中图表距离整个组件四边（上、下、左、右，如[图2]）的距离，默认为0，即铺满整个组件。 #### 配置 在配置中，设置地图组件的基本信息、地图控件和地图控制，如是否显示比例尺、是否支持缩放、拖拽等。 图4OpenLayers地图配置 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002157683860.png "点击放大") - 地图基本配置 - 地图链接：输入地图的链接。 - 切片大小：设置地图瓦片（Tile）的尺寸。 - 坐标系投影方式：将地理坐标系转换为平面坐标系的过程和方法，直接在下拉框中选择或者手工输入。 - 范围：地图底图所覆盖的地理范围。 - 单位：根据选择的坐标系投影方式自动关联，不可配置。 - 地图中心经度：设置地图中心点的经度。 - 地图中心维度：设置地图中心点的维度。 - 缩放级别：设置地图的缩放级别，取值范围为2\~26。 - 缩放范围：设置地图可以缩放的范围，取值范围为2\~26。 - 地图控件 - 缩放：开启后，地图上会显示缩放控件。 - 比例尺：开启后，地图左下角会添加比例尺控件。 - 地图控制 - 拖拽：设置地图是否支持拖拽。 - 缩放：设置地图是否支持缩放。 - 双击放大：设置地图是否支持双击放大。"缩放"设置为"开启"时，才显示该配置项。 #### 图形 图形是指组件中，实现数据可视化的具体图形表达元素，例如饼图的扇区、柱状图的柱子、折线图的线条、拐点等。 图5OpenLayers地图图形 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158426113.png "点击放大") - 统一配置 - 显示范围：设置图层的显示范围，地图缩放级别在该范围内时，显示对应图层。 - 图层透明度：设置图层的透明度。 - 图层：单击"新增图层"，可新建图标图层、标签图层、飞线图层、基础热力图层、面图层和线图层。 图6新建图标图层 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002193092657.png "点击放大") - 基本配置 - 类型：固定为"图标图层"。 - 图层：显示或隐藏图层。 - 显示范围：设置图层的显示范围，地图缩放级别在该范围内时，显示对应图层。 - 图层透明度：设置图层的透明度。 - 图层样式 - 显示类型：设置图标的显示类型，支持均分显示和区间显示。 - 图标图片："显示类型"设置为"均分显示"时，会根据图标图片的数量，将图标值从最小值到最大值的范围进行均分，落在不同范围的值，将显示对应的图标。"显示类型"设置为"区间显示"时，可设置不同的区间，当图标值落在对应的区间内，显示对应的颜色值，区域范围外的图标将不显示。 - 图片宽度：设置图片的宽度。为空时，宽度按图片比例显示，宽高都为空时按图片原始大小显示。 - 图片高度：设置图片的高度。为空时，高度按图片比例显示，宽高都为空时按图片原始大小显示。 - 图片比例：设置图片的宽高比，即图片的宽度与高度的比值 - 上下偏移：设置图标根据点经纬度的上下偏移。 - 左右偏移：设置图标根据点经纬度的左右偏移。 - 图层标签 - 标签：是否开启图标标签。 - 标签悬浮：开启时，图标鼠标悬浮时显示标签。关闭时，标签常显。 - 系列名：标签是否显示系列名，对应静态数据中的"label"字段。 - 系列名字体：设置系列名的字体、大小和颜色等。"标签悬浮"设置为"开启"时，显示该配置项。 - 数值：标签是否显示数值，对应静态数据中的"value"字段。 - 数值字体：设置数值字体。"标签悬浮"设置为"开启"时，显示该配置项。 - 数值显示：是否显示最大值、最小值。选中后，对应最大值最小值的标签背景色、字体颜色将会发生变化。 图7新建标签图层 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002193208697.png "点击放大") - 基本配置 - 类型：固定为"标签图层"。 - 图层：显示或隐藏图层。 - 显示范围：设置图层的显示范围，地图缩放级别在该范围内时，显示对应图层。 - 图层透明度：设置图层的透明度。 - 标签样式 - 文本颜色：设置标签中文本的颜色。 - 系列名：标签是否显示系列名，对应静态数据中的"label"字段。 - 系列显示字符数：系列中显示的字符个数。例如，取值设置为"2"，则只会显示2个字符，多余的内容显示为"A省..."。 - 系列名字体：设置系列名的字体、大小和颜色等。 - 数值：标签是否显示数值，对应静态数据中的"value"字段。 - 数值显示字符数：数值中显示的字符个数。 - 数值字体：设置数值的字体、大小和颜色等。 - 显示类型：设置标签背景的显示类型，支持均分显示和区间显示。 - 颜色设置："显示类型"设置为"均分显示"时，会根据颜色设置的数量，将标签值从最小值到最大值的范围进行均分，落在不同范围的值，将显示对应的背景颜色。"显示类型"设置为"区间显示"时，可设置不同的区间，当标签值落在对应的区间内，显示对应的背景颜色，区域范围外的图标将不显示。 - 上下偏移：设置标签根据点经纬度的上下偏移。 - 左右偏移：设置标签根据点经纬度的左右偏移。 - 标签图标 - 标签图标：是否显示标签图标。 - 显示类型： 标签图标的显示类型，支持均分显示和区间显示。 - 图标图片："显示类型"设置为"均分显示"时，会根据图标图片的数量，会将标签值从最小值到最大值的范围进行均分，落在不同范围的值，将显示对应的图标。"显示类型"设置为"区间显示"时，可设置不同的区间，当标签值落在对应的区间内，显示对应的图标，区域范围外的图标将不显示。 - 图片宽度：设置图片的宽度。为空时宽度按图片比例显示，宽高都为空时按图片原始大小显示。 - 图片高度：设置图片的高度。为空时高度按图片比例显示，宽高都为空时按图片原始大小显示。 - 上下偏移：设置图标根据点经纬度的上下偏移。 - 左右偏移：设置图标根据点经纬度的左右偏移。 图8新建飞线图层 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002193436673.png "点击放大") - 基本配置 - 类型：固定为"飞线图层"。 - 图层：显示或隐藏图层。 - 显示范围：设置图层的显示范围，地图缩放级别在该范围内时，显示对应图层。 - 图层透明度：设置图层的透明度。 - 图层样式 - 显示类型：设置飞线颜色的显示类型，支持均分显示和区间显示。 - 颜色设置：根据颜色设置的数量，会将飞线值从最小值到最大值的范围进行均分，落在不同范围的值，将显示对应的颜色。"显示类型"设置为"均分显示"时，才显示该配置项。 - 填充颜色：根据设置不同的区间，当飞线值落在对应的区间内，显示对应的颜色值。区域范围外的飞线将不显示。"显示类型"设置为"区间显示"时，才显示该配置项。 - 选中色：选中图层时，图层显示的颜色。 - 宽度：设置飞线的起点宽度。 - 动画效果 - 脉冲效果：是否开启飞线的脉冲效果。 - 脉冲点长度：设置脉冲长度，开启脉冲效果后显示该配置项。 - 脉冲点速度：设置脉冲速度，开启脉冲效果后显示该配置项。 - 脉冲点颜色：设置脉冲点的颜色，开启脉冲效果后显示该配置项。 - 图层标签 - 标签悬浮：飞线鼠标悬浮时，是否显示标签。 - 系列名：标签是否显示系列名。 - 系列名内容：请输入系列名内容。 - 系列名字体：设置系列名的字体、颜色和大小等。 - 数值：标签是否显示数值，对应静态数据中的"value"字段。 - 数值字体：设置数值的字体、颜色和大小等。 - 数值显示：是否显示最大值、最小值。选中后，对应最大值最小值的标签背景色、字体颜色将会发生变化。 图9新建基础热力图层 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002193440609.png "点击放大") - 基本配置 - 类型：固定为"基础热力图层"。 - 图层：显示或隐藏图层。 - 显示范围：设置图层的显示范围，地图缩放级别在该范围内时，显示对应图层。 - 图层透明度：设置图层的透明度。 - 图层样式 - 颜色设置：设置图层的颜色，单击"新增颜色设置"，可添加新的颜色。 - 最大值：热力值的最大值，默认为数据中的最大值，也可以自定义设置，会控制热力的最热区域的显示效果。 - 最小值：热力值的最小值，默认为数据中的最小值，也可以自定义设置，会控制热力的最冷区域的显示效果。 - 半径：设置热力的聚合半径。 - 模糊半径：热力图在渲染过程中，用于控制热力图的模糊效果。 图10新建线图层 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158089040.png "点击放大") - 基本配置 - 类型：固定为"线图层"。 - 图层：显示或隐藏图层。 - 显示范围：设置图层的显示范围，地图缩放级别在该范围内时，显示对应图层。 - 图层透明度：设置图层的透明度。 - 图层样式 - 显示类型：设置图标的显示类型，支持"单色"和"分类显示"。 **"显示类型"设置为"分类显示"时，线颜色ID配置规则如下：** - **单线生效：直接配置对应线ID。** - **多条线生效：使用中文逗号"，"或英文逗号","，分隔对应线ID。** - **未设置线ID的线颜色默认走单色类型设置颜色。** - **如果某个线ID设置了多个颜色，最下面设置的颜色优先级最高。** - 线颜色：设置线的颜色。"显示类型"设置为"单色"时，才显示该配置项。 - 颜色设置：根据实际需求，设置线ID的颜色。"显示类型"设置为"分类显示"时，才显示该配置项。 - 线宽类型：设置线宽度的类型，支持统一宽度和分类宽度。 - 线宽度：指定图层中线条的宽度。"线宽类型"设置为"统一宽度"时，才会显示该参数。 - 线宽：根据自身需求，设置分别设置线的宽度。"线宽类型"设置为"分类宽度"时，才会显示该参数。 - 线样式：设置线条的样式，支持实线、长虚线、短虚线和点线。 - 图层标签 - 标签悬浮：开启时，鼠标悬浮在图层上时会显示标签。 - 标签字体：设置标签的字体、大小和颜色等。 图11新建面图层 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158095414.png "点击放大") - 基本配置 - 类型：固定为"面图层"。 - 图层：显示或隐藏图层。 - 显示范围：设置图层的显示范围，地图缩放级别在该范围内时，显示对应图层。 - 图层透明度：设置图层的透明度。 - 图层样式 - 显示类型：设置图标的显示类型，支持"单色"和"分类显示"。 - 面颜色：设置图层中面的颜色。"显示类型"设置为"单色"时，才显示该配置项。 - 选中色：选中图层中面时，面显示的颜色。 - 边框：是否显示图层中面的边框。 - 边框样式：设置边框的样式，如虚线、实线。"边框"设置为"开启"时，才显示该配置项。 - 虚线参数：设置虚线的参数，格式为\[实线长度, 虚线长度\]或者\[实线长度, 虚线长度, 实线长度, 虚线长度\]。"边框样式"设置为"虚线"时，才显示该配置项。 - 描边颜色：设置边框的颜色。"边框"设置为"开启"时，才显示该配置项。 - 描边宽度：设置边框的宽度。"边框"设置为"开启"时，才显示该配置项。 - 颜色设置：根据实际需求，设置面ID的颜色。"显示类型"设置为"分类显示"时，才显示该配置项。 - 图层标签 - 标签悬浮：开启时，鼠标悬浮在图层上时会显示标签。 - 标签字体：设置标签的字体、大小和颜色等。 #### 镜头编辑 在弹窗上拖拽、缩放、旋转 (仅3D视图) 到期望位置后保存，组件的相应配置项会跟随更改。 图12地图中心经度/纬度发生变化 ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002157946458.png "点击放大") #### 交互 在交互中，配置地图与其他组件或页面之间的交互能力。更多交互介绍，请参见[交互设置](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6140.html)。