ArcGIS Maps SDK for JS:监听按钮点击事件控制图层的visible属性

文章目录

  • [1 需求描述](#1 需求描述)
  • [2 解决方案](#2 解决方案)

1 需求描述

现在有这么一个需求:在地图中添加一些图层,添加图层列表按钮。打开图层列表后用户会打开某些图层使其可见,要求关闭图层列表时,隐藏某些图层(若visible=true)

2 解决方案

可以使用 ArcGIS API for JavaScript 的 dojo/on 模块来监听按钮的点击事件,控制图层的visible属性。

关键代码:

js 复制代码
// 添加按钮
var toggleLayerBtn = document.getElementById("toggleLayerBtn");
view.ui.add(toggleLayerBtn, "top-right");

// 监听按钮点击事件,若图层可见,则关闭
on(toggleLayerBtn, "click", function() {
  if (myFeatureLayer .visible) {
    myFeatureLayer .visible = false;
  } 
});

完整代码:

html 复制代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ArcGIS API for JavaScript: Custom Button to Toggle Layer Visibility</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/css/main.css">
    <script src="https://js.arcgis.com/4.16/"></script>
  </head>
  <body>
    <div id="map"></div>
    <button id="toggleLayerBtn">Toggle Layer</button>

    <script>
      require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",
        "dojo/on",	//用于监听按钮点击事件
        "dojo/domReady!"
      ], function(Map, MapView, FeatureLayer, on) {
        // Create the map and set the view
        var map = new Map({
          basemap: "topo-vector"
        });
        var view = new MapView({
          container: "map",
          map: map,
          center: [0, 0],
          zoom: 4
        });

        // 添加图层
        var myFeatureLayer = new FeatureLayer({
          url: "https://example.com/path/to/feature/layer",
          title: "My Feature Layer",
          visible: false
        });
        map.add(myFeatureLayer );

        // 添加按钮
        var toggleLayerBtn = document.getElementById("toggleLayerBtn");
        view.ui.add(toggleLayerBtn, "top-right");

        // 监听按钮点击事件,若图层可见,则关闭
        on(toggleLayerBtn, "click", function() {
          if (myFeatureLayer .visible) {
            myFeatureLayer .visible = false;
          } 
        });
      });
    </script>
  </body>
</html>

上面的示例代码首先创建了一个地图和地图视图,然后创建了一个FeatureLayer并将其添加到地图中。接下来,使用 dojo/on 模块监听按钮的点击事件,在点击时检查FeatureLayer是否可见,若可见,则 myFeatureLayer .visible = false。

注意替换 "https://example.com/path/to/feature/layer" 为你的FeatureLayer的 URL。

相关推荐
江城开朗的豌豆21 分钟前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记31 分钟前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆31 分钟前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
我想说一句35 分钟前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜35 分钟前
CommonJS与ESM
前端·javascript
G等你下课37 分钟前
从点击到执行:如何优雅地控制高频事件触发频率
前端·javascript·面试
Jackson_Mseven38 分钟前
面试官:说说 startTransition 和 useDeferredValue?我:我用它一行代码救了首页!
前端·javascript·面试
架构个驾驾38 分钟前
从0到1搭建Vue3+Vant移动端项目(一)
前端·javascript·vue.js
然我38 分钟前
React 中 useEffect 到底怎么用才不会踩坑?全流程详解 + 实例讲透副作用
前端·javascript·react.js
前端付豪39 分钟前
12、表单系统设计:动态表单 + 校验 + 可配置化
前端·javascript·架构