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?

Finde mehr Beiträge mit dem Tag

Accepted answers

RobertScheitlin__GISP

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

RobertScheitlin__GISP

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.

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

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