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

Question

我正在使用 ArcGis 服务来创建一个，我们称之为“简单 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>

我不可能为您提供一个小提琴，因为正在使用的数据受密码保护。希望我只是在某个时候弄乱了我的代码。

问题/问题：为什么复选框没有显示在标记中，而是图层的标题，我该如何解决这个问题？

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
           ) {
                //...
             })

删除所有我搬进来的文件后，在尝试满足要求时，它看起来像这样：

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
           ) {
                //...
             })

并且复选框完美呈现。

Answer 2

通常当我以编程方式创建小部件时，我会立即提供 DOM 节点，例如：

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;
    }

}, construct.create("input", null, "toggle", "after"));

这也可能对您有用。之后就不需要再放置了（所以下面的行也可以去掉）。