2D地图组件实操详解

易知微创新技术团队

| 3 天前 14 0 0

预览效果

实现逻辑

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

操作流程

3.1 准备工作

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

EasyMap链接：https://map.easyv.cloud

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

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

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

易知微基于多年在数字孪生及数据可视化领域丰富实践，沉淀了诸多经验成果，欢迎大家互相交流学习：

《数字孪生世界白皮书》下载地址：https://easyv.cloud/references/detail/51.html/?t=shequ

《数字孪生行业方案白皮书》下载地址：https://easyv.cloud/references/detail/120.html/?t=shequ

《港口数智化解决方案》下载地址：https://easyv.cloud/references/detail/121.html/?t=shequ

想申请易知微产品免费试用的客户，欢迎点击易知微官网申请试用：https://easyv.cloud/?t=shequ

地图组件 2D地图组件实操详解 2D地图组件 实操详解 2D地图

赞同 0

: 微信

: 链接

全部 0条评论

易知微创新技术团队

149

文章

1.57K

人气

粉丝

关注

关注我们

扫码获取

更多数字孪生可视化干货内容

2D地图组件实操详解

点聚合

信息面板

分享方式

评论

全部 0条评论

热门文章

关注我们

官方媒体