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?
Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
