如何在 Openlayers 中以编程方式添加带有半径、经度和纬度的圆？

Question

我正在尝试在单击按钮时使用 latitude、longitude 和 radius（以米或千米为单位）添加圆圈。

我可以在单击的按钮上添加一个圆圈，但它需要半径为 1-25 之间的数字。我需要以米为单位给出半径

注意：当我用手指手势画圆时，我可以用这段代码得到它的半径（以米为单位）

var radius = geometry.getRadius();

我用手势功能画的图：

function addInteraction() {
  draw = new ol.interaction.Draw({
    source: source,
    type: shapetype,
    freehand: true
  });
  map.addInteraction(draw);

Answer 1

您只需要执行以下操作

var coordsLongitudeLatitude = [1, 44]
# Convert to map coordinates (usually Spherical Mercator also named EPSG 3857)
var center = ol.proj.fromLonLat(coordsLongitudeLatitude)
# Create Circle geometry, 4000 = distance in meters
var circleGeometry = new ol.geom.Circle(center, 4000);
# If you want/need to transform it to a polygon
var polygonFromCircleGeometry = ol.geom.Polygon.fromCircle(circleGeometry);

Answer 2

要在地图上添加圆圈：

var centerLongitudeLatitude = ol.proj.fromLonLat([longitude, latitude]);
var layer = new ol.layer.Vector({
  source: new ol.source.Vector({
    projection: 'EPSG:4326',
    features: [new ol.Feature(new ol.geom.Circle(centerLongitudeLatitude, 4000))]
  }),
  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);

proof of concept fiddle

代码片段：

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([-117.1610838, 32.715738]),
    zoom: 12
  })
});
var centerLongitudeLatitude = ol.proj.fromLonLat([-117.1610838, 32.715738]);
var layer = new ol.layer.Vector({
  source: new ol.source.Vector({
    projection: 'EPSG:4326',
    // radius = 4000 meters
    features: [new ol.Feature(new ol.geom.Circle(centerLongitudeLatitude, 4000))]
  }),
  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 href="https://openlayers.org/en/v4.6.5/css/ol.css" rel="stylesheet" />
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<div id="map" class="map"></div>

如何在 Openlayers 中以编程方式添加带有半径、经度和纬度的圆？

How to add circle programmatically with radius,long and lat in Openlayers?

geometry

dictionary

interaction

draw

openlayers