javascript - Turf js drawing perfect square with center point and radius - Stack Overflow

admin管理员组

文章数量:1391999

I am trying to generate p square polygon out of center point and radius. Like below.

bboxPolygon(square(bbox(circle(_circle.center, 0.5, { steps: 64 }))))

All the function is from the turf.js

I believe that should generate perfect square or at least close to square. However, it returns rectangular.

I am not sure this is turf library problem or I am using it wrong.

circle geojson

{
  "type": "Feature",
  "properties": {},
  "geometry": {
    "type": "Polygon",
    "coordinates": [
      [
        [
          -73.93524199999999,
          40.734656941636764
        ],
        [
          -73.93791238162646,
          40.73411472349626
        ],
        [
          -73.93986713367875,
          40.73263337851494
        ],
        [
          -73.94058248193825,
          40.730609876934174
        ],
        [
          -73.93986685239045,
          40.72858643688632
        ],
        [
          -73.93791210033818,
          40.72710521497083
        ],
        [
          -73.93524199999999,
          40.72656305836324
        ],
        [
          -73.93257189966181,
          40.72710521497083
        ],
        [
          -73.93061714760952,
          40.72858643688632
        ],
        [
          -73.92990151806174,
          40.730609876934174
        ],
        [
          -73.93061686632124,
          40.73263337851494
        ],
        [
          -73.93257161837353,
          40.73411472349626
        ],
        [
          -73.93524199999999,
          40.734656941636764
        ]
      ]
    ]
  }
}

bboxPolygon result

{
  "type": "Feature",
  "bbox": [
    -73.93928894163675,
    40.72656305836324,
    -73.93119505836323,
    40.734656941636764
  ],
  "properties": {},
  "geometry": {
    "type": "Polygon",
    "coordinates": [
      [
        [
          -73.93928894163675,
          40.72656305836324
        ],
        [
          -73.93119505836323,
          40.72656305836324
        ],
        [
          -73.93119505836323,
          40.734656941636764
        ],
        [
          -73.93928894163675,
          40.734656941636764
        ],
        [
          -73.93928894163675,
          40.72656305836324
        ]
      ]
    ]
  }
}

I am trying to generate p square polygon out of center point and radius. Like below.

bboxPolygon(square(bbox(circle(_circle.center, 0.5, { steps: 64 }))))

All the function is from the turf.js

I believe that should generate perfect square or at least close to square. However, it returns rectangular.

I am not sure this is turf library problem or I am using it wrong.

circle geojson

{
  "type": "Feature",
  "properties": {},
  "geometry": {
    "type": "Polygon",
    "coordinates": [
      [
        [
          -73.93524199999999,
          40.734656941636764
        ],
        [
          -73.93791238162646,
          40.73411472349626
        ],
        [
          -73.93986713367875,
          40.73263337851494
        ],
        [
          -73.94058248193825,
          40.730609876934174
        ],
        [
          -73.93986685239045,
          40.72858643688632
        ],
        [
          -73.93791210033818,
          40.72710521497083
        ],
        [
          -73.93524199999999,
          40.72656305836324
        ],
        [
          -73.93257189966181,
          40.72710521497083
        ],
        [
          -73.93061714760952,
          40.72858643688632
        ],
        [
          -73.92990151806174,
          40.730609876934174
        ],
        [
          -73.93061686632124,
          40.73263337851494
        ],
        [
          -73.93257161837353,
          40.73411472349626
        ],
        [
          -73.93524199999999,
          40.734656941636764
        ]
      ]
    ]
  }
}

bboxPolygon result

{
  "type": "Feature",
  "bbox": [
    -73.93928894163675,
    40.72656305836324,
    -73.93119505836323,
    40.734656941636764
  ],
  "properties": {},
  "geometry": {
    "type": "Polygon",
    "coordinates": [
      [
        [
          -73.93928894163675,
          40.72656305836324
        ],
        [
          -73.93119505836323,
          40.72656305836324
        ],
        [
          -73.93119505836323,
          40.734656941636764
        ],
        [
          -73.93928894163675,
          40.734656941636764
        ],
        [
          -73.93928894163675,
          40.72656305836324
        ]
      ]
    ]
  }
}

• javascript
• geojson
• turfjs

Share Improve this question Follow asked Mar 12, 2020 at 14:21 fiddlestfiddlest 1,30222 gold badges1919 silver badges4444 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

I think the problem is with the turf.square function. It is not doing what I would expect.

You should get something quite close to a square if you replace bboxPolygon(square(bbox(circle(_circle.center, 0.5, { steps: 64 }))))

with

bboxPolygon(bbox(circle(_circle.center, 0.5, { steps: 64 })))

Here is an example of what the outputs looks like. red is the circle, green is the output you get from using square and blue is the output of not using square.

If you look into the source code of square you will notice that it actually does not create a bbox which has equal distances on each side. However it creates a bbox which has equal change in degree. Since we are working in longitude and latitude, that will usually NOT be a polygon which is square in distance.

I am unsure why anyone would ever need this square function since i would find it way more usefull if it was square in distance, however I do not know if this is the intended behaviour.

TLDR Try bboxPolygon(bbox(circle(_circle.center, 0.5, { steps: 64 }))) instead

The above answer by @the_cheff is highly inefficient, because it iterates over 64 points to pute a rectangle. An alternative solution would be an implementation similar to how Turf implements a turf-circle:

const square = (center: [number, number], radius: number): GeoJSON.Feature<GeoJSON.Geometry> => {
   const cross = Math.sqrt(2 * radius ** 2);
   const coordinates = [];
   
   for (let i = 0; i < 4; i++) {
    coordinates.push(destination(center, cross, i * -360 / 4 + 45, {}).geometry.coordinates);
   }
   coordinates.push(coordinates[0]);

   return polygon([coordinates], {});
}

Hope this helps anybody in the future.

i also have the similar problem. I measure the length and width of the bounding box it turns out the same but the projection in Mapbox doesn't reflect a perfect square.

I read some article its says "MapBox uses EPSG:3857 any grid will bee distorted as you move away from the equator".

So i think the problem is about the projection, you can check this link to change mapbox projection based on your usecase:

本文标签： javascriptTurf js drawing perfect square with center point and radiusStack Overflow