为何用OpenLayers 7绘制的圆半径远超预期？

核心问题是坐标单位不匹配：由于启用了useGeographic()，地图采用EPSG:4326地理投影（单位为度），而ol.geom.Circle的半径参数在该投影下默认以度为单位，并非米。1度约等于111公里，传入10（度）自然会生成覆盖上千公里的大圆，与你需要的10米小圆相差约10^5倍。

解决方案 #

推荐使用ol.geom.Polygon.circular()方法创建圆，该方法专门适配地理投影（经纬度），可直接传入米为单位的半径，内部会根据地球曲率自动计算对应的经纬度范围，生成多边形模拟的圆（边数可自定义，数值越大越接近正圆）。

修改后的代码示例 #

替换原drawCircle方法，实现正确的米级半径圆绘制：

<script src="https://cdn.jsdelivr.net/npm/ol@v7.3.0/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v7.3.0/ol.css" />
<body>
    <div id="map" style="width: 800px; height: 600px"></div>
    <script>
        class Map {
            map

            constructor(on, initialCoordinate) {
                const { Map, View } = ol
                const { Tile } = ol.layer
                const { useGeographic } = ol.proj
                const { OSM } = ol.source
                const { Fill, Style, Stroke } = ol.style

                const target = document.getElementById(on)
                target.coordinate = initialCoordinate

                useGeographic()

                const pointLayerSource = new ol.source.Vector({ features: [] })
                const pointLayer = new ol.layer.Vector({
                    source: pointLayerSource,
                })

                const tilesLayer = new Tile({ source: new OSM() })

                this.map = new Map({
                    layers: [tilesLayer, pointLayer],
                    view: new View({
                        center: [-49.0766336, -26.8992512],
                        zoom: 12,
                        maxZoom: 19,
                    }),
                    target,
                })

                if (initialCoordinate) {
                    const feature = new ol.Feature({
                        geometry: new ol.geom.Point(initialCoordinate),
                    })
                    pointLayerSource.addFeature(feature)
                    this.center(initialCoordinate)
                }

                target.map = this
            }

            center(at) {
                this.map.getView().animate({
                    center: at,
                    zoom: 18,
                })
            }

            drawCircle(center, radius) {
                const map = this.map
                // 创建米级半径的圆，第三个参数为多边形边数（可选，默认32）
                const circlePolygon = ol.geom.Polygon.circular(center, radius, 64)
                const circleFeature = new ol.Feature({
                    geometry: circlePolygon,
                })
                // 设置样式让圆更醒目
                circleFeature.setStyle(new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: 'red',
                        width: 2
                    }),
                    fill: new ol.style.Fill({
                        color: 'rgba(255,0,0,0.1)'
                    })
                }))
                const vectorSource = new ol.source.Vector({
                    features: [circleFeature],
                })
                const vectorLayer = new ol.layer.Vector({
                    source: vectorSource,
                })
                map.addLayer(vectorLayer)
                this.center(center)
            }
        }
        const map = new Map('map')
        // 直接传入10米半径，得到正确大小的圆
        const correctCircle = map.drawCircle([-49.0766336, -26.8992512], 10)
    </script>
</body>

补充说明 #

• ol.geom.Polygon.circular()的第三个参数控制多边形边数，数值越大圆边缘越平滑，默认32已满足日常需求。
• 若坚持使用ol.geom.Circle，可手动将米转换为度（仅近似值，高纬度地区误差较大）：

  const lat = center[1];
  // 计算当前纬度下，1度对应的米数（经度方向）
  const metersPerDegree = 111319.9 * Math.cos(lat * Math.PI / 180);
  const radiusInDegrees = radius / metersPerDegree;
  const circle = new ol.geom.Circle(center, radiusInDegrees);
  

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