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

控制台打印结果:

相关推荐
昔人'10 分钟前
html`<mark>`
前端·javascript·html
前端拿破轮1 小时前
从0到1搭一个monorepo项目(二)
前端·javascript·面试
SuperherRo1 小时前
JS逆向-安全辅助项目&Yakit热加载&魔术方法&模版插件语法&JSRpc进阶调用&接口联动
javascript·安全·yakit·jsrpc·热加载
用户47949283569151 小时前
用|运算符写管道?Symbol.toPrimitive让JavaScript提前用上|>语法
前端·javascript
知识分享小能手1 小时前
uni-app 入门学习教程,从入门到精通,uni-app 基础知识详解 (2)
前端·javascript·windows·学习·微信小程序·小程序·uni-app
晴殇i3 小时前
前端鉴权新时代:告别 localStorage,拥抱更安全的 JWT 存储方案
前端·javascript·面试
码农刚子3 小时前
ASP.NET Core Blazor简介和快速入门 二(组件基础)
javascript·后端
我是日安4 小时前
从零到一打造 Vue3 响应式系统 Day 27 - toRef、toRefs、ProxyRef、unref
前端·javascript·vue.js
不如喫茶去4 小时前
VUE查询-历史记录功能
前端·javascript·vue.js
一枚前端小能手4 小时前
「周更第8期」实用JS库推荐:decimal.j
前端·javascript