Как изменить стиль синей точки во Взаимодействии

Question

Я использую ol / Interaction / Draw и Ol / Interaction / Modify, чтобы нарисовать круги и могу измениться.Но я не знаю, как показать центральную точку и точку на круге вместо того, чтобы парить над ней и заменить синюю точку на иконку.Выглядит как эта картинка

Answer 1

Вы можете показать центр круга, стилизовав его с помощью функции стиля, которая добавляет стиль для геометрии центра.Вы можете установить новые стили или функции стиля для изменения и рисования взаимодействий.В этой демонстрации красный центр круга меняется на зеленый модифицирующий стиль, когда указатель приближается к нему, и может быть виден через полый стиль рисования, когда он не рисует

  var raster = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

  var vectorStyle = new ol.style.Style({
      fill: new ol.style.Fill({
        color: 'rgba(255, 255, 255, 0.2)'
      }),
      stroke: new ol.style.Stroke({
        color: '#ffcc33',
        width: 2
      }),
      image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({
          color: '#ffcc33'
        })
      })
  });

  var centerStyle = new ol.style.Style({
      image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({
          color: 'red'
        })
      })
  });

  var modifyStyle = new ol.style.Style({
      image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({
          color: 'green'
        })
      })
  });

  var drawStyle = new ol.style.Style({
      image: new ol.style.Circle({
        radius: 7,
        stroke: new ol.style.Stroke({
          width: 1,
          color: 'black'
        })
      })
  });

  var source = new ol.source.Vector();
  var vector = new ol.layer.Vector({
    source: source,
    style: function(feature){
      var styles = [vectorStyle];
      if (feature.getGeometry().getType() == 'Circle') {
        centerStyle.setGeometry(new ol.geom.Point(feature.getGeometry().getCenter()));
        styles.push(centerStyle);
      }
      return styles;
    }
  });

  var map = new ol.Map({
    layers: [raster, vector],
    target: 'map',
    view: new ol.View({
      center: [-11000000, 4600000],
      zoom: 4
    })
  });

  var modify = new ol.interaction.Modify({source: source, style: modifyStyle});
  map.addInteraction(modify);

  var draw, snap; // global so we can remove them later
  var typeSelect = document.getElementById('type');

  var defaultEditStyle = new ol.interaction.Select().getOverlay().getStyleFunction();

  function addInteractions() {
    var drawing = false;
    draw = new ol.interaction.Draw({
      source: source,
      type: typeSelect.value,
      style: function(feature) {
        if (drawing) {
          return defaultEditStyle(feature);
        } else {
          return drawStyle;
        }
      }
    });
    draw.on('drawstart', function(){ drawing = true; });
    draw.on('drawend', function(){ drawing = false; });
    map.addInteraction(draw);
    snap = new ol.interaction.Snap({source: source});
    map.addInteraction(snap);

  }

  /**
   * Handle change event.
   */
  typeSelect.onchange = function() {
    map.removeInteraction(draw);
    map.removeInteraction(snap);
    addInteractions();
  };

  addInteractions();

<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet"/>
<div id="map" class="map"></div>
<form class="form-inline">
  <label>Geometry type &nbsp;</label>
  <select id="type">
    <option value="Point">Point</option>
    <option value="LineString">LineString</option>
    <option value="Polygon">Polygon</option>
    <option value="Circle" selected>Circle</option>
  </select>
</form>