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


    1 需求描述

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

    2 解决方案

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

    关键代码:

    // 添加按钮
    var toggleLayerBtn = document.getElementById("toggleLayerBtn");
    view.ui.add(toggleLayerBtn, "top-right");
    
    // 监听按钮点击事件,若图层可见,则关闭
    on(toggleLayerBtn, "click", function() {
      if (myFeatureLayer .visible) {
        myFeatureLayer .visible = false;
      } 
    });
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    完整代码:

    DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>ArcGIS API for JavaScript: Custom Button to Toggle Layer Visibilitytitle>
        <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 Layerbutton>
    
        <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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53

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

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

  • 相关阅读:
    NFT 交易市场社区所有化势不可挡
    使用序列到序列深度学习方法自动睡眠阶段评分
    Linux笔记系列
    Vue自动生成二维码并可下载二维码
    如何在【逻辑回归】中优化控制正则化程度的超参数C
    第36章_瑞萨MCU零基础入门系列教程之步进电机控制实验
    Perl语言用多线程爬取商品信息并做可视化处理
    205.同构字符串
    java毕业生设计一起组局校园交友平台计算机源码+系统+mysql+调试部署+lw
    Qt实现SwitchButton滑动开关按钮组件
  • 原文地址:https://blog.csdn.net/weixin_46098577/article/details/133580252