HTML： ~~~ <div class="zh-operate"> <button id="js_btn_area" type="button">顯示/隱藏區域</button> <button id="js_btn_all" type="button">顯示/隱藏所有</button> </div> ~~~ CSS： ~~~ .zh-operate{position: absolute;z-index: 9;right: 20px;top: 20px;} ~~~ JS： ~~~ require([ 'esri/Map', 'esri/views/MapView', 'esri/Graphic', 'esri/layers/GraphicsLayer', 'dojo/query!css3', 'dojo/domReady!' ], function(Map, MapView, Graphic, GraphicsLayer, query) { var map = new Map({ basemap: 'streets' // dark-gray }); var mapView = new MapView({ map: map, container: 'js_map', center: [102.9331224074, 25.1049040686], zoom: 6, // rotation: -127.7 }); // 添加graphicLayer var graphicLayer = new GraphicsLayer({ visible: true }); map.layers.add(graphicLayer); // 線段 var polylineGraphic = new Graphic({ geometry: { type: "polyline", paths: [ [118.18214584489424, 28.61288424073726], [118.59962631364411, 27.62455982526955], [117.32521225114444, 26.745025277342258] ] }, symbol: { type: "simple-line", color: [226, 119, 40], width: 4 } }); // 區域 var polygonGraphic = new Graphic({ geometry: { type: "polygon", rings: [ [109.9863450636464, 29.668393220314865], [115.6552903761449, 29.725653338113172], [115.14991928239503, 26.056194278419024], [110.7553880323962, 26.21400321135212] ] }, symbol: { type: "simple-fill", color: [227, 139, 79, 0.8], outline: { color: [255, 255, 255], width: 1 } } }); graphicLayer.addMany([polylineGraphic, polygonGraphic]); // 顯示/隱藏graphic區域 query('#js_btn_area').on('click', function() { polygonGraphic.visible = !polygonGraphic.visible; }); // 顯示/隱藏graphicLayer所有 query('#js_btn_all').on('click', function() { graphicLayer.visible = !graphicLayer.visible; // graphic跟著顯示/隱藏 if(graphicLayer.visible) { graphicLayer.graphics.items.forEach(function(v) { v.visible = true; }); } else { graphicLayer.graphics.items.forEach(function(v) { v.visible = false; }); } }); }); ~~~