2D地图组件实操详解

01 预览效果

图片

02 实现逻辑

在【EasyMap】导出所需的地图数据，通过【2D高德地图】组件进行呈现。同时利用地图组件提供的【多样子组件】（热力图、标点、飞线等）搭建上图所示效果。

03 操作流程

3.1 准备工作

【组件】→【地图】→【2D高德地图】。（ps：为了方便展示效果，已经把子组件清空）

图片

选中【文字转语音组件】，取消【自动播放】。

图片

3.2 多边形（余杭区）

【样式】→【子组件管理】→【多边形】。

图片

切换至【EasyMap】。

图片

双击进行下钻→下钻至【余杭区】→下载【余杭区】的【JSON】数据。

图片

回到EasyV平台→在【子组件管理】找到【多边形】子组件→双击进入编辑界面→点击【样式】→【样式配置】→上传刚刚下载的余杭区【区域数据】。

（ps：EasyMap上下载的文件名称一般为该地区的行政区码，余杭区为330110）。

图片

设置完成后会发现中心点不在【余杭区】，需要退出【多边形】子组件再进行设置→【样式】→【全局】→【地图范围】设置为【余杭区】→微调【中心点】的参数以达到理想展示效果。

图片

3.3 飞线（余杭区）

【样式】→【子组件管理】→添加【飞线】子组件。

图片

切换至【EasyMap】→【子组件数据模拟】→添加图层。

图片

设置【图层名称】和【选择类型】→点击【保存】。

图片

双击进行下钻→圈定【余杭区】范围→点击【确认选择】。

图片

鼠标点击进行设置起始地和目的地→复制右侧数据。

图片

回到EasyV平台→在【子组件管理】找到【飞线】子组件→双击进入编辑界面→点击【数据】→将复制的数据黏贴到下面。

图片

【飞线】效果就设置完成了。

图片

3.4 路径（余杭区）

【样式】→【子组件管理】→添加【路径】子组件。

图片

切换至【EasyMap】→【子组件数据模拟】→添加图层→设置【图层名称】和【选择类型】→点击【保存】。

图片

与上面操作一致，下钻圈定【余杭区】范围→点击【确认选择】→鼠标点击设置需要展示的轨迹→手动选择复制右侧数组数据即可。

图片

3.5 点系列（余杭区）

点系列包含：聚合热力、信息面板、点标记、点聚合。这几种子组件逻辑一致，数据部分稍有差别，可根据需求自行填充。本次教程以【点标记】为例。【样式】→【子组件管理】→添加【点标记】子组件。

图片

切换至【EasyMap】→【子组件数据模拟】→添加图层→设置【图层名称】和【选择类型】→设置【可选字段】→点击【保存】。

图片

与上面操作一致，下钻圈定【余杭区】范围→点击【确认选择】→鼠标点击设置需要展示的点位→复制对应点位坐标信息。

图片

回到EasyV平台→在【子组件管理】找到【点标记】子组件→双击进入编辑界面→点击【数据】→将复制的数据黏贴到下面即可。至此，【点标记】效果就设置完成了。

图片

聚合热力

聚合热力子组件是在点标记基础上增添value值，例：

"value": 60,    "lng": 120.050616,    "lat": 30.262357,    "district": "余杭区",    "adcode": 330110

图片

点聚合

点聚合子组件是在点标记基础上增添value值和type类型，例：

"value": 12,    "type": "type1",    "lng": 120.27336,    "lat": 30.196452,    "district": "萧山区",    "adcode": 330109

图片

可在【点聚合】组件的【样式】→【图标配置】中修改图标类型与信息。

图片

标牌

标牌子组件是在点标记基础上增添value值以及可以自定义标牌样式，例：

"value": 88,    "type": "type1",    "lng": 120.27336,    "lat": 30.196452,    "district": "萧山区",    "adcode": 330109

图片

可在【标牌】组件的【样式】→【标牌配置】中修改标牌的样式。

图片

信息面板

信息面板组件是在点标记基础上增添了多项指标，例：

"state": "优",    "value1": "监测点#02",    "value2": 173,    "value3": "优",    "lng": 120.050616,    "lat": 30.262357,    "district": "余杭区",    "adcode": 330110

图片

可在【信息面板】组件的【样式】→【内容样式】中修改信息面板的具体样式。

图片