ArcGIS Maps SDK for JS:监听图层的visible属性

文章目录

  • [1 问题描述](#1 问题描述)
  • [2 解决方案](#2 解决方案)
  • [3 拓展](#3 拓展)

1 问题描述

近期有这么一个需求。在 ArcGIS Maps SDK for JavaScript 中,使用图层的visible属性同步显示某个组件,即打开图层时显示组件,关闭图层时隐藏组件。

首先想到的是,通过点击图层列表中的小眼睛,直接使用图层的visible属性控制组件的可见性,同步显隐组件👇

html 复制代码
<my-component v-show='myLayer.visible'></my-component>

但是,这种方法是行不通的,图层显示或隐藏时,myLayer.visible并不会发生变化。

2 解决方案

可以使用 watchUtils 模块中的 watch 属性,监听图层的 visible 属性的变化。下面是一个示例:

注意,使用 watch 函数时需要引入 watchUtils 模块:

javascript 复制代码
require([
  "esri/core/watchUtils",
  "esri/layers/FeatureLayer",
  ...
], function(watchUtils, FeatureLayer, ...) {
  // 在这里使用 watchUtils 和其他模块
});

在下面的示例中,当 featureLayer 的 visible 属性变化时,会打印出当前的 visible 值。也可以根据需要在回调函数中做一些其他操作。

javascript 复制代码
// 监听 featureLayer 的 visible 属性
watchUtils.watch(featureLayer, "visible", function(isVisible) {
  console.log("Feature layer visible:", isVisible);
});

3 拓展

watch 函数用于监听一个对象的属性变化。它接受四个参数:

  • newValue:表示属性变化后的新值。
  • oldValue:表示属性变化前的旧值。
  • propertyName:表示被监听的属性名。
  • target:表示被监听的对象。
js 复制代码
 watchUtils.watch(layer, "visible", function(newValue, oldValue, propertyName, target) {
	console.log("Feature layer visible:", newValue);
	console.log("Feature layer oldValue:", oldValue);
	console.log("Feature layer propertyName:", propertyName);
	console.log("Feature layer target:", target);
});

控制台打印结果:

相关推荐
一只小风华~2 小时前
JavaScript 函数
开发语言·前端·javascript·ecmascript·web
仰望星空的凡人4 小时前
【JS逆向基础】数据库之MongoDB
javascript·数据库·python·mongodb
樱花开了几轉5 小时前
React中为甚么强调props的不可变性
前端·javascript·react.js
Mr...Gan5 小时前
VUE3(四)、组件通信
前端·javascript·vue.js
楚轩努力变强7 小时前
前端工程化常见问题总结
开发语言·前端·javascript·vue.js·visual studio code
前端开发爱好者8 小时前
只有 7 KB!前端圈疯传的 Vue3 转场动效神库!效果炸裂!
前端·javascript·vue.js
Fly-ping8 小时前
【前端】JavaScript文件压缩指南
开发语言·前端·javascript
接口写好了吗8 小时前
【el-table滚动事件】el-table表格滚动时,获取可视窗口内的行数据
javascript·vue.js·elementui·可视窗口滚动
未来之窗软件服务9 小时前
免费版酒店押金原路退回系统之【房费押金计算器】实践——仙盟创梦IDE
前端·javascript·css·仙盟创梦ide·东方仙盟·酒店押金系统
云边散步10 小时前
《校园生活平台从 0 到 1 的搭建》第四篇:微信授权登录前端
前端·javascript·后端