0
ESRIフィーチャレイヤをHTMLボタンでオン/オフするときに問題があります。今すぐボタンは機能レイヤーをマップに追加するだけです。フィーチャレイヤ（featureLayer2）は、ESRIのArcMap Onlineを使用して作成されました。私はArcMap Serverにアクセスできないので、動的フィーチャレイヤを使用することはオプションのようには思えません。フィーチャレイヤは関数内で作成され、関数外の配列（myArray）にプッシュされます。ボタンをクリックすると、myFunction（）を呼び出す必要があります。 myFunction（）はマップにレイヤーを追加する必要があります。私はまた、特定のズームレベルで表示するために最大のシェイプファイルを取得することに問題があります。シェイプを単純化する必要があるのか、レイヤーがページ外に出ているためにあるズームを過ぎても表示されないかどうかはわかりません。私の最大の関心事は、ボタンを動作させることですが、もし誰かがシェイプファイルについてのアドバイスを持っていればそれはすばらしいでしょう。コードは以下の通りです。フィーチャレイヤは一般公開されているため、コードを実行して地図を表示することができます。簡単な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>