Question

我无法使用html按钮尝试打开和关闭ESRI功能层。现在，按钮应该只是将要素图层添加到地图中。功能层（featureLayer2）是使用ESRI的ArcMap Online创建的。我无法访问ArcMap Server，因此使用动态要素图层似乎不是一个选项。要素图层在函数中创建，然后推送到函数外部的数组（myArray）。单击按钮时，应调用myFunction（）。 myFunction（）应该将图层添加到地图中。我也无法获得最大的shapefile以在某个缩放级别显示。我不确定是否需要简化形状，或者是否由于它们的范围偏离页面而不能显示超过某个缩放的图层。我最关心的是让按钮工作，但是如果有人对shapefile的建议也很棒。代码如下，功能层可供公众使用，因此您应该能够运行代码并查看地图。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>FeatureLayer</title>

<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
<script src="https://js.arcgis.com/3.16/"></script>

<style>
html, body, #map {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
#map{ position: relative;}
 #legendPane {
     position: absolute;
     top:1%;
     left:5%;
     right:5%;
     height:19%;
     width:90%;
     border: 3px solid silver;


      border-radius: 25px;
     background-color:grey;
     z-index: 10;
    }

</style>

<script>
myArray = [];
require([
    "esri/map", 
    "esri/layers/FeatureLayer",
    "dojo/domReady!"
  ],
  function(
    Map,
    FeatureLayer
  ) {

    var map = new Map("map", {
      basemap: "hybrid",
      center: [-91.7857, 43.3033],
      zoom: 12
    });

    /****************************************************************
     * Add feature layer - A FeatureLayer at minimum should point
     * to a URL to a feature service or point to a feature collection 
     * object.

      map.addLayer(featureLayer2);
     map.addLayer(featureLayer3);
     var featureLayer3 = new FeatureLayer("https://services6.arcgis.com/EnvQRR6Ah8vLF2fy/arcgis/rest/services/wsMerged/FeatureServer/0");
 map.addLayer(featureLayer);
   myArray.push(featureLayer2);
 var featureLayer = new FeatureLayer("https://services6.arcgis.com/EnvQRR6Ah8vLF2fy/arcgis/rest/services/WBD_HU_12_IA_Select/FeatureServer/0");
    var featureLayer2 = new FeatureLayer("https://services6.arcgis.com/EnvQRR6Ah8vLF2fy/arcgis/rest/services/hydricSoilsMerged/FeatureServer/0");
     map.addLayer(featureLayer3);
   ***************************************************************/

    var featureLayer = new FeatureLayer("https://services6.arcgis.com/EnvQRR6Ah8vLF2fy/arcgis/rest/services/WBD_HU_12_IA_Select/FeatureServer/0");
    var featureLayer2 = new FeatureLayer("https://services6.arcgis.com/EnvQRR6Ah8vLF2fy/arcgis/rest/services/hydricSoilsMerged/FeatureServer/0");

    map.addLayer(featureLayer);
    myArray.push(featureLayer2);




  });  

  function myFunction(){map.addLayer(myArray[0])};
</script>
</head>

<body>
  <div id="map">  <div id="legendPane"><button id="myButton" onclick="myFunction()">Click to see hydric soils</button></div></div>
</body>

</html>

Answer 1

所以我想出了图层切换功能。我不得不将地图传递到数组中，然后在其他所有内容之外调用我的函数。您应该注意，该按钮只添加一个图层 - 它当前不会切换。仍然无法弄清楚为什么大特征层仅在某些变焦处显示。这是代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>FeatureLayer</title>

<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
<script src="https://js.arcgis.com/3.16/"></script>

<style>
html, body, #map {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}
#map{ position: relative;}
 #legendPane {
     position: absolute;
     top:1%;
     left:5%;
     right:5%;
     height:19%;
     width:90%;
     border: 3px solid silver;


      border-radius: 25px;
     background-color:grey;
     z-index: 10;
    }

</style>

<script>
myArray = [];
require([
    "esri/map", 
    "esri/layers/FeatureLayer",
    "dojo/domReady!"
  ],
  function(
    Map,
    FeatureLayer
  ) {

    var map = new Map("map", {
      basemap: "hybrid",
      center: [-91.7857, 43.3033],
      zoom: 12
    });
myArray.push(map);
    /****************************************************************
     * Add feature layer - A FeatureLayer at minimum should point
     * to a URL to a feature service or point to a feature collection 
     * object.

      map.addLayer(featureLayer2);
     map.addLayer(featureLayer3);
     var featureLayer3 = new FeatureLayer("https://services6.arcgis.com/EnvQRR6Ah8vLF2fy/arcgis/rest/services/wsMerged/FeatureServer/0");
 map.addLayer(featureLayer);
   myArray.push(featureLayer2);
 var featureLayer = new FeatureLayer("https://services6.arcgis.com/EnvQRR6Ah8vLF2fy/arcgis/rest/services/WBD_HU_12_IA_Select/FeatureServer/0");
    var featureLayer2 = new FeatureLayer("https://services6.arcgis.com/EnvQRR6Ah8vLF2fy/arcgis/rest/services/hydricSoilsMerged/FeatureServer/0");
     map.addLayer(featureLayer3);
   ***************************************************************/

    var featureLayer = new FeatureLayer("https://services6.arcgis.com/EnvQRR6Ah8vLF2fy/arcgis/rest/services/WBD_HU_12_IA_Select/FeatureServer/0");
    var featureLayer2 = new FeatureLayer("https://services6.arcgis.com/EnvQRR6Ah8vLF2fy/arcgis/rest/services/hydricSoilsMerged/FeatureServer/0");

    map.addLayer(featureLayer);
    myArray.push(featureLayer2);




  });  

  function myFunction(){myArray[0].addLayer(myArray[1])};
</script>
</head>

<body>
  <div id="map">  <div id="legendPane"><button id="myButton" onclick="myFunction()">Click to see hydric soils</button></div></div>
</body>

</html>

无法使用简单的html按钮打开和关闭ESRI功能层

1 个答案: