参考文章：https://stackoverflow.com/questions/53117619/openlayers-5-v5-2-0-draw-circle-as-polygon
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.3.0/build/ol.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.3.0/css/ol.css" /> <style> html, body { margin: 0; padding: 0; height: 100%; } #app { width: 100%; height: 100%; } </style> </head> <body> <div id="map"> </div> </body> <script> const map = new ol.Map({ // target target: document.getElementById('map'), // layer layers: [ new ol.layer.Tile({ source: new ol.source.OSM(), }), ], // view view: new ol.View({ center: ol.proj.fromLonLat([113.75867124948216, 23.026719034540488]), zoom: 12, }), }) // https://stackoverflow.com/questions/44167678/openlayers-ol-geom-circle function createCirclePointCoords(position = [113.75867124948216, 23.026719034540488], circleRadius = 1000, pointsToFind = 60) { const center = ol.proj.fromLonLat(position) let angleToAdd = 360 / pointsToFind let coords = [] let angle = 0 // 经典圆形坐标生成算法 for (let i = 0; i < pointsToFind; i++) { angle = angle + angleToAdd let coordX = center[0] + circleRadius * Math.cos(angle * Math.PI / 180) let coordY = center[1] + circleRadius * Math.sin(angle * Math.PI / 180) coords.push([coordX, coordY]) } return coords } function getCircularFeature(position, radius = 1000) { const coords = createCirclePointCoords(position, radius) // 创建多边形 const Polygon = new ol.geom.Polygon([coords]) // 返回要素 return new ol.Feature(Polygon) } map.on('click', e => { // 当前点击的经纬度 const lnglat = ol.proj.toLonLat(e.coordinate) // 生成「圆」要素 const feature = getCircularFeature(lnglat, 1000) // 生成图层 const layer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [feature] }), fill: new ol.style.Fill({ color: 'rgba(255, 0, 0, 0.5)' }), stroke: new ol.style.Stroke({ color: '#ffcc33', 2 }), }) // 聚焦 // map.getView().fit(feature.values_.geometry.extent_) map.addLayer(layer) }) </script> </html>