openlayer绘制3次bezier曲线

OpenLayers可以使用CanvasRenderer或WebGLRenderer渲染贝塞尔曲线。以下是一个使用CanvasRenderer绘制三次贝塞尔曲线的示例代码：

var map = new ol.Map({
  // ...
});

var bezier = new ol.Feature({
  geometry: new ol.geom.LineString([[0, 0], [50, 100], [100, 0], [150, 100]])
});
vectorSource.addFeature(bezier);

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var resolution = map.getView().getResolution();

var render = function() {
  canvas.width = map.getSize()[0];
  canvas.height = map.getSize()[1];
  context.clearRect(0, 0, canvas.width, canvas.height);

  context.beginPath();
  var start = bezier.getGeometry().getFirstCoordinate();
  context.moveTo(start[0], start[1]);
  var points = bezier.getGeometry().getCoordinates();
  for (var i = 0; i < points.length - 1; i += 3) {
    var cp1 = points[i];
    var cp2 = points[i + 1];
    var end = points[i + 2];
    context.bezierCurveTo(cp1[0], cp1[1], cp2[0], cp2[1], end[0], end[1]);
  }
  context.stroke();

  var style = new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'red',
      width: 2,
      lineCap: 'round',
      lineJoin: 'round'
    })
  });
  var feature = new ol.Feature({
    geometry: new ol.geom.Point(points[points.length - 1])
  });
  var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
      features: [feature]
    }),
    style: style
  });
  map.addLayer(vectorLayer);
};

map.on('postcompose', render);
map.render();

在上面的示例代码中，我们创建了一个包含三个控制点的三次贝塞尔曲线Feature，并将其添加到矢量图层中。然后创建一个Canvas元素和CanvasRenderingContext2D对象，在地图渲染后执行`render`函数，该函数使用CanvasRenderingContext2D对象绘制三次贝塞尔曲线。需要注意的是，我们在绘制三次贝塞尔曲线时，每次都需要使用`bezierCurveTo`方法绘制一个曲线段。

最后，我们创建一个包含一个控制点的点Feature，并将其添加到一个新的矢量图层中，以使终点呈现为一个圆点。在绘制时，我们还可以设置贝塞尔曲线的颜色、宽度、线帽和线段连接方式。