经纬志
首页 / OpenLayers / 使用示例

绘制圆

以门店为中心画服务半径,用 Circle 类型拖拽即可,半径可直接从几何读取。

OpenLayers 10.3.1 · 更新 2026-10-28
源码与运行效果
运行效果

说明

Draw 的 type 设为 'Circle' 时,按下为圆心、拖动为半径。 绘制结束的要素几何是 ol.geom.Circle, getRadius() 返回 3857 单位下的半径,可直接当作米使用。 顶部同时给出半径、周长与面积,便于核对业务阈值。

操作结果
按住并拖动生成圆形,顶部显示半径与面积
换位置再画一个多个圆叠加显示,读数更新为最新圆
点击「清空圆」全部圆形移除,读数复位

Circle 是解析几何对象,导出 GeoJSON 前需要转成多边形:circle.getExtent() 只给外包框,不是形状本身。