JT-CIM-SDK/packages/Widgets/DrawTools/MilitaryPlot/drawingMethod/DrawCurveFlag.js

// DrawCurveFlag
/*
绘制曲线旗标
 */
class DrawCurveFlag {
    constructor(arg) {
        this.viewer = arg.viewer;
        this.Cesium = arg.Cesium;
        this.identificationPoint = null; //标识点位
        this.CurveFlag = null; 
        this.CurveFlagLast = null; // 曲线旗标数据
        this.positions = [];  // 经纬度
        this.entitiesPoint = [];   // 实体点位
        this.entitiesCurveFlag = [];  
        this.CurveFlagData = null; 
        this.DrawStartEvent = new Cesium.Event(); //开始绘制事件
        this.DrawEndEvent = new Cesium.Event(); //结束绘制事件 
		
		/* 通用参数集合 */
		this._param = {
			id: "DrawStraightArrow",
			polygonColor: 'rgba(0,255,0,0.5)', //面填充颜色
			outlineColor: 'rgba(255, 255, 255, 1)', //边框颜色
			outlineWidth: 1, //边框宽度
		}
		
		/* 创建面材质 */
		this.polygonMaterial = Cesium.Color.fromCssColorString(this._param.polygonColor);
		/* 创建线材质 */
		// this.outlineMaterial = new Cesium.PolylineDashMaterialProperty({//曲线
		// 	dashLength: 16,
		// 	color: Cesium.Color.fromCssColorString(this._param.outlineColor)
		// });
		this.outlineMaterial = Cesium.Color.fromCssColorString(this._param.outlineColor);
    }
 
    //返回曲线旗标数据
    getData() {
        return this.CurveFlagData;
    }

    // 修改编辑调用计算
    computePosition(data){
        //计算面
        let $this = this
        var lnglatArr = [];
        for (var i = 0; i < data.length; i++) {
            var lnglat = $this.cartesianToLatlng(data[i]);
            lnglatArr.push(lnglat)
        }
        // 取第一个
        let startPoint = lnglatArr[0]
        // 取最后一个
        let endPoint =lnglatArr[lnglatArr.length - 1]
        // 上曲线起始点
        let point1 = startPoint
        // 上曲线第一控制点
        let point2 = [(endPoint[0] - startPoint[0]) / 4 + startPoint[0], (endPoint[1] - startPoint[1]) / 8 + startPoint[1]]
        // 上曲线第二个点
        let point3 = [(startPoint[0] + endPoint[0]) / 2, startPoint[1]]
        // 上曲线第二控制点
        let point4 = [(endPoint[0] - startPoint[0]) * 3 / 4 + startPoint[0], -(endPoint[1] - startPoint[1]) / 8 + startPoint[1]]
        // 上曲线结束点
        let point5 = [endPoint[0], startPoint[1]]
        // 下曲线结束点
        let point6 = [endPoint[0], (startPoint[1] + endPoint[1]) / 2]
        // 下曲线第二控制点
        let point7 = [(endPoint[0] - startPoint[0]) * 3 / 4 + startPoint[0], (endPoint[1] - startPoint[1]) * 3 / 8 + startPoint[1]]
        // 下曲线第二个点
        let point8 = [(startPoint[0] + endPoint[0]) / 2, (startPoint[1] + endPoint[1]) / 2]
        // 下曲线第一控制点
        let point9 = [(endPoint[0] - startPoint[0]) / 4 + startPoint[0], (endPoint[1] - startPoint[1]) * 5 / 8 + startPoint[1]]
        // 下曲线起始点
        let point10 = [startPoint[0], (startPoint[1] + endPoint[1]) / 2]
        // 旗杆底部点
        let point11 = [startPoint[0], endPoint[1]]
        // 计算上曲线
        let curve1 = $this.getBezierPoints([point1, point2, point3, point4, point5])
        // 计算下曲线
        let curve2 = $this.getBezierPoints([point6, point7, point8, point9, point10])
        // 面合并
        let componentspolygon = [];
        componentspolygon = curve1.concat(curve2)
        let PolygonHierarchy = new $this.Cesium.PolygonHierarchy(componentspolygon)
        // 线边合并
        let componentspolyline = [];
        componentspolyline = curve1.concat(curve2)
        componentspolyline.push($this.LatlngTocartesian(point1))
        componentspolyline.push($this.LatlngTocartesian(point11))
        
        $this.CurveFlagData = lnglatArr;
        return [PolygonHierarchy,componentspolyline];
    }
 
    //加载
    addload(data) {
        var $this = this;
        if (data.length < 2) return;
        // 取第一个
        let startPoint = data[0]
        // 取最后一个
        let endPoint =data[data.length - 1]
        // 上曲线起始点
        let point1 = startPoint
        // 上曲线第一控制点
        let point2 = [(endPoint[0] - startPoint[0]) / 4 + startPoint[0], (endPoint[1] - startPoint[1]) / 8 + startPoint[1]]
        // 上曲线第二个点
        let point3 = [(startPoint[0] + endPoint[0]) / 2, startPoint[1]]
        // 上曲线第二控制点
        let point4 = [(endPoint[0] - startPoint[0]) * 3 / 4 + startPoint[0], -(endPoint[1] - startPoint[1]) / 8 + startPoint[1]]
        // 上曲线结束点
        let point5 = [endPoint[0], startPoint[1]]
        // 下曲线结束点
        let point6 = [endPoint[0], (startPoint[1] + endPoint[1]) / 2]
        // 下曲线第二控制点
        let point7 = [(endPoint[0] - startPoint[0]) * 3 / 4 + startPoint[0], (endPoint[1] - startPoint[1]) * 3 / 8 + startPoint[1]]
        // 下曲线第二个点
        let point8 = [(startPoint[0] + endPoint[0]) / 2, (startPoint[1] + endPoint[1]) / 2]
        // 下曲线第一控制点
        let point9 = [(endPoint[0] - startPoint[0]) / 4 + startPoint[0], (endPoint[1] - startPoint[1]) * 5 / 8 + startPoint[1]]
        // 下曲线起始点
        let point10 = [startPoint[0], (startPoint[1] + endPoint[1]) / 2]
        // 旗杆底部点
        let point11 = [startPoint[0], endPoint[1]]
        // 计算上曲线
        let curve1 = $this.getBezierPoints([point1, point2, point3, point4, point5])
        // 计算下曲线
        let curve2 = $this.getBezierPoints([point6, point7, point8, point9, point10])
        // 合并
        let componentspolygon = [];
        componentspolygon = curve1.concat(curve2)
        let componentspolyline = [];
        componentspolyline = curve1.concat(curve2)
        componentspolyline.push($this.LatlngTocartesian(point1))
        componentspolyline.push($this.LatlngTocartesian(point11))
        
        var shape = this.viewer.entities.add({
            Type:'DrawCurveFlag',
            Position:data,
            id:data.id || $this.objId,
            polygon: {
                hierarchy: new $this.Cesium.PolygonHierarchy(componentspolygon),
                extrudedHeight: 1,
                material: $this.Cesium.Color.RED,
            },
            polyline: {
                //使用cesium的peoperty
                positions: componentspolyline,
                show: true,
                material: $this.Cesium.Color.YELLOW,
                width: 5,
                clampToGround: true
            }
        });
        $this.entitiesCurveFlag.push(shape);
        return shape;
    }
 
    //开始创建
    startCreate(drawType) {
        this.drawType = drawType;
        var $this = this;
        this.handler = new this.Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
        this.handler.setInputAction(function (evt) { //单机开始绘制
            //屏幕坐标转地形上坐标
            var cartesian = $this.getCatesian3FromPX(evt.position);
            if ($this.positions.length == 0) {
                $this.positions.push(cartesian.clone());
                $this.identificationPoint = $this.createPoint(cartesian);
                $this.createPoint(cartesian);// 绘制点
                $this.positions.push(cartesian);
            }
            // if ($this.positions.length == 2) {
            //     $this.positions.push(cartesian);
            // }
            
        }, $this.Cesium.ScreenSpaceEventType.LEFT_CLICK);
        this.handler.setInputAction(function (evt) { //移动时绘制线
            if ($this.positions.length < 2) return;
            var cartesian = $this.getCatesian3FromPX(evt.endPosition);
            if (!$this.Cesium.defined($this.CurveFlag)) {
                $this.CurveFlag = $this.createCurveFlag();
            }
            $this.identificationPoint.position.setValue(cartesian);
            if ($this.CurveFlag) {
                $this.positions.pop();
                $this.positions.push(cartesian);
            }
        }, $this.Cesium.ScreenSpaceEventType.MOUSE_MOVE);
        this.handler.setInputAction(function (evt) {
            if (!$this.CurveFlag) return;
            var cartesian = $this.getCatesian3FromPX(evt.position);
            $this.positions.pop();
            $this.positions.push(cartesian);
            $this.createPoint(cartesian);// 绘制点
            $this.CurveFlagData = $this.positions.concat();
            $this.viewer.entities.remove($this.CurveFlag); //移除
            $this.CurveFlag = null;
            $this.positions = [];
            $this.identificationPoint.position.setValue(cartesian);
            var lnglatArr = [];
            for (var i = 0; i < $this.CurveFlagData.length; i++) {
                var lnglat = $this.cartesianToLatlng($this.CurveFlagData[i]);
                lnglatArr.push(lnglat)
            }
            $this.CurveFlagData = lnglatArr;
            var CurveFlag = $this.addload([$this.CurveFlagData[0],$this.CurveFlagData[$this.CurveFlagData.length -1 ]]); //加载
            $this.entitiesCurveFlag.push(CurveFlag);
            $this.CurveFlagLast = CurveFlag;
            $this.clearPoint();
            $this.destroy()
        }, $this.Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    }
 
    //创建点
    createPoint(cartesian) {
        var $this = this;
        var point = this.viewer.entities.add({
            position: cartesian,
            point: {
                pixelSize: 10,
                color: $this.Cesium.Color.RED,
                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            }
        });
        $this.entitiesPoint.push(point);
        return point;
    }
 
    //创建曲线旗标
    createCurveFlag() {
        var $this = this;
        var polygon = this.viewer.entities.add({
            polygon: {
                hierarchy: new $this.Cesium.CallbackProperty(function () {
                    if($this.positions.length < 2) return 
                    let lonlat = [];
                    let components = [];
                    let length = $this.positions.length
                    for (let i=0; i<length; i++){
                        lonlat.push($this.cartesianToLatlng($this.positions[i]))
                    }
                    // 取第一个
                    let startPoint = lonlat[0]
                    // 取最后一个
                    let endPoint =lonlat[lonlat.length - 1]
                    // 上曲线起始点
                    let point1 = startPoint
                    // 上曲线第一控制点
                    let point2 = [(endPoint[0] - startPoint[0]) / 4 + startPoint[0], (endPoint[1] - startPoint[1]) / 8 + startPoint[1]]
                    // 上曲线第二个点
                    let point3 = [(startPoint[0] + endPoint[0]) / 2, startPoint[1]]
                    // 上曲线第二控制点
                    let point4 = [(endPoint[0] - startPoint[0]) * 3 / 4 + startPoint[0], -(endPoint[1] - startPoint[1]) / 8 + startPoint[1]]
                    // 上曲线结束点
                    let point5 = [endPoint[0], startPoint[1]]
                    // 下曲线结束点
                    let point6 = [endPoint[0], (startPoint[1] + endPoint[1]) / 2]
                    // 下曲线第二控制点
                    let point7 = [(endPoint[0] - startPoint[0]) * 3 / 4 + startPoint[0], (endPoint[1] - startPoint[1]) * 3 / 8 + startPoint[1]]
                    // 下曲线第二个点
                    let point8 = [(startPoint[0] + endPoint[0]) / 2, (startPoint[1] + endPoint[1]) / 2]
                    // 下曲线第一控制点
                    let point9 = [(endPoint[0] - startPoint[0]) / 4 + startPoint[0], (endPoint[1] - startPoint[1]) * 5 / 8 + startPoint[1]]
                    // 下曲线起始点
                    let point10 = [startPoint[0], (startPoint[1] + endPoint[1]) / 2]
                    // 旗杆底部点
                    let point11 = [startPoint[0], endPoint[1]]
                    // 计算上曲线
                    let curve1 = $this.getBezierPoints([point1, point2, point3, point4, point5])
                    // 计算下曲线
                    let curve2 = $this.getBezierPoints([point6, point7, point8, point9, point10])
                    // 合并
                    components = curve1.concat(curve2)
                    // components.push(point11)
                    // let components = $this.Cesium.Cartesian3.fromDegreesArray([...point0, ...point1, ...point2, ...point0])
                    
                    return new $this.Cesium.PolygonHierarchy(components);
                }, false),
                extrudedHeight: 1,
                material: $this.Cesium.Color.RED,
            },
            polyline: {
                //使用cesium的peoperty
                positions: new $this.Cesium.CallbackProperty(function () {
                    if($this.positions.length < 2) return 
                    let lonlat = [];
                    let components = [];
                    let length = $this.positions.length
                    for (let i=0; i<length; i++){
                        lonlat.push($this.cartesianToLatlng($this.positions[i]))
                    }
                    // 取第一个
                    let startPoint = lonlat[0]
                    // 取最后一个
                    let endPoint =lonlat[lonlat.length - 1]
                    // 上曲线起始点
                    let point1 = startPoint
                    // 上曲线第一控制点
                    let point2 = [(endPoint[0] - startPoint[0]) / 4 + startPoint[0], (endPoint[1] - startPoint[1]) / 8 + startPoint[1]]
                    // 上曲线第二个点
                    let point3 = [(startPoint[0] + endPoint[0]) / 2, startPoint[1]]
                    // 上曲线第二控制点
                    let point4 = [(endPoint[0] - startPoint[0]) * 3 / 4 + startPoint[0], -(endPoint[1] - startPoint[1]) / 8 + startPoint[1]]
                    // 上曲线结束点
                    let point5 = [endPoint[0], startPoint[1]]
                    // 下曲线结束点
                    let point6 = [endPoint[0], (startPoint[1] + endPoint[1]) / 2]
                    // 下曲线第二控制点
                    let point7 = [(endPoint[0] - startPoint[0]) * 3 / 4 + startPoint[0], (endPoint[1] - startPoint[1]) * 3 / 8 + startPoint[1]]
                    // 下曲线第二个点
                    let point8 = [(startPoint[0] + endPoint[0]) / 2, (startPoint[1] + endPoint[1]) / 2]
                    // 下曲线第一控制点
                    let point9 = [(endPoint[0] - startPoint[0]) / 4 + startPoint[0], (endPoint[1] - startPoint[1]) * 5 / 8 + startPoint[1]]
                    // 下曲线起始点
                    let point10 = [startPoint[0], (startPoint[1] + endPoint[1]) / 2]
                    // 旗杆底部点
                    let point11 = [startPoint[0], endPoint[1]]
                    // 计算上曲线
                    let curve1 = $this.getBezierPoints([point1, point2, point3, point4, point5])
                    // 计算下曲线
                    let curve2 = $this.getBezierPoints([point6, point7, point8, point9, point10])
                    // 合并
                    components = curve1.concat(curve2)
                    components.push($this.LatlngTocartesian(point1))
                    components.push($this.LatlngTocartesian(point11))
                    
                    return components
                }, false),
                show: true,
                material: $this.Cesium.Color.YELLOW,
                width: 5,
                clampToGround: true
            }
        });
        $this.entitiesCurveFlag.push(polygon);
        return polygon;
    }

    cartesianToLatlng(cartesian) {
        var latlng = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
        var lat = this.Cesium.Math.toDegrees(latlng.latitude);
        var lng = this.Cesium.Math.toDegrees(latlng.longitude);
        return [lng, lat];
    }

    LatlngTocartesian(latlng) {
        let cartesian3 = this.Cesium.Cartesian3.fromDegrees(latlng[0], latlng[1]);
        return cartesian3
    }

    clearPoint() {
        this.DrawEndEvent.raiseEvent(this.CurveFlagLast, [this.CurveFlagData[0],this.CurveFlagData[this.CurveFlagData.length -1 ]], this.drawType);
        for (var i = 0; i < this.entitiesPoint.length; i++) {
            this.viewer.entities.remove(this.entitiesPoint[i]);
        }
        this.entitiesPoint = [];  //脏数据
    }
 
    //销毁
    destroy() {
        if (this.handler) {
            this.handler.destroy();
            this.handler = null;
        }
    }
 
    //清空实体对象
    clear() {
        for (var i = 0; i < this.entitiesPoint.length; i++) {
            this.viewer.entities.remove(this.entitiesPoint[i]);
        }
        for (var i = 0; i < this.entitiesCurveFlag.length; i++) {
            this.viewer.entities.remove(this.entitiesCurveFlag[i]);
        }
        this.identificationPoint = null; //标识点位
        this.CurveFlag = null; 
        this.CurveFlagLast = null; // 曲线旗标数据
        this.positions = [];  // 经纬度
        this.entitiesPoint = [];   // 实体点位
        this.entitiesCurveFlag = [];  
        this.CurveFlagData = null; 
    }
 
    getCatesian3FromPX(px) {
        var cartesian;
        var ray = this.viewer.camera.getPickRay(px);
        if (!ray) return null;
        cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);
        return cartesian;
    }

    // 贝塞尔曲线
    getBezierPoints (points) {
        let $this = this
        if (points.length <= 2) {
          return points
        } else {
          let bezierPoints = []
          let n = points.length - 1
          for (let t = 0; t <= 1; t += 0.01) {
            let [x, y] = [0, 0]
            for (let index = 0; index <= n; index++) {
              let factor = $this.getBinomialFactor(n, index)
              let a = Math.pow(t, index)
              let b = Math.pow((1 - t), (n - index))
              x += factor * a * b * points[index][0]
              y += factor * a * b * points[index][1]
            }
            bezierPoints.push($this.LatlngTocartesian([x, y]))
          }
          bezierPoints.push($this.LatlngTocartesian(points[n]))
          return bezierPoints
        }
    }


        /**
     * 获取二项分布
     * @param n
     * @param index
     * @returns {number}
     */
    getBinomialFactor(n, index) {
        return (this.getFactorial(n) / (this.getFactorial(index) * this.getFactorial(n - index)))
    }

    /**
    * 获取阶乘数据
    * @param n
    * @returns {number}
    */
    getFactorial (n) {
        let result = 1
        switch (n) {
        case (n <= 1):
            result = 1
            break
        case (n === 2):
            result = 2
            break
        case (n === 3):
            result = 6
            break
        case (n === 24):
            result = 24
            break
        case (n === 5):
            result = 120
            break
        default:
            for (let i = 1; i <= n; i++) {
            result *= i
            }
            break
        }
        return result
    }
}
 
export default DrawCurveFlag