OpenLayers 4 在地图上画圆。以米为单位的圆半径和使用纬度和经度的地图

Question

我不确定为什么，但可用的资源似乎对每个场景都非常具体，不会帮助其他人或不同的版本。

我想做的是：https://openlayers.org/en/latest/examples/custom-circle-render.html。但是这个例子似乎不起作用。除此之外，我想画一个圆，其中点以度数 (EPSG:4326) 指定，半径以米为单位。我的地图投影也是EPSG:4326。我最终尝试简化为以下内容：

    var vectorSource = new ol.source.Vector();
    var map = new ol.Map({
        target: document.getElementById('map'),
        view: new ol.View({
            projection: 'EPSG:4326',
            center: [0, 0],
            zoom: 5
        }),
        layers: [
            new ol.layer.Tile({
                projection: 'EPSG:4326',
                source: new ol.source.OSM()
            }),
            new ol.layer.Vector({
                projection: 'EPSG:4326',
                source: vectorSource,
            }),
        ],
    });

function MapAddRadius() {
        var circle = new ol.geom.Circle(
            ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857'),
            10
        );
        var circleFeature = new ol.Feature(circle);
        vectorSource.addFeature(circleFeature);
    }

确实画了一个圆，但尺寸不正确。这让我相信我使用了错误的投影，因为尺寸确实与度而不是米相关。或者有一些我不知道的功能可以使这更容易。我知道精度可能是个问题，但我画的是小圆圈，比如不到 1 公里，所以我不太担心。

请指出正确的方向。

Answer 1

ol.geom.Circle要求坐标和半径单位相同，所有几何体必须在视图投影中。示例中使用的自定义渲染器特定于 Circle 几何图形，并且由于早期版本中的遗漏将仅适用于 OpenLayers 6。如果您必须在 EPSG:4326 视图中具有 Circle 几何图形并且以米为单位尝试

    var circle = new ol.geom.Circle(
        ol.proj.transform([lon, lat], 'EPSG:4326', 'EPSG:3857'),
        radius
    ).transform('EPSG:3857', 'EPSG:4326');

或

    var circle = new ol.geom.Circle(
        [lon, lat],
        radius / ol.proj.getPointResolution('EPSG:4326', 1, [lon, lat], 'm')
    )

第二种方法将缩放半径以近似于南北纬度地面上的真实距离。

OpenLayers 4 在地图上画圆。以米为单位的圆半径和使用纬度和经度的地图

OpenLayers 4 Draw circle on map. Circle radius in meters and Map using latitude and longitude

openlayers