如何在OpenLayers中创建自定义几何图形？

我正在使用OpenLayers v5向地图添加一些绘图工具。一旦这样的任务需要一个文档或开箱即用的自定义图形：同心圆

我真的不知道从哪里开始，所以我有两个问题

我是否可以创建一个几何图形并将

geometryFunction

用作，或者我是否需要创建多个特征，每个圆一个

当创建一个独立的

几何体时，为了使用OpenLayers，它到底需要什么？X，Y坐标的集合

为了自己解决这个问题，使用文档中的绘图示例，我尝试从对象中获取坐标，然后重新创建它，并手动将其添加到源中，如下所示

const feature = new Feature({
  geometry: new Circle(
    [
      /**
       * These are the nubmers that come out of a native Circle drawing
       * when console.log'ing the feature.getGeomety.getFlatCoordinates().
       * No idea if this is how I'd get or set those values.
       */
      [-10448062.740758311, 4941309.912009362],
      [ -9953141.960354999, 4941309.912009362],
    ]
  )
});

source.addFeature(feature);

这不会出错，但无法显示圆
 当交互类型为圆时，坐标将包含两对[x，y]圆心和当前点。这足以计算半径和旋转。几何体必须是单个简单几何体，因此需要将同心圆转换为多多边形


//OpenLayers默认图形样式不包括多重多边形的笔划
var-white=[255,255,255,1]；
VarBlue=[0153255,1]；
var宽度=3；
样式=[
新ol风格({
填充：新的ol.style.fill({
颜色：[255，255，255，0.5]
})
}),
新ol风格({
笔划：新的ol风格笔划({
颜色：白色，
宽度：宽度+2
})
}),
新ol风格({
笔划：新的ol风格笔划({
颜色：蓝色，
宽度：宽度
})
}),
新ol风格({
图片：新ol.style.Circle({
半径：宽度*2，
填充：新的ol.style.fill({
颜色：蓝色
}),
笔划：新的ol风格笔划({
颜色：白色，
宽度：宽度/2
})
}),
zIndex:无限
})
];
var raster=新建ol.layer.Tile({
来源：new ol.source.OSM（）
});
var source=new ol.source.Vector（{wrapX:false}）；
var vector=新的ol.layer.vector({
资料来源：资料来源，
});
var map=新ol.map({
图层：[光栅，矢量]，
目标：“地图”，
视图：新ol.view({
中心：[-11000000，4600000]，
缩放：4
})
});
var typeSelect=document.getElementById（'type'）；
var draw；//全局，以便稍后删除它
函数addInteraction（）{
var值=typeSelect.value；
如果（值！=“无”）{
var几何函数；
如果（值=='Square'）{
值='圆'；
geometryFunction=ol.interaction.Draw.createRegularPolygon（4）；
}else if（值=='Box'）{
值='圆'；
geometryFunction=ol.interaction.Draw.createBox（）；
}else if（值=='Star'）{
值='圆'；
geometryFunction=函数（坐标、几何）{
变量中心=坐标[0]；
var last=坐标[1]；
var dx=中心[0]-最后[0]；
var dy=中心[1]-最后[1]；
变量半径=数学sqrt（dx*dx+dy*dy）；
变量旋转=数学atan2（dy，dx）；
var newCoordinates=[]；
var numPoints=12；
对于（变量i=0；i0；--i）{
变量圆=新的几何圆（中心、半径*i/num圆）；
newCoordinates.push（ol.geom.Polygon.fromcycle（circle，64，rotation.getCoordinates（））；
}
如果（！几何体）{
几何=新的几何多边形（新坐标）；
}否则{
几何。设置坐标（新坐标）；
}
返回几何；
};
}
draw=新ol.interaction.draw({
资料来源：资料来源，
类型：值，
geometryFunction:geometryFunction，
风格：风格
});
取款人功能（evt）{
if（evt.feature.getGeometry（）.getType（）=='MultiPolygon'）{
var polygons=evt.feature.getGeometry（）.getPolygons（）；
对于（变量i=0；i
html，正文{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
}
.地图{
宽度：100%；
身高：80%；
}

形状类型
圆圈