Javascript 通过下拉菜单更改地图
我希望通过ESRI的ArcGIS API创建一个webmap，该API通过一个下拉菜单更改当前显示的地图，该菜单将切换正在使用的web ID 这就是我到目前为止所做的：Javascript 通过下拉菜单更改地图,javascript,arcgis,arcgis-js-api,Javascript,Arcgis,Arcgis Js Api,我希望通过ESRI的ArcGIS API创建一个webmap，该API通过一个下拉菜单更改当前显示的地图，该菜单将切换正在使用的web ID 这就是我到目前为止所做的： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content=
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
<link rel="stylesheet" href="css/layout.css">
<script src="http://js.arcgis.com/3.13/"></script>
<script>
require([
"dojo/parser",
"dojo/ready",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/dom",
"esri/map",
"esri/urlUtils",
"esri/arcgis/utils",
"esri/dijit/Legend",
"esri/dijit/Scalebar",
"esri/dijit/OverviewMap",
"dojo/domReady!"
], function(
parser,
ready,
BorderContainer,
ContentPane,
dom,
Map,
urlUtils,
arcgisUtils,
Legend,
Scalebar,
OverviewMap,
domConstruct
) {
ready(function(){
parser.parse();
arcgisUtils.createMap("c63cdcbbba034b62a2f3becac021b0a8","map").then(function(response){
//update the app
dom.byId("title").innerHTML = response.itemInfo.item.title;
dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;
var map = response.map;
//add the scalebar
var scalebar = new Scalebar({
map: map,
scalebarUnit: "english"
});
var overviewMapDijit = new OverviewMap({
map: map,
visible: true
});
overviewMapDijit.startup();
//add the legend. Note that we use the utility method getLegendLayers to get
//the layers to display in the legend from the createMap response.
var legendLayers = arcgisUtils.getLegendLayers(response);
var legendDijit = new Legend({
map: map,
layerInfos: legendLayers
},"legend");
legendDijit.startup();
});
});
});
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
<div id="header" class="shadow roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<div id="title"></div>
<div id="subtitle"></div>
</div>
<div id="map" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
<div id="rightPane" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" >
<div data-dojo-type="dijit/layout/TabContainer">
<div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
data-dojo-props="title:'Legend', selected:true">
<div id="legend"></div>
</div>
<div data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="title:'Map Selection'">
<div id="lppanel" class="roundedCorners">
<table>
<tr>
<td style="padding:5px;">
<div style="font-size: 16pt; font-weight:bold;">
Choose a Map to Display:
</div>
<div style="padding:10px;">
<select id="lplist">
<option value="choose" selected="selected">(Select an option)</option>
<option value="ypop">Chicago Youth Population</option>
<option value="mhi">USA Median Household Income</option>
<option value="hhs">USA HHS Healthcare Resources</option>
</select>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<div id="legend"></div>
</div>
</div>
</body>
</html>
你似乎错过了一些东西。首先，您需要使用dojo/on模块或其他方式将select连接到函数。您还需要更新地图的web地图id，可能需要再次调用create map。您可能希望将代码的这一部分封装在函数中，并将web map id作为参数传递给它，这样当您需要更改它时，只需使用新参数调用函数即可。我甚至无法显示这一部分，可能是因为我没有您的css/layout.css文件。要么包括那个，要么给我们一些不依赖它的代码。请添加更多关于这个问题的细节！或者在您遇到困难的地方提供一些独立的代码。
function getWebID(value){
var mapWebID;
switch (value){
case "ypop":
mapWebID= "c63cdcbbba034b62a2f3becac021b0a8";
break;
case "mhi":
mapWebID= "1e79439598494713b553f990a4040886";
break;
}
return mapWebID;
}