javascript - 如何使用 Dojo 创建复选框列表？

Question

我正在使用 ArcGis 服务来创建一个我们称之为“Simple WebGis”的服务。

一方面，我想获取所有 FeatureLayers 并创建一个带有复选框的目录，以打开和关闭图层可见性。结果，所有图层都显示为文本，但缺少复选框，并且我没有收到指示故障位置的 javascript 错误。

这是有问题的代码:

 var map;
 var tocLayers = [];
 require([
            "esri/map", "esri/layers/FeatureLayer", "esri/dijit/Legend",
            "dojo/_base/array", "dojo/parser", "dojo/dom", "dojo/dom-construct",
            "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
            "dijit/layout/AccordionContainer", "dojo/domReady!", "dijit/form/CheckBox"
          ], function (
            Map, FeatureLayer, Legend,
            arrayUtils, parser, dom, construct, CheckBox
          ) {
              parser.parse();
              window.infoTemplate = new esri.InfoTemplate("Attributes", "${*}");
              map = new Map("map", {
                  basemap: "topo",
                  center: [8.7, 50.0],
                  zoom: 10
              });

              //defining layers here - omitted         

              tocLayers.push({ layer: noll, title: 'Layer1' });
              tocLayers.push({ layer: eins, title: 'Layer2' });
              tocLayers.push({ layer: zwei, title: 'Layer3' });
              tocLayers.push({ layer: drei, title: 'Layer4' });
              tocLayers.push({ layer: vier, title: 'Layer5' });
              tocLayers.push({ layer: fuenf, title: 'Layer6' });
              tocLayers.push({ layer: sechs, title: 'Layer7' });
              tocLayers.push({ layer: sieb, title: 'Layer8' });

              //add the legend - omitted

              //add check boxes 
              map.on('layers-add-result', function (results) {
                  arrayUtils.forEach(tocLayers, function (layer) {
                      var layerName = layer.title; console.log(layer.title);
                      var checkBox = new CheckBox({
                          name: "checkBox" + layer.layer.id,
                          value: layer.layer.id,
                          checked: layer.layer.visible,
                          onChange: function (evt) {
                              var clayer = map.getLayer(this.value);
                              clayer.setVisibility(!clayer.visible);
                              this.checked = clayer.visible;
                          }

                      });
                      //add the check box and label to the toc
                      construct.place(checkBox.domNode, dom.byId("toggle"), "after");
                      var checkLabel = construct.create('label', { 'for': checkBox.name, innerHTML: layerName }, checkBox.domNode, "after");
                      construct.place("<br />", checkLabel, "after");
                  });
              });

              map.addLayers([noll, eins, zwei, drei, vier, fuenf, sechs, sieb]);

          });

相关标记:

<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Table of Contents'">
    <span style="padding:10px 0;">LayerVisibility</span>
    <div id="toggle" style="padding: 2px 2px;"></div>

在查看呈现的标记时会看到:

<div class="dijitBorderContainer dijitContainer" id="dijit_layout_BorderContainer_2" widgetid="dijit_layout_BorderContainer_2" style="padding: 0px;"></div>
<label for="checkBoxgraphicsLayer3">Layer3</label>

我不可能给你提供一个 fiddle ，因为正在使用的数据是受密码保护的。希望我只是在某个时候搞砸了我的代码。

问题/问题:为什么标记中不显示复选框，而是层的标题，我该如何解决？

Answer 1

错误位于我的 require() 函数的开头。

原文:

require(["esri/map", "esri/layers/FeatureLayer", "esri/dijit/Legend",
         "dojo/_base/array", "dojo/parser", "dojo/dom", "dojo/dom-construct",
         "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
         "dijit/layout/AccordionContainer", "dojo/domReady!", "dijit/form/CheckBox"
        ], function (
               Map, FeatureLayer, Legend,
               arrayUtils, parser, dom, construct, CheckBox
           ) {
                //...
             })

在移除我搬进来的所有 fideling 后，在尝试满足要求时它看起来像这样:

require(["esri/map", "esri/layers/FeatureLayer", "esri/dijit/Legend",
         "dojo/_base/array", "dojo/parser", "dojo/dom", "dojo/dom-construct",
         "dijit/form/CheckBox","dojo/domReady!"
        ], function (
               Map, FeatureLayer, Legend,
               arrayUtils, parser, dom, construct, CheckBox
           ) {
                //...
             })

并且复选框呈现完美。