Hello Everyone,
Can someone clarify if it is possible to draw features using SketchViewModel like in this sample Sketch temporary geometries | ArcGIS API for JavaScript 4.7 and then using applyEdits function to save the polygons as a feature layer?
Thank you,
Deepanjana
Deepanjana,
There should be no issue using the draw-complete event to create a graphic and add it to a layer using the applyEdits method of a FeatureLayer.
Robert,
Thank you - your suggestion worked. I have a follow-up question. I am now trying to update the geometry of the feature when it is clicked using sketchViewModel.update():
view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitTest</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>response<SPAN class="punctuation token">.</SPAN>results<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">></SPAN> <SPAN class="number token">0</SPAN> <SPAN class="operator token">&&</SPAN> response<SPAN class="punctuation token">.</SPAN>results<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> feature <SPAN class="operator token">=</SPAN> response<SPAN class="punctuation token">.</SPAN>results<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">;</SPAN> <SPAN class="token function">selectFeature</SPAN><SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">[</SPAN>featureLayer<SPAN class="punctuation token">.</SPAN>objectIdField<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> inputDescription<SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">=</SPAN> feature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">[</SPAN><SPAN class="string token">"TITLE"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN> inputAddress<SPAN class="punctuation token">.</SPAN>value <SPAN class="operator token">=</SPAN> feature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">[</SPAN><SPAN class="string token">"ADDRESS"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN> attributeEditing<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>display <SPAN class="operator token">=</SPAN> <SPAN class="string token">"block"</SPAN><SPAN class="punctuation token">;</SPAN> updateInstructionDiv<SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>display <SPAN class="operator token">=</SPAN> <SPAN class="string token">"none"</SPAN><SPAN class="punctuation token">;</SPAN> sketchViewModel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">update</SPAN><SPAN class="punctuation token">(</SPAN>feature<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
In the corresponding update-start and update-complete events, I am trying to updateFeatures of applyEdits method:
sketchViewModel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"update-complete"</SPAN><SPAN class="punctuation token">,</SPAN> modifyGraphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> sketchViewModel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"update-start"</SPAN><SPAN class="punctuation token">,</SPAN> modifyGraphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">modifyGraphic</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> geometry <SPAN class="operator token">=</SPAN> evt<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> modifyPoly <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> geometry<SPAN class="punctuation token">:</SPAN> geometry<SPAN class="punctuation token">,</SPAN> symbol<SPAN class="punctuation token">:</SPAN> polygonSymbol<SPAN class="punctuation token">,</SPAN> attributes<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN><SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> edits <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> updateFeatures<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>modifyPoly<SPAN class="punctuation token">]</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">applyEdits</SPAN><SPAN class="punctuation token">(</SPAN>edits<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
You are capturing the graphic that the user clicks on before you do sketchViewModel<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">.</SPAN><SPAN class="" style="color: #d74444; border: 0px; font-weight: inherit; font-size: 14px;">update </SPAN>so you should update the geometry of that feature/graphic using the evt.geometry and then pass that graphic to the applyEdits not a new graphic.
sketchViewModel<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">.</SPAN><SPAN class="" style="color: #d74444; border: 0px; font-weight: inherit; font-size: 14px;">update </SPAN>
Thanks Robert.
My understanding is that in:
sketchViewModel<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">.</SPAN><SPAN class="" style="color: #d74444; border: 0px; font-weight: inherit;">update</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">(</SPAN>feature<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">.</SPAN>geometry<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">)</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">;</SPAN>
feature.geometry already has the geometry of the selected feature obtained from evt click before the update-start and update-complete events are triggered. I have changed modifyGraphic() to:
sketchViewModel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"update-complete"</SPAN><SPAN class="punctuation token">,</SPAN> modifyGraphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> sketchViewModel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"update-start"</SPAN><SPAN class="punctuation token">,</SPAN> modifyGraphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">modifyGraphic</SPAN><SPAN class="punctuation token">(</SPAN>evt<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> editFeature<SPAN class="punctuation token">.</SPAN>geometry <SPAN class="operator token">=</SPAN> evt<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> edits <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> updateFeatures<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>editFeature<SPAN class="punctuation token">]</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">applyEdits</SPAN><SPAN class="punctuation token">(</SPAN>edits<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN>
where editFeature is a global var. However, the behavior of resizing the graphic still remains the same --- I can click and drag the vertices but when I click outside the graphic, the changes are gone (not registered in the featureLayer). Is there a code snippet/example illustrating how applyEdits updateFeatures work with sketchViewModel update?
Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
