cesuim 实时动态绘制线和动态立体墙,以及线的立体高度

在进入绘制前,必须熟悉cesuim基础知识

1、实现样式

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2、实现方法(只贴部分代码)

		let dayMaximumHeight; 
        let PolyLinePrimitive = function () { //创建线方法
            function _(points, bol) {
                if (viewModel.lineValue !== 'Wall') {
                    this.options = {
                        name: '直线',
                        polyline: {
                            zIndex: 15,
                            maximumHeights: new Array(points.length).fill(1000),
                            minimumHeights: new Array(points.length).fill(0),
                            show: true,
                            positions: [],
                            clampToGround: true,//是否贴地
                            material: lineType(viewModel),
                            // material: Cesium.Material.fromType('Wallfloater'),
                            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                            width: 5,
                        }
                    };
                } else {
                    this.options = {
                        name: '墙',
                        wall: {
                            positions: [],
                            material: new Cesium.ColorMaterialProperty(
                                new Cesium.CallbackProperty(function () {
                                    let color = Cesium.Color.fromCssColorString(viewModel.colorPink1)
                                    return color;
                                }, false)),//Cesium.Color.BLUE.withAlpha(0.2)
                            outline: true,
                            outlineColor: Cesium.Color.BLACK,
                            minimumHeights: new Cesium.CallbackProperty(e => {
                                // return [0,0,0,0];
                                return new Array(points.length + 1).fill(0)
                            }, false),
                            maximumHeights: new Cesium.CallbackProperty(e => {
                                //    return [100,100,100,100]
                                if (viewModel.animationShow) {//动画控制
                                    for (let i = 0; i < dayMaximumHeight.length; i++) {
                                        dayMaximumHeight[i] += 500 * 0.001 * viewModel.wallSpeed;//[5,10,15,20]
                                        if (dayMaximumHeight[i] > viewModel.QTheight) {
                                            dayMaximumHeight[i] = 0;
                                        }
                                    }
                                    return dayMaximumHeight;
                                } else {
                                    return new Array(points.length+1).fill(viewModel.QTheight);//墙体高度控制
                                }
                                //return new Array(points.length + 1).fill(100)
                            }, false),
                        }
                    }
                }
                if (points.length && bol) {
                    points.push(points[0])
                }
                this.positions = points
                this._init();
            }
            _.prototype._init = function () {
                var _self = this;
                var _update = function () {
                    let newArr = [..._self.positions]
                    let arr = []
                    if (newArr.length > 2) {
                        newArr.push(newArr[0])
                    }
                    if (viewModel.lineValue !== 'Wall') {
                        return newArr
                    } else {
                        newArr.forEach((item) => {
                            let cartographic = ellipsoid.cartesianToCartographic(item);
                            let lon = Cesium.Math.toDegrees(cartographic.longitude) ;
                            let lat = Cesium.Math.toDegrees(cartographic.latitude);
                            arr.push(lon)
                            arr.push(lat)
                            arr.push(0)
                        })
                        return Cesium.Cartesian3.fromDegreesArrayHeights(arr)
                    }
                };
                // 实时更新polyline.positions
                if (viewModel.lineValue !== 'Wall') {
                    this.options.polyline.positions = new Cesium.CallbackProperty(_update, false);
                } else {
                    this.options.wall.positions = new Cesium.CallbackProperty(_update, false);
                }
                viewer.entities.add(this.options);
            };
            return _;
        }();

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值