提问 发文

3D边界地图子组件(散点、柱状图、灯光)

3D边界地图主要以三维形态对相对宏观地图数据进行展示,支持添加散点、热力、标牌、柱图、飞线等地图子图层的效果叠加。本文以散点、柱状图、灯光子组件为例,对3D边界地图的子组件进行介绍。

操作流程

1、散点

散点就是地图上显示的一个一个的点位,除了用位置表现经纬度信息之外,就是使用图标在业务上的表示点的类别。

图片

可在数据源中接入带经纬度数据的数组,通过经纬度映射到世界坐标后,自动生成多个散点对象,生成的每个对象称为点位,每个点位对应着数据源数组中每个元素。

图片

图片

1.1 样式

1.1.1 编辑点位

选择【样式】—【散点】—【编辑点位】,可以自定义添加或删除点位。

图片

图片

1.1.2 基础设置

层级序号:设置子组件的渲染层级,层级序号越大越在上层,上层的物体将完全遮挡下层的物体;同层的物体将按照深度值(物体距离相机的远近)来确定遮挡关系。
自动排序:勾选之后,物体将根据根据其深度值(距离相机远近)来决定遮挡顺序,就是符合真实世界中物体的遮挡关系。等价于层级序号的配置项中设置了层级为0。

图片

1.1.3 物体设置

始终面向镜头:勾选此项,则散点始终面向镜头,旋转和缩放镜头都不会改变散点的大小,只会改变散点在屏幕上的位置。并且散点的尺寸和屏幕像素直接关联。不勾选此项,则散点融入世界,成为一个普通的3D的平面,遵循透视关系。缩放镜头会改变散点大小,旋转镜头会改变散点朝向。

基准点:散点的位置是根据经纬度映射在场景中的世界坐标,而基准点设置的是散点图标上对齐到场景中的世界坐标的那个点。一般设置“50% 50%“,这样散点的尺寸变化后,会保持始终居中,散点能更准确地表示经纬度的位置。

图片

1.1.4 样式配置

散点可以设置三种显示模式:矢量形状、图片和视频、模型。支持上传自定义图片、视频和模型。

图片

1.2 数据

数据中支持传入数组,数组的每个元素是一个对象结构,对象的字段和意义如下:

  • lng:经纬

  • lat:维度

  • city:城市名

  • adcode:城市编码

  • value:数值,显示在标牌的主内容中,可以是数字也可以文字。

示例如下:

[

{

"lng": 120.301785,

"lat": 29.225269,

"city": "金华市",

"adcode": 330700,

"value": 100

}

]

1.3 交互

回调和自定义事件:该子组件中回调和自定义事件有着完全相同的触发时机,并且发送完全一样的数据,所以二者综合起来说明。

鼠标点击:鼠标点击某个点位定位点后发送回调和自定义事件。

当请求完成或数据变化时:鼠标点击定位点轮播动画轮播到某个点位时发送回调和自定义事件。和鼠标点击的区别在于:鼠标点击只在鼠标点击时发送,而状态改变不仅会在鼠标点击时发送,还会在轮播到某个点位时发送。

2、柱状图

2.1 样式

2.1.1 基础配置

同散点子组件。

2.1.2 样式配置

可以分别对柱状和标牌进行配置。

图片

a、柱状配置:
支持透明:勾选此选项可以出现半透明柱子的效果,如果不需要半透明效果,则必须关闭此项,否则容易出现渲染中的遮挡关系错误。
混合模式:可选择正常、正片叠底、相加、相减四种模式。
柱状类型:可选择方柱or圆柱。
系列间距:环绕区划中心分布时,每个系类的柱子之间的间距。

图片

数据标签:开启后柱子上方会显示对应的数据。

图片

b、标牌配置

可自定义背景、序号、数值、区划名称的样式。

图片

2.1.3 交互配置

数据动画:开启后,所有的柱状图在预览时会同时抬升,标牌同时出现。

图片

轮播动画:开启后,标牌会按顺序轮流出现。

图片

2.2数据

  • name:城市名

  • value:数值,显示在标牌的主内容中,可以是数字也可以文字。

  • adcode:城市编码

示例如下:

[
{
"name": "温州市",
"value": 20,
"adcode": 330300
}
]

3、灯光

3.1 样式

3.1.1 基础配置

支持自动排序,同散点的基础设置

3.1.2 参数设置

设置灯光的基本参数。

图片

类型:选择光源的类型。(可以选择方向光、聚光灯和点光源)

颜色模式:灯光的颜色

  • 预设:可以选择火柴光、烛光、篝火、白炽灯、日光等不同的效果。
  • 色温:通过调节色温来改变灯光的效果。
  • 颜色:可以自定义需要的灯光颜色。
  • 强度:灯光的光照强度。
投射:开启该选项后会显示地图块、柱体等的阴影。

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

《数字孪生世界白皮书》下载地址: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

收藏 0
分享
分享方式
微信

评论

游客

全部 0条评论

154

文章

1.67K

人气

0

粉丝

0

关注

官方媒体

轻松设计高效搭建,减少3倍设计改稿与开发运维工作量

开始免费试用 预约演示

扫一扫关注公众号 扫一扫联系客服

©Copyrights 2016-2022 杭州易知微科技有限公司 浙ICP备2021017017号-3 浙公网安备33011002011932号

互联网信息服务业务 合字B2-20220090

400-8505-905 复制
免费试用
微信社区
易知微-数据可视化
微信扫一扫入群