javascript - OpenLayers OpenMaps Circle 在地图上绘制时大小不正确

Question

我正在尝试在地图上绘制一个以 KM 为半径的圆圈。但是，圆圈​​的大小不正确。

如果调用plotPoint({'lat'=>35.055615,'lon'=>-85.311179,'radius'=>1000})

您可以看到显示了圆圈，但是，圆圈​​太小并不是很明显。

我通过访问验证了大小：

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

您可以看到圆圈更大并且包含更多区域。在示例中超越制造之路。

我知道我的版本更小，因为我一直在研究三边测量点。虽然我的点出现在正确的位置并且计算都是正确的，但从视觉上看，圆圈没有接触。

有谁知道为什么我的圈子变小了？

代码

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

标签： javascriptopenlayersopenlayers-3openmap