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

我是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
  }
}

---

您可以执行类似于此示例的操作，但不应使用图标图像，而应将线端点设置为线字符串

var光栅=新建ol.layer.Tile({
来源：new ol.source.OSM（）
});
var source=new ol.source.Vector（）；
var-white=[255,255,255,1]；
VarBlue=[0153255,1]；
var宽度=3；
var pointStyle=新的ol.style.style({
图片：新ol.style.Circle({
半径：宽度*2，
填充：新的ol.style.fill({
颜色：蓝色
}),
笔划：新的ol风格笔划({
颜色：白色，
宽度：宽度/2
})
}),
zIndex:无限
});
var lineStyle=新的ol.style.style({
笔划：新的ol风格笔划({
颜色：'黑色'，
宽度：2
}),
文本：新的ol.style.text({
字体：“12px Calibri，无衬线”，
是的，
位置：'行'，
textBaseline:'底部'，
填充：新的ol.style.fill({
颜色：“黑色”
}),
笔划：新的ol风格笔划({
颜色：“#fff”，
宽度：3
})
})
});
var startStyle=lineStyle.clone（）；
var endStyle=lineStyle.clone（）；
var styleFunction=函数（特性、分辨率）{
变量样式=[pointStyle]；
var geometry=feature.getGeometry（）；
if（geometry.getType（）=='LineString'）{
lineStyle.getText（）.setText（（feature.getGeometry（）.getLength（）/1000.toFixed（））；
样式。推送（线条样式）；
var像素=10；
var start=geometry.getFirstCoordinate（）；
startStyle.setGeometry（新的ol.geom.LineString（[[start[0]，start[1]-像素*分辨率]，[start[0]，start[1]+像素*分辨率]）；
样式。推送（开始样式）；
var end=geometry.getLastCoordinate（）；
setGeometry（新的ol.geom.LineString（[[end[0]，end[1]-像素*分辨率]，[end[0]，end[1]+像素*分辨率]）；
样式。推送（endStyle）；
}
返回样式；
};
var vector=新的ol.layer.vector({
资料来源：资料来源，
style:styleFunction
});
var map=新ol.map({
图层：[光栅，矢量]，
目标：“地图”，
视图：新ol.view({
中心：[-11000000，4600000]，
缩放：4
})
});
map.addInteraction（新ol.interaction.Draw({
资料来源：资料来源，
键入：“LineString”，
style:styleFunction
}));
html，body，.map{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
}

分辨率从何而来？OpenLayers将当前视图分辨率传递给style函数，我收到错误消息：“TypeError:无法设置未定义的属性'pendingRemovals'。样式代码在我的例子中是分开的。您可以在原始帖子的更新部分看到我的样式函数的外观。它在以下位置崩溃：startStyle.setGeometry（LineString（[[start[0]，start[1]-像素*分辨率]，[start[0]，start[1]+像素*分辨率]]））