0

So I saw an example of creating a polygon circle to scale. That is the actual distance from the point of interest to the how far the radius is.

  map.on('postrender', function (event) {
        const { projection, resolution, center, } = event.frameState.viewState;
        pointResolution = getPointResolution(projection.getCode(), resolution, center);
    });

Is it necessary to do this var newradius = radius / pointResolution because this does not give me the right distance in meters. It actually divides it. I don't know if this makes sense.

 function addCirclePolygon(coordinates) {
        if (vectorSource && vectorSource.getFeatures().length > 0) {
            vectorSource.clear();
        }
        var radius = $scope.options.radius;
        if (createPolygon) {
            **var radius = radius / pointResolution;** <---problem
            circle = new Feature(new Circle(coordinates, radius));
            circle.setStyle(new Style({
                stroke: new Stroke({
                    color: $scope.options.lcolor,
                    width: $scope.options.lwidth
                }),
                fill: new Fill({
                    color: $scope.options.fcolor ? $scope.options.fcolor : 'rgba(255, 255, 255, 0.0)'
                })
            }));
            var geom = circle.get('geometry');
            if (circle instanceof Circle) {
                // We don't like circles, at all.  So here we convert
                // drawn circles to their equivalent polygons.  
                circle.set('geometry', fromCircle(geom));
            }
            vectorSource.addFeature(circle);
            /**
             * Adds a line to show the radius in Units(meters as default)
             * Leaving this here for prosterity
             */
            if (circle) {
                let line = addRadius(circle);
                vectorSource.addFeature(line);
            }
        }
    }
Dennis Bauszus
  • 1,624
  • 2
  • 19
  • 44
Arthur Decker
  • 1,191
  • 3
  • 15
  • 45
  • 1
    If you need the radius to represent a true distance you need to adjust for the point resolution of the projection. For example in web mercator projection a circle at latitiude 60 degrees which appears to be the same size as one at the equator covers only half the distance on the ground (and Greenland looks as big as Africa but in reality is much smaller). – Mike Jan 25 '21 at 18:03
  • @Mike but if i divide the radius by the point resolution **var radius = radius / pointResolution** and get the true distance, it looks smaller than the actual distance on the map and anyone looking at the Map knows something is off. – Arthur Decker Jan 29 '21 at 15:16
  • You should use the circle center to obtain point resolution for each circle, not the view center – Mike Jan 29 '21 at 19:22
  • @Mike I need the point resolution to get the new radius to create the circle so i don't see how i can use a circle to create a circle – Arthur Decker Feb 02 '21 at 18:07
  • See this example with 100km radius circles at various latitudes https://codesandbox.io/s/simple-forked-vg9ix Note that for larger diameter circles the curvature of the Earth means they are not circular on a flat projection https://user-images.githubusercontent.com/49240900/105073806-77ab6600-5a7f-11eb-888e-26a39e311ebc.png and you should use geodesic circular polygons https://openlayers.org/en/latest/apidoc/module-ol_geom_Polygon.html#.circular – Mike Feb 02 '21 at 19:48

1 Answers1

0

tldr; You don't need getPointResolution to create circle polygons.

You can use geom.Polygon.circular to create the blue circle which has the correct radius.

new ol.geom.Polygon.circular([lng, lat], radius);

You will need to divide the radius by the resolution if you plan to create a circle (green) or create a polygon.fromCircle (red).

https://codepen.io/dbauszus-glx/pen/LYmjZvP

enter image description here

Dennis Bauszus
  • 1,624
  • 2
  • 19
  • 44