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

Question

The right image is full zoom in circle whose outline seems distorted我已经用 Openlayers 绘制了一个圆形几何图形，该圆形显示在 map 中。当我放大/缩小时，圆圈被放大，但在缩小时，圆圈看起来扭曲并且在两次缩小后不是完美的圆圈。

我已经按照下面的方式绘制了圆形几何图形并更新了它的坐标动态值

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;
}