【? Code First ?】
Part 1：HTML
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>Lux's Map</title> <link rel="stylesheet" href="css/css02.css" /> <link rel="stylesheet" href="css/css_menu.css" /> <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css"> <script src="https://js.arcgis.com/4.10/"></script> <script src="js/js02.js"></script> </head> <body> <ul> <li> <a class="entypo-star" href="demo01.html"></a> <span>ChangeBaseMap</span> </li> <li> <a class="entypo-newspaper" href="demo02.html"></a> <span>AddLayers</span> </li> <li> <a class="entypo-link" href="demo03.html"></a> <span>LinkMap</span> </li> <li> <a class="entypo-menu" href="demo04.html"></a> <span>LayerSwipe</span> </li> </ul> <div id="viewDiv"></div> <div id="LayerBox"> <p>添加图层</p> <div id="SingleBox"> <a> AddPointLayer</a> <div id="AddPoint" class="button_Add">√</div> <div id="RemovePoint" class="button_Remove">×</div> </div> <div id="SingleBox"> <a> AddLineLayer</a> <div id="AddLine" class="button_Add">√</div> <div id="RemoveLine" class="button_Remove">×</div> </div> <div id="SingleBox"> <a> AddPolygonLayer</a> <div id="AddPolygon" class="button_Add">√</div> <div id="RemovePolygon" class="button_Remove">×</div> </div> <div id="Layers"> </div> </div> </body> </html>Part 2：CSS
html,body,#viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } #LayerBox{ position: absolute; top: 10px; right: 10px; width: 230px; height: 200px; margin: 5px; background-size: 100%; background-color: #C0C0C0; opacity: 0.8; z-index: 9; border: #C0C0C0; border-radius:5px ; text-align: center; font-family: "微软雅黑"; } .button_Add{ margin-left: 5px; float: left; background-color: white; border: 1px solid lightgreen; color: lightgreen; border-radius:5px ; height: 20px; width: 20px; opacity: 0.8; } .button_Remove{ margin-left: 5px; float: left; position:initial; background-color: white; border: 1px solid red; color: red; border-radius:5px ; height: 20px; width: 20px; opacity: 0.8; } #SingleBox{ float: left; margin-top: 10px; margin-left: 10px; } #Layers{ color: dimgray; }Part 3：Javascript
require([ "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer" ], function(Map, MapView, FeatureLayer) { var map = new Map({ basemap: "topo-vector" }); //*************************添加图层************************************* // Trailheads Point feature layer var featureLayer01 = new FeatureLayer; featureLayer01.url = "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads_Styled/FeatureServer"; // Trailheads Line feature layer var featureLayer02 = new FeatureLayer({ url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer" }); // Trailheads Polygon feature layer var featureLayer03 = new FeatureLayer({ url: "https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Parks_and_Open_Space/FeatureServer" }); document.getElementById("AddPoint").addEventListener("click", function() { map.add(featureLayer01); }); document.getElementById("AddLine").addEventListener("click", function() { map.add(featureLayer02); }); document.getElementById("AddPolygon").addEventListener("click", function() { map.add(featureLayer03); }); //*************************添加地图到视图************************************* var view = new MapView({ container: "viewDiv", map: map, center: [-118.71511, 34.09042], zoom: 11 }); //*************************移除图层************************************* document.getElementById("RemovePoint").addEventListener("click", function() { view.map.remove(featureLayer01); }); document.getElementById("RemoveLine").addEventListener("click", function() { view.map.remove(featureLayer02); }); document.getElementById("RemovePolygon").addEventListener("click", function() { view.map.remove(featureLayer03); }); //*************************计算图层数量************************************* view.map.allLayers.on("change", function(event) { var num = event.target.length - 2; document.getElementById("Layers").textContent = "Layers： " + num; }); });Part 4：Menu（CSS）
@import url(http://weloveiconfonts.com/api/?family=entypo); /* entypo */ [class*="entypo-"]:before { font-family: 'entypo', sans-serif; } @-webkit-keyframes flip { 0%{-webkit-transform:rotateY(0deg); opacity:1;} 100%{-webkit-transform:rotateY(95deg); opacity:0;} } @-moz-keyframes flip { 0%{-webkit-transform:rotateY(0deg); opacity:1;} 100%{-webkit-transform:rotateY(95deg); opacity:0;} } @-o-keyframes flip { 0%{-webkit-transform:rotateY(0deg); opacity:1;} 100%{-webkit-transform:rotateY(95deg); opacity:0;} } @keyframes flip { 0%{-webkit-transform:rotateY(0deg); opacity:1;} 100%{-webkit-transform:rotateY(95deg); opacity:0;} } body { background:url(forestblur.jpg) no-repeat; background-size:cover 100%; } h2 { color: #555; text-align: center; } ul { position:absolute; top: 45px; left: 15px; margin:50px auto; padding:0; z-index: 9; width:200px; height:220px; list-style:none; -webkit-perspective:1000; -moz-perspective:1000; -o-perspective:1000; perspective:1000; } li { margin:2px 0; padding:0; } li a { display:block; height:18px; width:20px; background:rgba(155,155,155,0.5); color:#fff; padding:8px 6px; text-decoration:none; text-align:center; } li span { width:154px; float:left; text-align:center; background:rgba(155,155,155,0.5); color:#fff; margin:-34px 34px; padding:8px 6px; transform-origin:0%; opacity:0; -webkit-transform:rotateY(95deg); -webkit-transition:.5s; -moz-transition:.5s; -o-transition:.5s; transition:.5s; -webkit-animation: flip 2s; -moz-animation: flip 2s; -o-animation: flip 2s; animation: flip 2s; } span[class='menu']{-webkit-animation:none;} li:nth-child(2) span { -webkit-animation-delay:.5s; -moz-animation-delay:.5s; -o-animation-delay:.5s; animation-delay:.5s;} li:nth-child(3) span { -webkit-animation-delay:.4s; -moz-animation-delay:.4s; -o-animation-delay:.4s; animation-delay:.4s;} li:nth-child(4) span { -webkit-animation-delay:.3s; -moz-animation-delay:.3s; -o-animation-delay:.3s; animation-delay:.3s;} li:nth-child(5) span { -webkit-animation-delay:.2s; -moz-animation-delay:.2s; -o-animation-delay:.2s; animation-delay:.2s;} li:nth-child(6) span { -webkit-animation-delay:.1s; -moz-animation-delay:.1s; -o-animation-delay:.1s; animation-delay:.1s;} li a:hover ~ span { opacity:1; -webkit-transform:rotateY(0deg); -moz-transform:rotateY(0deg); -o-transform:rotateY(0deg); transform:rotateY(0deg); -webkit-transition:.5s; -moz-transition:.5s; -o-transition:.5s; transition:.5s; }····其中Demo02是该示例代码，对应css02；界面中有设置一个功能切换菜单Menu（对应样式为CSS_Menu）；img为第一个功能切换底图时界面上显示的图片引用；
功能实现界面如下： 代码下载地址：链接：WebGIS_Demo_X4 提取码：uy3p实例中主要思路：点击按钮，响应对应click事件——添加已经定义的图层到视图窗口；