代码相对简单,提供圆心和半径即可
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --> <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> <link href="ol/ol.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="ol/ol.js" charset="utf-8"></script> <script type="text/javascript" src="jquery.js" charset="utf-8"></script> </head> <body> <div id="map" style=" 100%;height: 100%;background-color: #FFFFF6"></div> <button id="btn">click</button> <script> var layerVector = new ol.layer.Vector({ source: new ol.source.Vector() }); var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM(), }) , layerVector ], target: 'map', view: new ol.View({ center: [12950000, 4860000], zoom: 7 }) }); var iconStyle = new ol.style.Style({ stroke: new ol.style.Stroke({ color: 'blue', lineDash: [4], 3 }), fill: new ol.style.Fill({ color: 'rgba(0, 0, 255, 0.5)' }) }); var pointFeature = new ol.Feature({ geometry: new ol.geom.Circle([12950000, 4860000], 10000) }); pointFeature.setStyle(iconStyle); layerVector.getSource().addFeature(pointFeature); </script> </body> </html>