Openlayers实现角度测量

概述

在前面介绍了如何在 Openlayers 中进行长度和面积的测量，可以参考：《Openlayers 实现长度测量》,《openlayers 实现面积测量》。

那么如何在 Openlayers 中进行角度的测量呢？很遗憾ol/sphere模块中没有提供对应角度测量的 API 或方法，但是我们可以自己实现。

实践

效果展示

角度量测绘制

结果

实现思路

实现思路主要有两点：一是计算夹角的度数；二则是夹角的圆弧表示，上图中表示角度的圆弧，可以是 0 - 180° 中的任意一个角度，且它总是包裹在夹角内，连接夹角的两边。

夹角的度数计算

• 确定夹角

数学常识可知，夹角度数的区间必定是[0°，180°]，而且，夹角是由三个坐标点的位置确定大小的，如上图中的顶点A、B、C。因此，我们可以内定顶点 ∠ABC是我们需要测量的夹角。

• 确定顶点坐标位置

可以在地图上随机取三个点作为顶点，但是这样并不科学，这样无法满足绘制特定角度的需求。选点还是通过ol/interaction模块的Draw API 进行拾取。

但geom.getCoordinates()返回的坐标个数达到四个时，就调用this.draw.finishDrawing()方法结束绘制。因为它的返回值倒数的两个坐标都是一样的，因此即使我们只需要三个点的坐标，也需要等到它的返回值长度是4。

实现代码如下：

this.draw.on(
  "drawstart",
  (evt: {
     feature: Feature<Geometry>, coordinate: Coordinate }) => {
   
    const {
    feature, coordinate } = evt;

    this.listenGeometryChange = feature.getGeometry().on("change", (evt) => {
   
      const geom = evt.target;

      let startPoint = geom.getFirstCoordinate();

      this.addMarker({
    coordinate: startPoint, symbolId: "A", anchor: [0, 0] });

      const coordinates = geom.getCoordinates().slice(0, -1);

      if (coordinates.length > 1) {
   
        this.addMarker({
   
          coordinate: coordinates[1],
          symbolId: "B",
          anchor: [1, 1],
        });
      }
      const pointscount = geom.getCoordinates();
      if (pointscount.length >= 4) {
   
        this.addMarker({
   
          coordinate: coordinates[2],
          symbolId: "C",
          anchor: [0, 0],
        });
        this.addAngleMark({
   
          coordinate: coordinates[1],
          Angles: calculateAngle(coordinates),
        });
        this.draw.finishDrawing();
      }
    });
  }
);

• 如何计算夹角

两点的坐标位置决定了两点之间的距离，即当我们知道A、B和C的坐标后，就可以知道线段AB和BC的长度了，然后通过数据计算就可以知道 ∠ABC的大小了。前面提到夹角的区间范围，因为在电脑中，夹角也可以是负值，这个取决于它对应的方向是顺时针还是逆时针方向，因此要保证夹角的范围在区间[0°，180°]内。

封装的计算夹角的方法calculateAngle如下：

const calculateAngle = (points: Coordinate[]) => {
   
  // 提取坐标点 A, B, C
  const [A, B, C] = points;

  // 计算向量 AB 和 BC
  const AB = {
    x: B[0] - A[0], y: B[1] - A[1] };
  const BC = {
    x: C[0] - B[0], y: C[1] - B[1] };

  // 计算点积
  const dotPr