nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

JS API 4.17 sketch widget rectangle, how to get height width

How can you get height and width in screen pixels of a rectangle drawn with the sketch widget?

Trouver plus de publications taguées avec

Accepted answers

Get the geometry (extent) use the xmin, ymin, xmax, ymax to create a points then the views toScreen method to get the point screen coordinates and do the math.

All comments

Hi there,

You can listen to create event on the sketch. When the create operation is completed, check the tool that created a shape, then divide the rectangle polygon extent's width and height by the view resolution. This will give you the rectangle polygon's extent width and heights in pixels.

sketch<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"create"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
  <SPAN class="comment token">// when draw rectangle create event is completed</SPAN>
  <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">.</SPAN>state <SPAN class="operator token">===</SPAN> <SPAN class="string token">"complete"</SPAN> <SPAN class="operator token">&&</SPAN> event<SPAN class="punctuation token">.</SPAN>tool <SPAN class="operator token">===</SPAN> <SPAN class="string token">"rectangle"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
     console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN>width <SPAN class="operator token">/</SPAN> view<SPAN class="punctuation token">.</SPAN>resolution<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"pixels"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
     console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">.</SPAN>graphic<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN>height <SPAN class="operator token">/</SPAN> view<SPAN class="punctuation token">.</SPAN>resolution<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"pixels"</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="punctuation token">;</SPAN>‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Here is a doc for the MapView.resolution.

-Undral

Get the geometry (extent) use the xmin, ymin, xmax, ymax to create a points then the views toScreen method to get the point screen coordinates and do the math.

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.