Transformar las coordenadas al área del círculo completo OpenLayers

Question

Soy nuevo en OpenLayers y actualmente tengo un proyecto que utiliza OpenLayers para mostrar mapas. Cuando hago clic en cualquier dirección del mapa, se dibuja un círculo basado en la dirección (coordenada).

Mi pregunta es después de hacer clic en el mapa, una vez que el círculo se dibuja, si hago clic en cualquier punto dentro del círculo dibujado, OpenLayers sólo devolverá el same coordinate como la primera vez.

Se que mi pregunta es tediosa pero solo es curiosidad y quiero saber si hay alguna forma o posibilidad de lograrlo.

Aquí está el código para dibujar el círculo y obtener la coordenada. Este código generará una coordenada diferente basada en el punto en el que haga clic en el mapa sin importar que el punto esté dentro o fuera del círculo dibujado:

css

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

  .map {
    height: 100%;
    width: 100%;
  }
</style>

html

<div id="map" class="map"></div>

js

<script>
  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([126.5, 35]),
      zoom: 3,
    }),
  });

  var layer = new ol.layer.Vector({
    // NOTE: Provides a source of features for vector layers. Vector features provided by this source are suitable for editing
    source: new ol.source.Vector({
      projection: "EPSG:4326",
      //   projection: "EPSG:3857",

      features: [],
    }),
  });

  map.addLayer(layer);
  // handle map click
  map.on("click", handleMapClick);
  var vectorSource = layer.getSource();

  function createCircle(
    circleCenterX,
    circleCenterY,
    circleRadius,
    pointsToEnd
  ) {
    let angleToAdd = 360 / pointsToEnd;
    let coords = [];
    let angle = 0;
    for (let i = 0; i < pointsToEnd; i++) {
      angle += angleToAdd;
      let coordX =
        circleCenterX + circleRadius * Math.cos((angle * Math.PI) / 180);
      let coordY =
        circleCenterY + circleRadius * Math.sin((angle * Math.PI) / 180);
      coords.push([coordX, coordY]);
    }
    return coords;
  }

  function addCircle(coords) {
    var circleCoords = createCircle(coords[0], coords[1], 2, 9);
    console.log("circle coordinates", circleCoords);

    var polygon = new ol.geom.Polygon([circleCoords]);
    console.log(`polygon: ${JSON.stringify(polygon)}`);
    polygon.transform("EPSG:4326", "EPSG:3857");

    polygon = new ol.Feature(polygon);
    vectorSource.addFeature(polygon);
  }

  function handleMapClick(evt) {

    addCircle(
      ol.proj.transform(evt.coordinate, "EPSG:900913", "EPSG:4326")
    );

    console.log(
      `transformed coordinate: ${ol.proj.transform(
        evt.coordinate,
        "EPSG:900913",
        "EPSG:4326"
      )}`
    );
  }

Answer 1

Al procesar el mapa haga clic con handleMapClick se puede utilizar la función map forEachFeatureAtPixel para comprobar si el clic fue en la característica de círculo existente. Para obtener la coordenada central del círculo/característica, la forma más sencilla es añadirla como propiedad personalizada (digamos centerCoords ) a la característica en el momento de la creación.

La parte relevante del código podría entonces ser algo así:

function addCircle(coords) {
  var circleCoords = createCircle(coords[0], coords[1], 2, 9);

  var polygon = new ol.geom.Polygon([circleCoords]);
  polygon.transform("EPSG:4326", "EPSG:3857");

  polygon = new ol.Feature(polygon);
  polygon.set('centerCoords', coords);
  vectorSource.addFeature(polygon);
}

function handleMapClick(evt) {
  var found = false;
  map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
    console.log('Existing circle center', feature.get('centerCoords'));
    found = true;
  });
  if (found) return;

  addCircle(
    ol.proj.transform(evt.coordinate, "EPSG:900913", "EPSG:4326")
  );
  console.log(
    `transformed coordinate: ${ol.proj.transform(
      evt.coordinate,
      "EPSG:900913",
      "EPSG:4326"
    )}`
  );
}