Javascript 如何在openlayers 3中的地图上创建半径可调的透明圆

我想在html文档页面中放置一个带有特定控件的地图，以便访问者可以选择其位置周围的距离半径

我需要的控件之一是一个半透明的圆，从中心到边缘有一条线。我想这个圆是可调的使用鼠标从外缘，并保持其比例和位置在地图上缩放或平移时

我使用Django作为我的后端。我还想知道我是否需要使用javascript来实现这一点

我已经决定使用Openlayers 3，但在今天之前从未使用过它，我想把这项任务放到一边，以便更好地理解它，变得更加自信，这样我就可以构建更多的应用程序，并希望在未来帮助他人

有大脑盒子吗

编辑：我已经设法把邮政编码搜索表单和地图放在页面上，但现在我有点困惑于如何在布局中添加一个圆圈

这就是我目前所拥有的

.地图{
高度：500px；
宽度：80%；
填充：10px；
}
OpenLayers 3示例
我的地图
var map=新ol.map({
目标：“地图”，
图层：[
新建ol.layer.Tile（{source:new ol.source.MapQuest（{layer:'osm'}）}）
],
视图：新ol.view({
中心：ol.proj.fromlont（[{{long}，{{{lat}]），
缩放：{{zoom}
})
});

开箱即用，OpenLayers仅支持对多边形进行鼠标修改

我确信可以编写修改圆圈的代码，但该代码在OpenLayers中还不存在（从3.17.x开始）

---

您可以创建一个类，如

ol.interaction.Modify

，并使其支持圆圈。请参阅，了解他们如何修改多边形，并将其修改为支持圆。

类似于此的内容？？？？？不，我已经有类似的东西了，我需要的是能够用鼠标从圆周边缘调整它…然后检查这个。小提琴弄得一团糟，但你的工作已经完成了。从这里借用的代码-->哇，谢谢你。。。我很感激你在这方面所做的一切，但我正在寻找一个特定的用户体验。。。我希望用户能够控制从它的边缘只圆。。。就像这个例子中的圆圈一样，原点需要固定在我给它的长边上，并且只有当鼠标移动到它上面时，这个特征才应该是可编辑的（鼠标悬停在它上面时，线和控制点需要出现）。我不太擅长理解代码，所以很多注释都会非常感谢