Comment saisir un attribut pour le polygone à l'aide d'API ArcGIS pour Javacript?

Question

Je suis nouveau à la programmation ArcGIS, j'essaie d'entrer un attribut pour le polygone avec un script draw en utilisant l'API ArcGIS pour JavaScript en fonction de ceci: https://developers.arcgis.com/javascript/3/jssamples/toolbar_draw.html. J'essaie d'entrer l'attribut via windows pop up (l'affichage des fenêtres était pour l'entrée de base) en utilisant l'événement draw complete, basé sur ceci: https://developers.arcgis.com/javascript/3/jsapi/draw-amd.html#event-draw-complete, mais j'échoue parce que je ne sais pas comment l'utiliser. Mon code était comme ceci:

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

Quelqu'un peut me dire, comment entrer l'attribut avec une autre méthode?

Answer 1

Vous pouvez créer un formulaire avec le framework dojo, car l'API JavaScript ArcGis est basée sur ce framework.

Prenons cet exemple de Dojo site: https://dojotoolkit.org/reference-guide/1.10/dijit/form/Form.html

Ce formulaire vous demande 2 valeurs, un nom et une date de naissance. Supposons que cela corresponde aux attributs de votre polygone. Maintenant, adaptons-le à vos besoins.

D'abord, nous prenons le code HTML que nous devons construire notre formulaire

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

Maintenant, le code javascript pour gérer le formulaire. Assurez-vous de le fusionner avec votre code, ne le remplacez pas.

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

Enfin, modifiez les dernières lignes de votre code, il attache les attributs de la forme au polygone, tel que décrit sur l'API doc:

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