Vue+Openlayers 绘制一个简单的弧线

前言：使用 vue+openlayers + 贝塞尔曲线绘制出来一个简单的弧线

先看效果（就是一条简单弧线）：

话不多说 直接上代码
1.创建地图实例

this.map = new Map({
  target: this.$refs.map,
  view: new View({
    // projection: 'EPSG:4326',
    // projection: 'EPSG:3857',
    center: this.center,
    zoom: this.zoom,
    minZoom: this.minZoom,
    // maxZoom: this.maxZoom,
  }),
  controls: defaultControls({
    attributionOptions: {
      collapsible: true,
      collapsed: true,
      tipLabel: '图层属性'
    },
    zoomOptions: {
      zoomInTipLabel: '放大',
      zoomOutTipLabel: '缩小'
    }
  }).extend([]),
  interactions: defaultInteraction({
    altShiftDragRotate: false,
    pinchRotate: false
  })
})

2.直接就绘制曲线

 // 绘制曲线
    const centerX = 0;
    const centerY = 0;
    const radius = 100;
    const startAngle = 0;
    const endAngle = Math.PI / 2;
    const startPoint = [100,100];
    const endPoint = [100,0];

    // 计算弧线的中点坐标
    const midAngle = (startAngle + endAngle) / 2;
    const midX = centerX + (radius * Math.cos(midAngle));
    const midY = centerY + (radius * Math.sin(midAngle));

    // 使用Bezier曲线算法计算弧线的路径点
    const bezierPoints = [];
    for (let t = 0; t <= 1; t += 0.01) {
      let x = (1 - t) ** 2 * startPoint[0] + 2 * t * (1 - t) * midX + t ** 2 * endPoint[0];
      let y = (1 - t) ** 2 * startPoint[1] + 2 * t * (1 - t) * midY + t ** 2 * endPoint[1];
      bezierPoints.push([x, y]);
    }
    bezierPoints.push(endPoint); // 弧线的终点也要加入路径点数组中
    console.log(bezierPoints,'bezierPoints')
    // 使用OpenLayers创建弧线要素
    const arcLine = new Feature({
      geometry: new LineString(bezierPoints)
    });

    // 设置弧线要素的样式
    arcLine.setStyle(new Style({
      stroke: new Stroke({
        color: 'red',
        width: 2
      })
    }));
    // 将弧线要素添加到矢量图层中
    const vectorSource = new VectorSource({
      features: [arcLine]
    });
    const vectorLayer = new VectorLayer({
      source: vectorSource
    });

3.绘制完添加到addLayer中

const baseMaps = new LayerGroup({
      title: '底图',
      name: 'BaseMaps',
      layers: [ vectorLayer]
    })

    this.map.addLayer(baseMaps)

这样一个基本的绘制曲线就完成了