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

Question

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

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

更新:

onDrawEnd (event) {
  this.sizeFeature = event.feature
  this.$refs.setSizeDialog.open()
},
onSizeSet (title) {
  this.sizeFeature.set('graphics', true)
  this.sizeFeature.set('style', sizeStyleId)
  this.sizeFeature.set('title', title)
  this.setFeatureStyle(this.sizeFeature)

  // Save graphics after the line with title was drawn
  developedDocumentsApi.saveDrawingGraphics(this.document.id, this.updateGraphicsObjList())
}


setFeatureStyle (feature) {
  const styleId = feature.get('style')
  let style = null
  switch (styleId) {
    case 0: {
      style = this.getRedPoint()
      break
    }
    ...
    case 11: {
      const title = feature.get('title')
      style = this.getSizeStyle(feature, title)
      break
    }
  }
  feature.setStyle(style)
}

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()

  const resolution = this.devDocMap.getView().getResolution()

  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(LineString([[start[0], start[1] - pixels * resolution], [start[0], start[1] + pixels * resolution]]))
    styles.push(startStyle)
    const end = geometry.getLastCoordinate()
    endStyle.setGeometry(LineString([[end[0], end[1] - pixels * resolution], [end[0], end[1] + pixels * resolution]]))
    styles.push(endStyle)
    return styles
  }
}

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 仅在使用点功能突出显示鼠标位置的绘图交互中需要。