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; } } }

4.14 - How to create an ellipse? (JS)

JackGeo

I want to transform the table below into graphics on the map as ellipses:

I effectively want to create the 'Table to Ellipse' tool : Create Ellipse Tool ArcGIS 10 - YouTube

The only other thread I found was using the vertices taken from the draw tool:

api 4.11 - How to draw a ellipse? class' "draw.create('ellipse')" doesn't draw ellipse

UPDATE 1: I've created a codepen with one of the solutions given below, could someone provide assistance?

https://codepen.io/Jarviz/pen/yLNZqvQ?editors=1000

UPDATE 2: I've seen that some people recommended a geoprocessing server which then uses the 'Table to Ellipse' tool. Is this still a good idea?

Trouver plus de publications taguées avec

Accepted answers

Anonymous User

Hi Jack Jarvis‌,

Look like you are getting trouble with Math equation I gave as well.

Here is my codepen modified your codebase by adding getPointsForEllipse method to get ellipse points.

https://codepen.io/thanhtetaung/pen/ZEGPRmX

I just did quick ellipse only, so better check the distance of x-axis and y-axis based on what you need.

All comments

Noah Sager

Hi Jack, at this time we do not have plans to add support for ellipses in the 4x API. The thread you referenced is probably your best bet for now, unless someone else in the community has a better method.

JackGeo

Thank you for the response. Do you know of any sample data for ellipses that esri provide? Such as in a table format.

Anonymous User

Hi Jack Jarvis‌,

Since you know the center point, you just need to decide how far to go to east and north to draw the eclipse.

And find out a few point along the arc by using cartesian equation and create the clockwise ring from the north most point. And create the polygon by using these points into the ring.

Below is the formula you can reference.

Parametric Equation of an Ellipse - Math Open Reference

I used that logic and draw pie polygon (part of circle).

Below is my code, you just play the formula at the method pointWithRadiumDistance.

<SPAN class="comment token">//getting another coordinate based on bearing and distance is started</SPAN>
    degree2Radium<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>deg<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
      <SPAN class="keyword token">return</SPAN> deg <SPAN class="operator token">*</SPAN> <SPAN class="punctuation token">(</SPAN>Math<SPAN class="punctuation token">.</SPAN>PI <SPAN class="operator token">/</SPAN> <SPAN class="number token">180</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
    radium2Degree<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>rad<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
      <SPAN class="keyword token">return</SPAN> rad <SPAN class="operator token">*</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="number token">180</SPAN> <SPAN class="operator token">/</SPAN> Math<SPAN class="punctuation token">.</SPAN>PI<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
    pointWithRadiumDistance<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>lat1<SPAN class="punctuation token">,</SPAN> lon1<SPAN class="punctuation token">,</SPAN> bearing<SPAN class="punctuation token">,</SPAN> distance<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
      <SPAN class="keyword token">var</SPAN> rEarth <SPAN class="operator token">=</SPAN> <SPAN class="number token">6371.01</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//# Earth's average radius in km</SPAN>
      <SPAN class="keyword token">var</SPAN> epsilon <SPAN class="operator token">=</SPAN> <SPAN class="number token">0.000001</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//# threshold for floating-point equality</SPAN>
      <SPAN class="keyword token">var</SPAN> rlat1 <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">degree2Radium</SPAN><SPAN class="punctuation token">(</SPAN>lat1<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">var</SPAN> rlon1 <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">degree2Radium</SPAN><SPAN class="punctuation token">(</SPAN>lon1<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">var</SPAN> rbearing <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">degree2Radium</SPAN><SPAN class="punctuation token">(</SPAN>bearing<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="comment token">//input is nautical mile, the formula is based on km,.. need to convert first, nm to km 1 => 1.852</SPAN>
      <SPAN class="keyword token">var</SPAN> rdistance <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">(</SPAN>distance <SPAN class="operator token">*</SPAN> <SPAN class="number token">1.852</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">/</SPAN> rEarth<SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//# normalize linear distance to radian angle</SPAN>
      <SPAN class="comment token">//var rdistance = distance;</SPAN>
      <SPAN class="keyword token">var</SPAN> rlat <SPAN class="operator token">=</SPAN> Math<SPAN class="punctuation token">.</SPAN><SPAN class="token function">asin</SPAN><SPAN class="punctuation token">(</SPAN>
        Math<SPAN class="punctuation token">.</SPAN><SPAN class="token function">sin</SPAN><SPAN class="punctuation token">(</SPAN>rlat1<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">*</SPAN> Math<SPAN class="punctuation token">.</SPAN><SPAN class="token function">cos</SPAN><SPAN class="punctuation token">(</SPAN>rdistance<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">+</SPAN>
        Math<SPAN class="punctuation token">.</SPAN><SPAN class="token function">cos</SPAN><SPAN class="punctuation token">(</SPAN>rlat1<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">*</SPAN> Math<SPAN class="punctuation token">.</SPAN><SPAN class="token function">sin</SPAN><SPAN class="punctuation token">(</SPAN>rdistance<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">*</SPAN> Math<SPAN class="punctuation token">.</SPAN><SPAN class="token function">cos</SPAN><SPAN class="punctuation token">(</SPAN>rbearing<SPAN class="punctuation token">)</SPAN>
      <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">var</SPAN> rlon <SPAN class="operator token">=</SPAN> rlon1<SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>Math<SPAN class="punctuation token">.</SPAN><SPAN class="token function">cos</SPAN><SPAN class="punctuation token">(</SPAN>rlat<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">==</SPAN> <SPAN class="number token">0</SPAN> <SPAN class="operator token">||</SPAN> Math<SPAN class="punctuation token">.</SPAN><SPAN class="token function">abs</SPAN><SPAN class="punctuation token">(</SPAN>Math<SPAN class="punctuation token">.</SPAN><SPAN class="token function">cos</SPAN><SPAN class="punctuation token">(</SPAN>rlat<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token"><</SPAN> epsilon<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="comment token">//# Endpoint a pole</SPAN>
        rlon <SPAN class="operator token">=</SPAN> rlon1<SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN> <SPAN class="keyword token">else</SPAN> <SPAN class="punctuation token">{</SPAN>
        rlon <SPAN class="operator token">=</SPAN>
          <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN>rlon1 <SPAN class="operator token">-</SPAN>
              Math<SPAN class="punctuation token">.</SPAN><SPAN class="token function">asin</SPAN><SPAN class="punctuation token">(</SPAN>
                <SPAN class="punctuation token">(</SPAN>Math<SPAN class="punctuation token">.</SPAN><SPAN class="token function">sin</SPAN><SPAN class="punctuation token">(</SPAN>rbearing<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">*</SPAN> Math<SPAN class="punctuation token">.</SPAN><SPAN class="token function">sin</SPAN><SPAN class="punctuation token">(</SPAN>rdistance<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">/</SPAN> Math<SPAN class="punctuation token">.</SPAN><SPAN class="token function">cos</SPAN><SPAN class="punctuation token">(</SPAN>rlat<SPAN class="punctuation token">)</SPAN>
              <SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">+</SPAN>
              Math<SPAN class="punctuation token">.</SPAN>PI<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">%</SPAN>
            <SPAN class="punctuation token">(</SPAN><SPAN class="number token">2</SPAN> <SPAN class="operator token">*</SPAN> Math<SPAN class="punctuation token">.</SPAN>PI<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">-</SPAN>
          Math<SPAN class="punctuation token">.</SPAN>PI<SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN>

      <SPAN class="keyword token">var</SPAN> lat <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">radium2Degree</SPAN><SPAN class="punctuation token">(</SPAN>rlat<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">var</SPAN> lon <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">radium2Degree</SPAN><SPAN class="punctuation token">(</SPAN>rlon<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      <SPAN class="keyword token">return</SPAN> <SPAN class="punctuation token">[</SPAN>lon<SPAN class="punctuation token">,</SPAN> lat<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
    getPolygonByBearing<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>point<SPAN class="punctuation token">,</SPAN> bearingArr<SPAN class="punctuation token">,</SPAN> distance<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
      <SPAN class="keyword token">var</SPAN> polygon <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Polygon</SPAN><SPAN class="punctuation token">(</SPAN>
        <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SpatialReference</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
          wkid<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">4326</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> polygonRing <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN>
        <SPAN class="punctuation token">[</SPAN>point<SPAN class="punctuation token">.</SPAN>x<SPAN class="punctuation token">,</SPAN> point<SPAN class="punctuation token">.</SPAN>y<SPAN class="punctuation token">]</SPAN>
      <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
      array<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN>
        bearingArr<SPAN class="punctuation token">,</SPAN>
        lang<SPAN class="punctuation token">.</SPAN><SPAN class="token function">hitch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>bearDegree<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">var</SPAN> tmpPoint <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">pointWithRadiumDistance</SPAN><SPAN class="punctuation token">(</SPAN>
            point<SPAN class="punctuation token">.</SPAN>y<SPAN class="punctuation token">,</SPAN>
            point<SPAN class="punctuation token">.</SPAN>x<SPAN class="punctuation token">,</SPAN>
            bearDegree<SPAN class="punctuation token">,</SPAN>
            distance
          <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
          polygonRing<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN>tmpPoint<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>
      polygonRing<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>point<SPAN class="punctuation token">.</SPAN>x<SPAN class="punctuation token">,</SPAN> point<SPAN class="punctuation token">.</SPAN>y<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      polygon<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addRing</SPAN><SPAN class="punctuation token">(</SPAN>polygonRing<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">return</SPAN> polygon<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>‍</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><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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Anonymous User

Hi Jack Jarvis‌,

Quite interesting use case actually, let me know how's go .

JackGeo

I've reworded the original question to better explain what I'm trying to explain. I haven't had any luck with the provided solution from Than Aung.

Anonymous User

Hi Jack Jarvis‌,

I just give you the guideline how you can achieve. Anyway, I just take a look at your codepen.

There is one method usage which is require to fix.

The getPolygonByBearing method, second parameter should be array of angles.

One angle input will give you one point.

For your scenario=> eclipse, distance to travel shall be different based on the angle. (use the math at my earlier reply and find those)

After you collect a few points, you can feed points into your polygonEllipse variable.

 <SPAN class="keyword token">const</SPAN> polygonEllipse <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
          type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"polygon"</SPAN><SPAN class="punctuation token">,</SPAN>
          rings<SPAN class="punctuation token">:</SPAN> <SPAN class="token function">getPolygonByBearing</SPAN><SPAN class="punctuation token">(</SPAN>
          <SPAN class="punctuation token">{</SPAN>
            x<SPAN class="punctuation token">:</SPAN> center_lat<SPAN class="punctuation token">,</SPAN>
            y<SPAN class="punctuation token">:</SPAN> center_lon
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
          <SPAN class="punctuation token">[</SPAN><SPAN class="number token">90</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">80</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">70</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">60</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">50</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">40</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">30</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">20</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">10</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
          <SPAN class="number token">500</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>

JackGeo

Hi Than Aung,

Thank you that helps a lot, I think I'm slowly starting to grasp this. I'm trying to work out the last piece of the puzzle, the equation to get 'd' when I know the values for 'x', 'y' and 't'.

Looking at the equation you reference:

Parametric Equation of an Ellipse - Math Open Reference

I don't see any reference to distance on the equation in order to find a point on the curve of the ellipse?

Anonymous User

Hi Jack Jarvis‌,

Look like you are getting trouble with Math equation I gave as well.

Here is my codepen modified your codebase by adding getPointsForEllipse method to get ellipse points.

https://codepen.io/thanhtetaung/pen/ZEGPRmX

I just did quick ellipse only, so better check the distance of x-axis and y-axis based on what you need.

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.