Question

我在下面有一个jsfiddle，尝试在该半径中创建一个半径1600米的圆。我认为投影不正确，因为该圆绝对小于1600米。在Google Maps上测量，我认为它大约是1000米。我该怎么做才能更正此问题>

谢谢。

var centerLongitudeLatitude = ol.proj.fromLonLat([-1.733014, 51.982989]);
var layer = new ol.layer.Vector({
  source: new ol.source.Vector({
    projection: 'EPSG:4326',
    features: [new ol.Feature(new ol.geom.Circle(centerLongitudeLatitude, 1600))]
  }),
  style: [
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'blue',
        width: 3
      }),
      fill: new ol.style.Fill({
        color: 'rgba(0, 0, 255, 0.1)'
      })
    })
  ]
});


var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    layer
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([-1.733014, 51.982989]),
    zoom: 14
  })
});

html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.map {
  height: 100%;
  width: 100%;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map" class="map"></div>

Answer 1

感谢Mike和cabesuon，我有一个解决方案，发布在这里，以供将来的读者使用。

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([-1.733014, 51.982989]),
    zoom: 14
  })
});

var centerLongitudeLatitude = ol.proj.fromLonLat([-1.733014, 51.982989]);
var viewProjection = map.getView().getProjection();
var pointResolution = ol.proj.getPointResolution(viewProjection , 1, centerLongitudeLatitude );
var radius = 1600 / pointResolution;
var layer = new ol.layer.Vector({
  source: new ol.source.Vector({
    projection: 'EPSG:4326',
    features: [new ol.Feature(new ol.geom.Circle(centerLongitudeLatitude, radius))]
  }),
  style: [
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'blue',
        width: 3
      }),
      fill: new ol.style.Fill({
        color: 'rgba(0, 0, 255, 0.1)'
      })
    })
  ]
});

map.addLayer(layer);

html,
body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.map {
  height: 100%;
  width: 100%;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/build/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map" class="map"></div>

Answer 2

向量层（EPSG:4326）的SRS与圆心（EPSG:3857）的SRS之间不一致。您需要上述之一，而不是两者兼而有之。

尝试在不指定projection的情况下创建图层，它将使用默认的视图投影，在这种情况下为EPSG:3857（由于OSM）。

更新：

在构建了下面的代码段之后，我意识到建议的更改不会影响结果，不确定为什么会这样，所以我建议使用Polygon.circular作为替代。

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
    <title>Circle features</title>
  </head>
  <body>
    <div id="map" class="map"></div>
		<script type="text/javascript">
		// features
    var radius = 1600;
    var center = [-1.733014, 51.982989]
    var fcircle = new ol.Feature({
      geometry: new ol.geom.Circle(
        ol.proj.fromLonLat(center),
        radius
      )
    });
    fcircle.setStyle(new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'blue',
        width: 2
      })
    }));
    var fcircular = new ol.Feature({
      geometry: ol.geom.Polygon.circular(center, radius, 64).transform('EPSG:4326', 'EPSG:3857')
    });
    fcircular.setStyle(new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'red',
        width: 1
      })
    }));
    // map
    var view = new ol.View({
      center: ol.proj.fromLonLat(center),
      zoom: 14
    });
    var map = new ol.Map({
			target: 'map',
			layers: [
				new ol.layer.Tile({
					source: new ol.source.OSM()
				}),
        new ol.layer.Vector({
          source: new ol.source.Vector({
            features: [fcircle, fcircular]
          })
        })
			],
			view
		});
    </script>
  </body>
</html>

无法在OpenLayers中获得正确的圆半径

2 个答案: