2016-04-28 66 views
0

我無法嘗試使用html按鈕打開和關閉ESRI功能層。現在,該按鈕應該只是將要素圖層添加到地圖。要素圖層(featureLayer2)是使用ESRI的ArcMap Online創建的。我無法訪問ArcMap Server,因此使用動態要素圖層似乎不是一種選擇。要素圖層在函數中創建,然後推送到函數外部的數組(myArray)。當按鈕被點擊時,myFunction()應該被調用。 myFunction()應該將圖層添加到地圖。我也無法獲得最大的shapefile以某個縮放級別顯示。我不確定是否需要簡化形狀,或者由於頁面的大小,圖層不會顯示超過某個縮放比例。我最大的擔心是讓按鈕工作,但如果有人有關於shapefile的建議,那也太棒了。代碼如下,功能層可供公衆使用,因此您應該能夠運行代碼並查看地圖。無法用簡單的html按鈕打開和關閉ESRI功能層

<!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> 

回答

0

所以我想出了圖層切換功能。我必須將地圖傳遞給數組,然後在其他所有地方之外調用我的函數。您應該注意,該按鈕僅添加一個圖層 - 它目前不會切換。仍然無法弄清楚爲什麼大型要素圖層只能在某些縮放處顯示。這裏是代碼:

<!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>