0

I am attempting to draw a circle on the map with a radius in KM. However, the circle isn't drawn the correct size.

If call the plotPoint({'lat'=>35.055615,'lon'=>-85.311179,'radius'=>1000})

You can see that the circle is displayed, however, it's not immediately apparent that the circle is too small.

enter image description here

I verified the size by visiting:

https://appelsiini.net/circles/?c=35.055615,-85.311179,1000

You can see that the circle is larger and encompasses more area. Moving beyond Manufactures Road in the examples.

enter image description here

I know that my version is smaller, because I have been working on trilateration points. While my points appear in the correct location and the calculations are all correct, VISUALLY, the circles don't touch.

Does anyone know why my circles are smaller?

Code

let attribution = new ol.control.Attribution({
    collapsible: true
});

let center = ol.proj.transform([center_point[0], center_point[1]], 'EPSG:4326', 'EPSG:3857');

let baseMapLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
});
let map_view = new ol.View({
    center: center,
    maxZoom: 18,
    zoom: 12
});
let map = new ol.Map({
    controls: ol.control.defaults({attribution: false}).extend([attribution]),
    layers: [baseMapLayer],
    loadTilesWhileAnimating: true,
    target: 'map',
    view: map_view,
});

let features = [];
let vectorSource = new ol.source.Vector({
    projection: 'EPSG:4326'
});
let vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    updateWhileAnimating: true,
    updateWhileInteracting: true,
});

function buildFeature(point) {
    console.log(point.lat, point.lon);

    let feature = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.transform([point.lon, point.lat], 'EPSG:4326', 'EPSG:3857')),
    });

    let circleStyle = new ol.style.Style({
        geometry: function (feature) {
            return  new ol.geom.Circle(feature.getGeometry().getCoordinates(), point.radius);
        },
        stroke: new ol.style.Stroke({color: '#2E86C1', width: 2})
    });


    feature.setStyle(circleStyle);

    return feature;
}


function plotPoint(point) {
    vectorSource.addFeature(buildFeature(point));
    map.addLayer(vectorLayer);
}
user-44651
  • 3,924
  • 6
  • 41
  • 87
  • where call plotPoint – LDS Dec 19 '19 at 05:32
  • 3
    EPSG:3857 projection units are not the same as meters on the ground unless you are at the equator. At 60 degrees latitude things appear twice the size they would at the equator. You need to adjust the radius accordingly `point.radius / ol.proj.getPointResolution('EPSG:3857', 1, feature.getGeometry().getCoordinates())` – Mike Dec 19 '19 at 09:44
  • @Mike That was it. But where in the documentation would I have found that? – user-44651 Dec 19 '19 at 15:17

0 Answers0