OpenLayers OpenMaps Circle is not the correct size when drawn on the map

939 Views Asked by At

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

There are 0 best solutions below