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);
});

控制台打印结果:

相关推荐
酷酷的阿云4 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
aPurpleBerry1 小时前
JS常用数组方法 reduce filter find forEach
javascript
ZL不懂前端2 小时前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x2 小时前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
我血条子呢2 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
半开半落2 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt
理想不理想v3 小时前
vue经典前端面试题
前端·javascript·vue.js
小阮的学习笔记3 小时前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜3 小时前
Vue实现登录功能
前端·javascript·vue.js