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>

由于正在使用的数据受密码保护，因此我无法为您提供小提琴。希望我在某些时候搞砸了我的代码。

问题/问题：为什么复选框中没有显示复选框，而是图层的标题以及如何解决？

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"));

这对你也有用。您不需要在之后放置它（因此也可以删除它下面的行）。

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

2 个答案: