Openlayers几何形状在缩小时看起来失真

Question

正确的图像是圆形的完整缩放，其轮廓似乎失真。我已经使用Openlayers绘制了一个圆形几何图形，并且该圆形显示在地图中。 当我放大/缩小时，圆圈会放大，但是在缩小时，圆圈看起来会扭曲，并且在两次缩小后并不能完美地画圈。

我已按照以下方法绘制了圆的几何形状并更新了其坐标动态值

var circleFeature = new ol.Feature
    ({
      geometry: new ol.geom.Circle([0, 0], 0.4)
    });

circleStyle = new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: '#FFCC00',
                    width: 2,
                    lineDash: [0, 0]
                }),         
                zIndex: 3,
              });

circleFeature.setGeometry(new ol.geom.Circle([100, 110], 0.4));

如下图所示，在缩小时，您可以看到要变形或像素化的圆（或任何几何形状）。 完全缩放笔划轮廓时，笔划颜色填充似乎有些空白。 我希望我的几何形状例如： https : //openlayers.org/en/latest/examples/draw-shapes.html 。 但就我而言，它不起作用

Answer 1

我不确定为什么要使用linedash [0，0]-如果您不希望使用破折号将其保留为未定义状态。 如果某个特征在显示时（如缩小时）看起来很小，则使用linedash将产生较差的结果。 也许您应该用样式函数代替circleStyle，该函数计算显示的大小并仅在结果足够大以至于不能清晰看到时才使结果破折号

circleStyle = new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: '#FF0000',
                    width: 2
                }),         
                zIndex: 3,
              });


circleStyleFunction = function(feature, resolution) {
  var geometry = feature.getGeometry();
  var displayRadius;
  if (geometry.getType() = 'Circle') {
    displayRadius = feature.getGeometry().getRadius() / resolution;
  } 
  circleStyle.getStroke().setLineDash( displayRadius >= 10 ? [5, 5] : undefined );
  return circleStyle;
}