OpenLayers4 EPSG:4326投影地图绘制米单位半径圆形问题问询

问题根源 #

你的图层和视图都采用EPSG:4326投影，创建Circle时用的EPSG:3857坐标系下的米半径，在添加到矢量源时会被OpenLayers自动转换为EPSG:4326的坐标单位（度），所以出现了尺寸不符合预期的问题。

适配方案（精度要求不高的小半径场景适用） #

直接计算当前圆心纬度下，1米对应的经纬度偏移量，直接创建EPSG:4326投影下的Circle几何即可，修改后的MapAddRadius函数代码如下：

function MapAddRadius() {
    // 圆心经纬度（EPSG:4326）
    const centerLon = 0;
    const centerLat = 0;
    // 自定义半径，单位为米，示例为1000米即1km
    const radiusMeter = 1000;
    
    // 纬度方向1度约等于111319米
    const latDegreePerMeter = 1 / 111319;
    // 经度方向1度对应的米数随纬度变化，需要乘以纬度弧度的余弦值
    const lonDegreePerMeter = 1 / (111319 * Math.cos(centerLat * Math.PI / 180));
    
    // 小半径场景下取两个方向的平均换算系数即可满足精度要求
    const avgDegreePerMeter = (latDegreePerMeter + lonDegreePerMeter) / 2;
    const radiusDegree = radiusMeter * avgDegreePerMeter;
    
    // 直接创建EPSG:4326下的圆形
    const circle = new ol.geom.Circle([centerLon, centerLat], radiusDegree);
    const circleFeature = new ol.Feature(circle);
    vectorSource.addFeature(circleFeature);
}

更高精度可选方案（无需改动现有图层投影） #

如果需要更准确的圆形边界，可以用ol.geom.Polygon.circular方法直接生成指定米半径的圆形面，自动适配EPSG:4326投影：

function MapAddRadius() {
    const centerLonLat = [0, 0];
    const radiusMeter = 1000;
    // 直接生成EPSG:4326投影下、米为单位半径的圆形多边形
    const circlePolygon = ol.geom.Polygon.circular(
        'EPSG:4326',
        centerLonLat,
        radiusMeter,
        64 // 边数，值越高圆形越平滑
    );
    const circleFeature = new ol.Feature(circlePolygon);
    vectorSource.addFeature(circleFeature);
}

内容的提问来源于stack exchange，提问作者F34R