如何在OpenLayers中绘制更复杂的图形对象？

Question

我是OpenLayers的初学者，我想知道如何绘制更复杂的图形对象，例如：

我看了看他们的例子，但没有找到那种图纸。我想使用它们的图元，而不是图像。

更新：

Bucket.update

Answer 1

您可以执行类似于此示例https://openlayers.org/en/v4.6.5/examples/line-arrows.html的操作，但不要使用图标图像，而应将行尾设置为线串

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

  var source = new ol.source.Vector();

  var white = [255, 255, 255, 1];
  var blue = [0, 153, 255, 1];
  var width = 3;
  var pointStyle = new ol.style.Style({
    image: new ol.style.Circle({
      radius: width * 2,
      fill: new ol.style.Fill({
        color: blue
      }),
      stroke: new ol.style.Stroke({
        color: white,
        width: width / 2
      })
    }),
    zIndex: Infinity
  });

  var lineStyle = new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'black',
      width: 2
    }),
    text: new ol.style.Text({
      font: '12px Calibri,sans-serif',
      overflow: true,
      placement: 'line',
      textBaseline: 'bottom',
      fill: new ol.style.Fill({
        color: 'black'
      }),
      stroke: new ol.style.Stroke({
        color: '#fff',
        width: 3
      })
    })
  });

  var startStyle = lineStyle.clone();
  var endStyle = lineStyle.clone();

  var styleFunction = function(feature, resolution) {
    var styles = [pointStyle];
    var geometry = feature.getGeometry();
    if (geometry.getType() == 'LineString') {
        lineStyle.getText().setText((feature.getGeometry().getLength()/1000).toFixed());
        styles.push(lineStyle);
        var pixels = 10;
        var start = geometry.getFirstCoordinate();
        startStyle.setGeometry(new ol.geom.LineString([[start[0], start[1] - pixels*resolution], [start[0], start[1] + pixels*resolution]]));
        styles.push(startStyle);
        var end = geometry.getLastCoordinate();
        endStyle.setGeometry(new ol.geom.LineString([[end[0], end[1] - pixels*resolution], [end[0], end[1] + pixels*resolution]]));
        styles.push(endStyle);
    }
    return styles;
  };
  var vector = new ol.layer.Vector({
    source: source,
    style: styleFunction
  });

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

  map.addInteraction(new ol.interaction.Draw({
    source: source,
    type: 'LineString',
    style: styleFunction 
  }));

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

<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map"></div>

在您的情况下，getSizeStyle应该返回一个样式函数，您不能使用静态样式，因为它会随着分辨率的变化而变化：

getSizeStyle (feature, title) {
  const pointStyle = new Style({
    image: new Circle({
      radius: width * 2,
      fill: new Fill({ color: 'black' }),
      stroke: new Stroke({ color: 'black', width: width / 2 })
    }),
    zIndex: Infinity
  })

  const lineStyle = new Style({
    stroke: new Stroke({ color: 'black', width: 2 }),
    text: new Text({
      font: '12px Calibri,sans-serif',
      overflow: true,
      placement: 'line',
      textBaseline: 'bottom',
      fill: new Fill({ color: 'black' }),
      stroke: new Stroke({ color: '#fff', width: 3 })
    })
  })

  const startStyle = lineStyle.clone()
  const endStyle = lineStyle.clone()

  return function(feature, resolution) {
    const styles = [pointStyle]
    const geometry = feature.getGeometry()
    if (geometry.getType() === 'LineString') {
      console.log('LineString')
      lineStyle.getText().setText((feature.getGeometry().getLength() / 1000).toFixed())
      styles.push(lineStyle)
      const pixels = 10
      const start = geometry.getFirstCoordinate()
      startStyle.setGeometry(new LineString([[start[0], start[1] - pixels * resolution], [start[0], start[1] + pixels * resolution]]))
      styles.push(startStyle)
      const end = geometry.getLastCoordinate()
      endStyle.setGeometry(new LineString([[end[0], end[1] - pixels * resolution], [end[0], end[1] + pixels * resolution]]))
      styles.push(endStyle)
      return styles
    }
  }
}

title似乎没有使用，pointStyle仅在使用点功能突出显示鼠标位置的Draw交互中需要。