cesium-绘制贝塞尔曲线

 0.什么是贝塞尔曲线

        贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具，如PhotoShop等。在Flash4中还没有完整的曲线工具，而在Flash5里面已经提供出贝塞尔曲线工具。

        贝塞尔曲线于1962年由法国工程师皮埃尔·贝塞尔（Pierre Bézier）所广泛发表，他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau演算法开发，以稳定数值的方法求出贝兹曲线。

1.效果如下图所示

2.代码实现，通过此可以实现贝塞尔曲线绘制（简单真诚）

  // (1.11.1) 曲线
  drawcCurce(){
    var startPoint = [-75.59777, 40.03883];
    var controlPoint1 = [-80.50, 35.14];
    var controlPoint2 = [-80.12, 25.46];
    var endPoint = [-70.05, 25.46];
    var numSteps = 100;
    function computeBezierPoints(startPoint, controlPoint1, controlPoint2, endPoint, numSteps) {
      var points = [];
      for (var i = 0; i <= numSteps; i++) {
        var t = i / numSteps;
        var x = Math.pow(1 - t, 3) * startPoint[0] + 3 * Math.pow(1 - t, 2) * t * controlPoint1[0] + 3 * (1 - t) * Math.pow(t, 2) * controlPoint2[0] + Math.pow(t, 3) * endPoint[0];
        var y = Math.pow(1 - t, 3) * startPoint[1] + 3 * Math.pow(1 - t, 2) * t * controlPoint1[1] + 3 * (1 - t) * Math.pow(t, 2) * controlPoint2[1] + Math.pow(t, 3) * endPoint[1];
        points.push([x, y]);
      }
      return points;
    }
    function convertToCartesian3(points) {
      var positions = points.map(function(coord) {
        var lon = coord[0];
        var lat = coord[1];
        var cartesian = Cesium.Cartesian3.fromDegrees(lon, lat);
        return cartesian;
      });
      return positions;
    }
    var bezierPoints = computeBezierPoints(startPoint, controlPoint1, controlPoint2, endPoint, numSteps);
    var positions = convertToCartesian3(bezierPoints);
    function convertToDegrees(cartesians) {
      var ellipsoid = Cesium.Ellipsoid.WGS84;
      var degreesArray = [];
      for (var i = 0; i < cartesians.length; i++) {
        var cartographic = ellipsoid.cartesianToCartographic(cartesians[i]);
        var longitude = Cesium.Math.toDegrees(cartographic.longitude);
        var latitude = Cesium.Math.toDegrees(cartographic.latitude);
        degreesArray.push([longitude, latitude]);
      }
      return degreesArray;
    }
    var degreesCoordinates = convertToDegrees(positions);
    that.drawCurceLine(degreesCoordinates)
  },
  // (1.11.2) 绘制贝塞尔曲线
  drawCurceLine (val) {
    // 创建GeoJSON数据源
    var dataSource = new Cesium.GeoJsonDataSource();
    // 定义GeoJSON数据
    var geoJsonData = {
      "type": "FeatureCollection",
      "features": [{
        "type": "Feature",
        "properties": {
        },
        "geometry": {
          "coordinates": val,
          "type": "LineString"
        },
        "id": 42
      }]
    };
    // 将GeoJSON数据加载到数据源中
    dataSource.load(geoJsonData, {
      clampToGround: true
    });
    // 为数据源添加一个ID
    dataSource.id = 'lineId';
    // 设置数据源的 zIndex 属性
    dataSource.zIndex = 100;
    // 自定义线、点和多边形的样式
    dataSource.entities.values.forEach(function (entity) {
      if (entity.polyline) {
        // 线样式 - 虚线
        // entity.polyline.material = new Cesium.PolylineDashMaterialProperty({
        //   color: Cesium.Color.fromCssColorString('#f40'),
        //   dashLength: 16.0
        // });
        entity.polyline.width = 2;
      }
    });
    // 将数据源添加到Viewer中
    that.currentViewer.dataSources.add(dataSource);
  },