网站联盟三要素百度快照首页
文章目录
- 1 需求描述
- 2 解决方案
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;}
});
完整代码：
<!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 viewvar 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。