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

控制台打印结果:

相关推荐
yqcoder31 分钟前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
GIS思维1 小时前
ArcGIS定义投影与投影的区别(数据和底图不套合的原因和解决办法)
arcgis·gis·地理信息·arcgis坐标系·动态投影
会发光的猪。1 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客2 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
Domain-zhuo2 小时前
什么是JavaScript原型链?
开发语言·前端·javascript·jvm·ecmascript·原型模式
小丁爱养花2 小时前
前端三剑客(三):JavaScript
开发语言·前端·javascript
码农六六2 小时前
vue3封装Element Plus table表格组件
javascript·vue.js·elementui
徐同保3 小时前
el-table 多选改成单选
javascript·vue.js·elementui
快乐小土豆~~3 小时前
el-input绑定点击回车事件意外触发页面刷新
javascript·vue.js·elementui
建群新人小猿3 小时前
会员等级经验问题
android·开发语言·前端·javascript·php