Question

我使用ol / interaction / Draw和ol / interaction / Modify绘制圆圈，并且可以更改。但是我不知道如何显示中心点和圆上的点，而不必将鼠标悬停在其上并用图标替换蓝色点。看起来像这张照片

https://user-images.githubusercontent.com/51256090/58744368-e92e3f00-846b-11e9-9969-5e3b06e75429.png

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>

如何在交互修改中更改蓝点样式

1 个答案: