Question

我希望通过ESRI的ArcGIS API创建一个webmap，通过一个下拉菜单更改当前显示的地图，该菜单将切换正在使用的Web ID。

这是我到目前为止所做的：

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

我猜它与此类似，但我无法让它起作用：

function getWebID(value){
          var mapWebID;
            switch (value){
                    case "ypop":
                      mapWebID= "c63cdcbbba034b62a2f3becac021b0a8";
                        break;
                  case "mhi":
                    mapWebID= "1e79439598494713b553f990a4040886";
                    break;
                }
            return mapWebID;
        }

Answer 1

你好像缺少一些东西。首先，您需要使用dojo / on模块或其他方式将select连接到您的函数。您还需要更新地图的Web地图ID，可能需要再次调用create map。您可能希望将该部分代码包装在函数中，并将Web地图ID作为参数传递给您，当您需要更改它时，您只需使用新参数调用该函数。

通过下拉菜单更改地图

1 个答案: