Hello,
I would like some help please.
I have an application which enables a user to draw a polyline on a map. Through JavaScript, on draw end this polyline is added as a graphic on a graphics layer. What I can't figure out is how can a user edit the vertices of this polyline once it has been added to the GraphicsLayer?
This is my code so far:
if (evt.geometry.type === "polyline") { if (map.getScale() < MAP_SCALE) { var symbol = new SimpleMarkerSymbol(); var fillSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NULL, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 0, 128]), 3)); symbol = fillSymbol; polylineLayerGL = new GraphicsLayer(); pipeGraphic = new Graphic(evt.geometry, symbol); polylineLayerGL.add(pipeGraphic); map.addLayer(polylineLayerGL); pipeCount += 1; //custAttribInsp(evt); } else { return; }
To edit:
function initEditor(evt) { console.log("initEditing", evt); // var map = this; var currentLayer = null; var layers = arrayUtils.map(evt.layers, function(result) { return result.layer; }); console.log("layers", layers); var editToolbar = new Edit(map); editToolbar.on("deactivate", function(evt) { currentLayer.applyEdits(null, [evt.graphic], null); }); arrayUtils.forEach(layers, function(layer) { var editingEnabled = false; layer.on("dbl-click", function(evt) { event.stop(evt); if (editingEnabled === false) { editingEnabled = true; editToolbar.activate(Edit.EDIT_VERTICES , evt.graphic); } else { currentLayer = this; editToolbar.deactivate(); editingEnabled = false; } }); layer.on("click", function(evt) { event.stop(evt); if (evt.ctrlKey === true || evt.metaKey === true) { //delete feature if ctrl key is depressed layer.applyEdits(null,null,[evt.graphic]); currentLayer = this; editToolbar.deactivate(); editingEnabled=false; } }); }); var templatePicker = new TemplatePicker({ featureLayers: layers, rows: "auto", columns: 2, grouping: true, style: "height: auto; overflow: auto;" }, "templatePickerDiv"); templatePicker.startup(); var drawToolbar = new Draw(map); var selectedTemplate; templatePicker.on("selection-change", function() { if( templatePicker.getSelected() ) { selectedTemplate = templatePicker.getSelected(); } switch (selectedTemplate.featureLayer.geometryType) { case "esriGeometryPoint": drawToolbar.activate(Draw.POINT); break; case "esriGeometryPolyline": drawToolbar.activate(Draw.POLYLINE); break; case "esriGeometryPolygon": drawToolbar.activate(Draw.POLYGON); break; } }); drawToolbar.on("draw-end", function(evt) { drawToolbar.deactivate(); editToolbar.deactivate(); var newAttributes = lang.mixin({}, selectedTemplate.template.prototype.attributes); var newGraphic = new Graphic(evt.geometry, null, newAttributes); selectedTemplate.featureLayer.applyEdits([newGraphic], null, null); }); }
However, nothing is happening. Any suggestions please.@
Thanks
frank