如何使用ArcGIS API for Javascript输入多边形的属性？

Question

我是ArcGIS编程的新手，我正在尝试使用ArcGIS API for JavaScript为绘图脚本输入多边形的属性，基于此：https://developers.arcgis.com/javascript/3/jssamples/toolbar_draw.html。

我尝试通过Windows弹出窗口弹出窗口（弹出的窗口用于基本窗体输入），使用事件绘制完成，基于此：https://developers.arcgis.com/javascript/3/jsapi/draw-amd.html#event-draw-complete，但我失败了因为我不知道如何使用它。我的代码是这样的：

function initToolbar() {
  tb = new Draw(map);
  tb.on("draw-complete", addToMap);

  // event delegation so a click handler is not
  // needed for each individual button
  on(dom.byId("tool"), "click", function(evt) {
    if (evt.target.id == "tool") {
      return;
    }
    var tool = evt.target.id.toLowerCase();
    //map.hideZoomSlider();
    tb.activate(tool);
  });
}

function addToMap(evt) {
  tb.deactivate();
  //map.showZoomSlider();
  switch (evt.geometry.type){
    case "point":
    case "multipoint":
      symbol = new SimpleMarkerSymbol();
      break;
    case "polyline":
      symbol = new SimpleLineSymbol();
      break;
    default:
      symbol = new SimpleFillSymbol();
      break;
  }
  var graphic = new Graphic(evt.geometry, symbol);
  map.graphics.add(graphic);
}

任何人都可以告诉我，如何用另一种方法输入属性？

Answer 1

您可以使用dojo框架创建表单，因为ArcGis Javascript API基于此框架。

让我们从Dojo网站上获取这个例子：https://dojotoolkit.org/reference-guide/1.10/dijit/form/Form.html

此表格要求2个值，名称和出生日期。让我们假设它对应于多边形的属性。现在，让我们根据您的需求进行调整。

首先，我们采用构建表单所需的html

<div data-dojo-type="dijit/form/Form" id="myForm" data-dojo-id="myForm" encType="multipart/form-data" action="" method="">
<table style="border: 1px solid #9f9f9f;" cellspacing="10">
  <tr>
    <td><label for="name">Name:</label></td><td><input type="text" id="name" name="name" required="true" data-dojo-type="dijit/form/ValidationTextBox"/></td>
  </tr>
  <tr>
    <td><label for="dob">Date of birth:</label></td><td><input type="text" id="dob" name="dob" data-dojo-type="dijit/form/DateTextBox"/></td>
  </tr>
</table>

<button data-dojo-type="dijit/form/Button" type="submit" name="submitButton" value="Submit">Submit</button>
<button data-dojo-type="dijit/form/Button" type="reset">Reset</button>

现在，javascript代码来处理表单。确保将其与您的代码合并，不要替换它。

require(["dojo/parser", "dojo/on", "dijit/registry", "dijit/form/Form", "dijit/form/Button", "dijit/form/ValidationTextBox", "dijit/form/DateTextBox", "dojo/domReady!"],
function(parser, on, registry) {
  var attributes = {};
  parser.parse();
  var myForm = registry.byId("myForm");
  on(myForm, "submit", function(){
    if(this.validate()){
      attributes = myForm.getValues();
      delete attributes['submitButton'];
      return true;
    }else{
      alert('Form contains invalid data. Please correct first');
      return false;
    }
  });

  on(myForm, "reset", function(){
    return confirm('Press OK to reset widget values');
  });
});

最后，修改代码的最后几行，以便将表单中的属性附加到多边形，如API文档中所述：

var graphic = new Graphic(evt.geometry, symbol, attributes);
map.graphics.add(graphic);