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

时间:2017-08-17 12:48:26

标签: arcgis esri arcgis-js-api

我是ArcGIS编程的新手,我尝试使用ArcGIS API for JavaScript基于此绘制多边形输入属性:https://developers.arcgis.com/javascript/3/jssamples/toolbar_draw.html

我试图通过弹出的窗口输出属性(弹出的窗口用于基本表单输入),使用事件绘制完成,基于此: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);
}

任何人都可以告诉我,如何使用其他方法输入属性?

1 个答案:

答案 0 :(得分:0)

您可以使用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);