数据驱动地图散点显隐

一般情况下,对子组件的显隐操作都使用自定义事件来进行一对一事件控制,这种方式方便快捷,不需要写代码。

如果要单独显示某个子组件,则需要把其他不需要显示的组件全部隐藏。当需要显隐控制的子组件比较多时,需要配置的事件与动作会迅速膨胀。随着控制的入口增多、需要操作的子组件增多,配置起来也会越来越复杂,一旦中途新增了子组件,所有的控制入口全都要对新增的子组件做对应动作配置。
数据驱动则利用了子组件数据为空的情况下不渲染的特性(部分子组件数据不影响其功能,这部分无法使用数据驱动)来进行的,通过回调参数与数据过滤器的联合,使得需要显示的子组件返回有效数据实现显示,需要隐藏的子组件返回空数据来实现隐藏。

file

功能说明

点击控制入口,分别实现单独显示圆形、矩形、三角形,全部显示、全部隐藏、显示圆形与三角形的功能。(此处仅配置分别显示“方形”、“圆形与三角形”,其他场景同理配置)。

file

file

实现逻辑

相同类型的组件,并且配置项中包含了多系列的配置,可以通过在数据中动态过滤对应的数据系列实现,尽量减少子组件的数量。

file

实操流程

首先进入地图-点标记字组件,接入数据。此处以静态数据为例。

file

通过系列区分内容,并在数据中留好标记。

file

在样式中配置数据系列的散点及样式。

file

在控制的入口处的静态数据留下需要显示的内容标记。(此处用标题组件来控制)

file

通过回调参数将相应的内容传出。

file

回到散点子组件中,添加数据过滤器,接收标题组件发出的“信号”,动态过滤出对应的数据内容。

file

const{show_list=[]}=callbackArgs;
return data.filter(d=>show_list.includes(d.type));

其他控制标题同理配置。

关注公众号“易知微产品帮助中心”,在后台发送“数据驱动地图散点”,即可获取配置好的demo~

作为国产自研的数字孪生可视化工具,数据安全和隐私保护等多方面因素无忧,以零代码\低代码的方式,提供数据源实时接入、拖拽式数字面板呈现、三维模型\地理信息\孪生场景构建等可视化应用的协同搭建能力,以更低成本、更高效率帮助客户\伙伴满足指挥中心、数字化展厅、数字化管理等各类数字化场景的应用建设~

易知微已经为130000+在线用户、3600+企业客户提供数字孪生可视化平台应用,和众多行业伙伴融合共生,一起让每一个组织及个体看见并受益于数字化!

想要了解更多案例,可以访问易知微的官网案例中心,涵盖数字孪生可视化技术在各行各业的应用,欢迎大家积极讨论,分享你的数字孪生经历。

易知微官网
全新上线供免费使用的个人版,欢迎大家前来易知微官网试用~配有保姆级教程,助你收获专属数字孪生场景!

  • 5
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值