Question

我遇到了一个问题，即尝试动态创建可以使用div构建和删除的图层作为在图层创建时添加的按钮。以下是代码的用法：

//build point graphics layer
graphicsLayerInfo = this._addNewExcelLayerToList(plotArray.length);
graphicsLyr = new GraphicsLayer( { id:graphicsLayerInfo.graphicsLayerID} );
this.map.add(graphicsLyr);
on(dojo.byId(graphicsLayerInfo.removeButtonID), "click" , lang.hitch(this, this._removeExcelLayer, {layerID: graphicsLayerInfo.graphicsLayerID, buttonLayerID: graphicsLayerInfo.currentLayerInfo}) );
...

和用于构建DIV /按钮的函数

_addNewExcelLayerToList: function (pointCount) {
    if (this.debugMOde) {
        console.info( this.name + ' - ADD NEW EXCEL LAYER called.' );
    }

    this.layerCount++;
    currentLayerID = 'graphicsLayer' + this.layerCount;
    graphicsLayerID = this.name + '_gLyr' + this.layerCount;
    removeButtonID = "removeGraphicsLayer" + this.layerCount;
    this.layerList.push(currentLayerID);
    var layerInfo = "Number of Features: 1 Line";
    if (pointCount) {
        layerInfo = "Number of Features: " + pointCount;
    }

    content = "<div id ='" + currentLayerID + "'" +
                    "style='width: 95%;" +
                           "height: 16px;" +
                           "line-height: 16px" +
                           "verticle-align: middle;" +
                           "padding: 5px;" +
                           "background-color: #000000;'" +
              ">" +
                  "<div style='float:left;'>" +
                      "<div style="float: left;" +
                                  "width: 20px;" +
                                  "line-height: 20px;" +
                      ">" +
                          "<img src='./js/Upload/images/excel.png'" +
                               "style='position: absolute;" +
                                      "top: 0;" +
                                      "bottom: 0;" +
                                      "margin-top: -10px;" +
                                      "width: 20px;" +
                                      "vertical-align: middle;'" +
                          "></img>" +
                      "</div>
                      "<div style='float:left;" +
                                  "font-size: 0.9em;" +
                                  "color: #ffffff;'" +
                      ">" +
                          "Layer" + this.layerCount + ": " + layerInfo +
                      "</div>" +
                  "</div>" +
                  "<div id='" + removeButtonID + "'" +
                            "data-dojo-attach-point='" + removeButtonID + "'" +
                            "name='" + removeButtonID + "'" +
                            "id='" + removeBUttonID + "'" +
                            "style='float: right;" +
                                   "width: 13px;" +
                                   "height: 13px;" +
                                   "cursor: pointer;" +
                                   "border-radius: 50%;" +
                                   "border: 2px; solid #ffffff;" +
                                   "background-color: #ff0000;" +
                                   "color: #ffffff;" +
                                   "font-weight: 300;" +
                                   "font-size: 17px;" +
                                   "font-family: Arial, sans-serif;" +
                                   "text-align: center;'" +
                  ">" +
                      "X" +
                  "</div>" +
              "</div>";

    layerListDiv.innerHTML += content;

    graphicsLayerInfo = {
        removeButtonID: removeButtonID,
        graphicsLayerID: graphicsLayerID,
        currentLayerID: currentLayerID
    }

    return graphicsLayerInfo
 }

以及删除DIV的功能

_removeExcelLayer: function(layerInfo) {
    if (this.debugMode) {
        console.info( this.name + " - REMOVE EXCEL LAYER called.");
    }

    this.map.removeLayer( this.map.getLayer(layerInfo.layerID) );
    dojo.destroy(layerInfo.buttonLayerID);
}

如果我只创建一个图层，它会删除图层。如果我创建多个，则只会移动最后创建的图层。所有其他＆＃39; removeButton都不能工作。

关于如何根据按钮单独删除图层的任何想法？

Answer 1

好吧，在一位同事的帮助下，我得到了它的工作，但没有一个单独的事件处理程序。我使用domConstruct来创建它自己的影响区域：

domConstruct.create("div", { innerHTML: content }, layerListDiv);

而不是笔直：

layerListDiv.innerHTML += content;

感谢您对ManjunathaMuniyappa的尝试。

Dojo dijit动态添加Div按钮

1 个答案: