Cesium动态绘制实体（点、标注、面、线、圆、矩形）

最新推荐文章于 2024-09-17 21:00:25 发布
最新推荐文章于 2024-09-17 21:00:25 发布
阅读量4.3k 收藏 16
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YOOSHIN/article/details/103987537
版权

 

//自定义绘制图形，支持 点，线，面，矩形，圆，标识，可自定义绘制过程中的和绘制完的预览
    this.drawGraphic = function(view,_mode,_callback,_GraphicProperty){
        //清空所有可能的监听和画到一半的图形
        if(handler){
            handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
            handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
            handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
            handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
        }
        if(activeShapePoints||activeShape||floatingPoint||boundaryPoints.length>0||returnGraphic){
            if(floatingPoint){
                view.entities.remove(floatingPoint);
                floatingPoint = undefined;
            }
            if(activeShape){
                view.entities.remove(activeShape);
                activeShape = undefined;
            }
            activeShapePoints = [];
            if(boundaryPoints.length>0){
                for(let i=0;i<boundaryPoints.length;i++){
                    view.entities.remove(boundaryPoints[i]);
                }
            }
        }
       //配置
        var drawingMode = _mode;
        var GraphicProperty;
        if(_GraphicProperty===null||_GraphicProperty===""||_GraphicProperty===undefined){
            GraphicProperty = {}
        }else{
            GraphicProperty=_GraphicProperty
        }
        //监听左键点击事件
        function listenClick(_view,_callback) {
            handler = new Cesium.ScreenSpaceEventHandler(view.scene.canvas);
            handler.setInputAction(function(movement) {
                let position = view.scene.pickPosition(movement.position);
                let screenPosition = movement.position;
                let callbackObj = {};
                callbackObj.cartesian3=position;
                callbackObj.movement=movement;
                callbackObj.screenPosition=screenPosition;
                _callback(callbackObj,handler);
            },Cesium.ScreenSpaceEventType.LEFT_CLICK);
        }
        //模式判断
        if(drawingMode==='point'){
            listenClick(_view, function(callbackObj, handler) {
                let position = callbackObj.cartesian3;
                let Point;
                //构造实体
                if(GraphicProperty.style&&GraphicProperty.style.point){
                    Point =  view.entities.add({
                        id:GraphicProperty.id||null,
                        description:GraphicProperty.description||'',
                        name:GraphicProperty.name||'',
                        position:position,
                        point:GraphicProperty.style.point
                    });
                }else{
                    Point =  view.entities.add({
                        type:'Selection tool',
                        position:position,
                        point:{
                            color:  Cesium.Color.WHITE,
                            pixelSize: 10,
                            outlineColor: Cesium.Color.BLACK,
                            outlineWidth:  0,
                            show:  true,
                        }
                    });
                }
                //回调产生的点
                if(_callback){
                    _callback(Point);
                }
                //销毁左键监听
                handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
                handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
                handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
                handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
            });
        }
        else if(drawingMode==='marker'){
            if(GraphicProperty.style&&GraphicProperty.style.billboard){
                listenClick(_view, function(callbackObj, handler) {
                    //此时场景中的点
                    let position = callbackObj.cartesian3;
                    //赋值，构造点实体Entity
                    let  Marker =  view.entities.add({
                        id:GraphicProperty.id||null,
                        description:GraphicProperty.description||null,
                        name:GraphicProperty.name||'',
                        type:'Selection tool',
                        show:GraphicProperty.show||true,
                        position:position,
                        billboard:GraphicProperty.style.billboard
                    });
                    //回调构造的点
                    if(_callback){
                        _callback(Marker);
                    }
                    //销毁
                    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
                    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
                    handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
                    handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
                });
            }else{
                listenClick(_view, function(callbackObj, handler) {
                    //此时场景中的点
                    let position = callbackObj.cartesian3;
                    //赋值，构造点实体Entity
                    let  Marker =  view.entities.add({
                        type:'Selection tool',
                        show: true,
                        position:position,
                        point:{
                            color:  Cesium.Color.WHITE,
                            pixelSize: 10,
                            outlineColor: Cesium.Color.BLACK,
                            outlineWidth:  0,
                            show:  true,
                        }
                    });
                    //回调构造的点
                    if(_callback){
                        _callback(Marker);
                    }
                    //销毁
                    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
                    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
                    handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
                    handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
                });
            }
        }
        else{
            handler = new Cesium.ScreenSpaceEventHandler(view.canvas);
            //取消自带的双击放大监听
            view.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
            //构造点，例如在活动的提示点
            function createPoint(worldPosition) {
                var point = view.entities.add({
                    position : worldPosition,
                    point : {
                        color : Cesium.Color.WHITE,
                        pixelSize : 5,
                    }
                });
                return point;
            }
            //绘制图形
            function drawShape(positionData) {
                var shape;
                if (drawingMode === 'polyline') {
                    if(GraphicProperty.style&&GraphicProperty.style.polyline){
                        GraphicProperty.style.polyline.positions=positionData;
                        shape = view.entities.add({
                            id:GraphicProperty.id||null,
                            name:GraphicProperty.name||'',
                            description:GraphicProperty.description||'',
                            polyline : GraphicProperty.style.polyline
                        });
                    }else{
                        shape = view.entities.add({
                            polyline : {
                                positions : positionData,
                                width : 3
                            }
                        });
                    }
                }
                else if (drawingMode === 'polygon') {
                    if(GraphicProperty.style&&GraphicProperty.style.polygon){
                        GraphicProperty.style.polygon.hierarchy=positionData;
                        GraphicProperty.style.polygon.perPositionHeight=true;
                        shape = view.entities.add({
                            id:GraphicProperty.id||null,
                            name:GraphicProperty.name||'',
                            description:GraphicProperty.description||'',
                            polygon:GraphicProperty.style.polygon
                        });
                    }else{
                        shape = view.entities.add({
                            polygon: {
                                hierarchy: positionData,
                                material: new Cesium.ColorMaterialProperty(Cesium.Color.WHITE.withAlpha(0.7)),
                                perPositionHeight:true
                            }
                        });
                    }
                }
                else if (drawingMode === 'circle'){
                    //当positionData为数组时绘制最终图，如果为function则绘制动态图
                    let xyz = new Cesium.Cartesian3(activeShapePoints[0].x, activeShapePoints[0].y, activeShapePoints[0].z);
                    //转WGS84
                    let wgs84 = view.scene.globe.ellipsoid.cartesianToCartographic(xyz);
                    let height = wgs84.height;
                    let value = typeof positionData.getValue === 'function' ? positionData.getValue(0) : positionData;
                    if(GraphicProperty.style&&GraphicProperty.style.ellipse){
                        GraphicProperty.style.ellipse.semiMinorAxis=new Cesium.CallbackProperty(function () {
                            //半径 两点间距离
                            var r = Math.sqrt(Math.pow(value[0].x - value[value.length - 1].x, 2) + Math.pow(value[0].y - value[value.length - 1].y, 2));
                            return r ? r : r + 1;
                        }, false);
                        GraphicProperty.style.ellipse.semiMajorAxis=new Cesium.CallbackProperty(function () {
                            var r = Math.sqrt(Math.pow(value[0].x - value[value.length - 1].x, 2) + Math.pow(value[0].y - value[value.length - 1].y, 2));
                            return r ? r : r + 1;
                        }, false);
                        GraphicProperty.style.ellipse.height=height;
                        shape = view.entities.add({
                            position: activeShapePoints[0],
                            id:GraphicProperty.id||null,
                            name:GraphicProperty.name||'',
                            description:GraphicProperty.description||'',
                            ellipse:GraphicProperty.style.ellipse
                        });
                    }
                    else{
                        shape = view.entities.add({
                            position: activeShapePoints[0],
                            ellipse: {
                                semiMinorAxis: new Cesium.CallbackProperty(function () {
                                    //半径 两点间距离
                                    var r = Math.sqrt(Math.pow(value[0].x - value[value.length - 1].x, 2) + Math.pow(value[0].y - value[value.length - 1].y, 2));
                                    return r ? r : r + 1;
                                }, false),
                                semiMajorAxis: new Cesium.CallbackProperty(function () {
                                    var r = Math.sqrt(Math.pow(value[0].x - value[value.length - 1].x, 2) + Math.pow(value[0].y - value[value.length - 1].y, 2));
                                    return r ? r : r + 1;
                                }, false),
                                material: GraphicProperty.material||Cesium.Color.BLUE.withAlpha(0.5),
                                height:height,
                                outline: true
                            }
                        });
                    }
                }
                else if (drawingMode === 'rectangle'){
                    let xyz = new Cesium.Cartesian3(activeShapePoints[0].x, activeShapePoints[0].y, activeShapePoints[0].z);
                    //转WGS84
                    let wgs84 = view.scene.globe.ellipsoid.cartesianToCartographic(xyz);
                    let height = wgs84.height;
                    //当positionData为数组时绘制最终图，如果为function则绘制动态图
                    let arr = typeof positionData.getValue === 'function' ? positionData.getValue(0) : positionData;
                    if(GraphicProperty.style&&GraphicProperty.style.rectangle){
                        GraphicProperty.style.rectangle.coordinates=new Cesium.CallbackProperty(function () {
                            return Cesium.Rectangle.fromCartesianArray(arr);
                        }, false);
                        GraphicProperty.style.rectangle.height=height;
                        shape = view.entities.add({
                            id:GraphicProperty.id||null,
                            name:GraphicProperty.name||'',
                            description:GraphicProperty.description||'',
                            rectangle : GraphicProperty.style.rectangle
                        });
                    }else{
                        shape = view.entities.add({
                            rectangle : {
                                coordinates :  new Cesium.CallbackProperty(function () {
                                    return Cesium.Rectangle.fromCartesianArray(arr);
                                }, false),
                                material : Cesium.Color.GREEN.withAlpha(0.5),
                                height:height
                            }
                        });
                    }
                }
                return shape;
            }
            //左键监听，每一次绘制都要留下记录
            handler.setInputAction(function(event) {
              //在场景中使用深度拾取scene.pickPosition  globe的pick还有camera的pick在场景中拾取不准确
                var earthPosition = view.scene.pickPosition(event.position);
                //当鼠标不在地表时，earthPosition切成未定义undefined
                if (Cesium.defined(earthPosition)) {
                    if (activeShapePoints.length === 0) {
                        floatingPoint = createPoint(earthPosition);
                        activeShapePoints.push(earthPosition);
                        var dynamicPositions = new Cesium.CallbackProperty(function () {
                            if (drawingMode === 'polygon') {
                                return new Cesium.PolygonHierarchy(activeShapePoints);
                            }
                            return activeShapePoints;
                        }, false);
                        activeShape = drawShape(dynamicPositions);
                    }
                    activeShapePoints.push(earthPosition);
                    let boundaryPoint=createPoint(earthPosition);
                    boundaryPoints.push(boundaryPoint);
                }
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
            //鼠标移动的监听
            handler.setInputAction(function(event) {
                if (Cesium.defined(floatingPoint)) {
                    var newPosition = view.scene.pickPosition(event.endPosition);
                    if (Cesium.defined(newPosition)) {
                        floatingPoint.position.setValue(newPosition);
                        activeShapePoints.pop();
                        activeShapePoints.push(newPosition);
                    }
                }
            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
            //重置图形，形成最终形态，把动态过程中的图形全部去掉
            function terminateShape() {
                activeShapePoints.pop();
                let final_Entity;
                if(activeShapePoints.length){
                    final_Entity = drawShape(activeShapePoints);//绘制最终图
                }
                view.entities.remove(floatingPoint);
                view.entities.remove(activeShape);
                floatingPoint = undefined;
                activeShape = undefined;
                activeShapePoints = [];
                for(let i=0;i<boundaryPoints.length;i++){
                    view.entities.remove(boundaryPoints[i]);
                }
                return final_Entity;
            }
            //右键监听，结束画图
            handler.setInputAction(function(event) {
                returnGraphic = terminateShape();
                if(_callback){
                    _callback(returnGraphic);
                }
                handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
                handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
                handler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);
                handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT_CLICK);
            }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
        }
    };

 

 

 

 

点、标注、面、线、圆、矩形的style式样构造按照Cesium自己的那个graphic来构造
//构造polygon属性
  function constructPolygon(_param){
        if(!_param){
            _param={};
        }
        let PolygonlEntity = {};
        PolygonlEntity.polygon = {
            hierarchy: _param.hierarchy||null,
            show:_param.show||true,
            fill:_param.fill||true,
            outline: _param.outline || false,
            outlineWidth: _param.maximumHeights || null,
            outlineColor: _param.show || true,
            distanceDisplayCondition: _param.distanceDisplayCondition || undefined,
            material:_param.material||Cesium.Color.WHITE,
            perPositionHeight:_param.perPositionHeight||true    //这个属性是false时会始终贴在地表，不会变成空间性的面
        };
        return PolygonlEntity;
    };

//构造polyline属性
   function constructPolyline(_param) {
        if(!_param){
            _param={};
        }
        let PolylineEntity = {};
        PolylineEntity.polyline = {
            width: _param.width || 1.0,
            positions: _param.positions||null,
            show: _param.show || true,
            material: _param.material || Cesium.Color.WHITE,
            distanceDisplayCondition: _param.distanceDisplayCondition || undefined
        };
        return PolylineEntity;
    };

//构造rectangle属性
  function constructRectangle(_param) {
        if(!_param){
            _param={};
        }
        let RectangleEntity = {};
        RectangleEntity.rectangle = {
            coordinates: _param.coordinates||null,
            show: _param.show || true,
            fill: _param.fill || true,
            material: _param.material || Cesium.Color.WHITE,
            distanceDisplayCondition: _param.distanceDisplayCondition || undefined
        };
        return RectangleEntity;
    };

//构造point属性
  function constructPoint(_param) {
        let PointEntity = {};
        if (!_param) {
            _param = {}
        }
        PointEntity.point = {
            color: _param.color || Cesium.Color.WHITE,
            pixelSize: _param.pixelSize || 1,
            outlineColor: _param.outlineColor || Cesium.Color.BLACK,
            outlineWidth: _param.outlineWidth || 0,
            show: _param.show || true,
            scaleByDistance: _param.scaleByDistance || null,
            translucencyByDistance: _param.translucencyByDistance || null,
            heightReference: _param.heightReference || Cesium.HeightReference.NONE,
            distanceDisplayCondition: _param.distanceDisplayCondition || undefined,
        };
        return PointEntity;
    };

//构造marker（billboard）属性
   function constructBillboard(_param) {
        if(!_param){
            _param={};
        }
        let BillboardEntity = {};
        BillboardEntity.billboard = {
            image: _param.image||null,
            show: _param.show || true,
            scale: _param.scale || 1.0,
            eyeOffset: _param.eyeOffset || Cesium.Cartesian3.ZERO,
            pixelOffset: _param.pixelOffset || Cesium.Cartesian2.ZERO,
            // sizeInMeters:_param.sizeInMeters||true,
            horizontalOrigin: _param.horizontalOrigin || Cesium.HorizontalOrigin.CENTER, //水平方向  中心
            verticalOrigin: _param.verticalOrigin || Cesium.VerticalOrigin.CENTER, //垂直方向 底部
            rotation: _param.rotation || 0,
            heightReference: _param.heightReference || Cesium.HeightReference.NONE,
            distanceDisplayCondition:_param.distanceDisplayCondition ||undefined
            // pixelOffsetScaleByDistance:_param.pixelOffsetScaleByDistance
        };
        return BillboardEntity
    };

//构造circle（ellipse）的属性
    function constructEllipse(_param) {
        if(!_param){
            _param={};
        }
        let EllipseEntity = {};
        EllipseEntity.ellipse = {
            semiMinorAxis: _param.semiMinorAxis || 2000,
            semiMajorAxis: _param.semiMajorAxis || 2000,
            height: _param.height || 0,
            material: _param.material || Cesium.Color.WHITE,
        };
        return EllipseEntity;
    };
 
 
 
 
 
绘制
 
 
 
  
 let pointStyle = {
        style: constructPoint({
            color: Cesium.Color.RED,
            pixelSize: 10,
            outlineColor: Cesium.Color.BLACK,
            outlineWidth: 0,
            show: true,
            distanceDisplayCondition: camera.DistanceDisplayCondition(0.1, 2500.0)
        })
    };

    let markerStyle = {
        style: constructBillboard({
            image: 'images/pic.png',
            scale: 0.3,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            pixelOffset: coordinates.createCatesian2(0, -20),
        })
    };

    let rectangleStyle = {
        style: constructRectangle({
            material:style.setColorWithAlpha(Cesium.Color.GREEN,0.5)
        })
    };

    let circleStyle = {
        style: constructEllipse({
            material:style.setColorWithAlpha(Cesium.Color.DARKGOLDENROD,0.5)
        })
    };

    //绘制
    let drawarr = [];
    function draW(e) {
        switch (e) {
            case 'point':
                drawGraphic(view,'point',function (_entity) {
                    drawarr.push(_entity);
                },pointStyle);
                break;
            case 'polyline':
                drawGraphic(view,'polyline',function (_entity) {
                    drawarr.push(_entity);
                },polylineStyle);
                break;
            case 'polygon':
                drawGraphic(view,'polygon',function (_entity) {
                    drawarr.push(_entity);
                },polygonStyle);
                break;
            case 'marker':
                drawGraphic(view,'marker',function (_entity) {
                    drawarr.push(_entity);
                },markerStyle);
                break;
            case 'circle':
                drawGraphic(view,'circle',function (_entity) {
                    drawarr.push(_entity);
                },circleStyle);
                break;
            case 'rectangle':
                drawGraphic(view,'rectangle',function (_entity) {
                    drawarr.push(_entity);
                },rectangleStyle);
                break;
        }
    }
 
 
 
 
 
 
 
 
 
 
最终效果：

 


                

        

        

    

  


    

      

        

            

              
                
                  YOOSHIN
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
Cesium 实体 Entity + 绘制点线面

				
			

			

				

					虎康的博客
				

				

					08-25
					
					684
					
				

			

		

		

			
				
【代码】Cesium 使用 Entity 绘制点线面。

			
		

	



                

            
              



	

		

			

				
					
cesium态势标绘 （ 绘制矩形）

				
			

			

				

					God's asylum的博客
				

				

					05-18
					
					1284
					
				

			

		

		

			
				
vue + cesium矩形标绘与编辑，采用es6模块化写法逻辑清晰，会有明显的标注说明，使代码容易读懂，理解和学习

			
		

	



              


  
              

                


	

		

			

				
					
【Cesium】绘制线、面、体

				
			

			

				

					老靳的WebGIS
				

				

					10-21
					
					2648
					
				

			

		

		

			
				
矩形

长方体

不规则图形

椭圆

椭圆柱

正圆

圆柱

圆锥

不规则多边形柱

一串糖葫芦？

带洞的矩形

一系列矩形、圆形

贴地的线

围墙

宽线

宽线的体

复杂线状体

一根水管

			
		

	





	

		

			

				
					
Cesium绘制点线面以及面积测量

				
			

			

				

					06-05
				

			

		

		

			
				
两个Cesium两个drawhelper库，具体使用可参考工程代码，积分需求自己变得好高，手动修改低了。

			
		

	



		

			
		



	

		

			

				
					
Cesium绘制可编辑线

					
最新发布

				
			

			

				

					qq_44806249的博客
				

				

					09-17
					
					301
					
				

			

		

		

			
				
绘制可编辑线

			
		

	





	

		

			

				
					
使用Cesium动态绘制点、线、面、圆、矩形

				
			

			

				

					呼噜噜坤的博客
				

				

					07-08
					
					5742
					
				

			

		

		

			
				
绘制参考
https://blog.csdn.net/qwe435541908/article/details/90762066
https://www.jianshu.com/p/4a97d3ed4a06
https://www.cnblogs.com/thanks/p/8377578.html
https://www.cnblogs.com/zfygiser/p/10169312.html

...

			
		

	





	

		

			

				
					
cesium绘制线

				
			

			

				

					m0_50884068的博客
				

				

					02-12
					
					1169
					
				

			

		

		

			
				
【代码】cesium绘制线。

			
		

	





	

		

			

				
					
cesium实现手动绘制点，线，面

				
			

			

				

					weixin_55223296的博客
				

				

					09-26
					
					2825
					
				

			

		

		

			
				
【代码】cesium实现手动绘制点，线，面。

			
		

	





	

		

			

				
					
Cesium 动态绘制线和编辑

				
			

			

				

					weixin_70875199的博客
				

				

					11-01
					
					2811
					
				

			

		

		

			
				
【代码】Cesium 动态绘制面和编辑。

			
		

	





	

		

			

				
					
cesium态势标绘 （ 绘制多边形）

				
			

			

				

					God's asylum的博客
				

				

					05-18
					
					965
					
				

			

		

		

			
				
vue + cesium多边形标绘与编辑，采用es6模块化写法逻辑清晰，会有明显的标注说明，使代码容易读懂，理解和学习

			
		

	





	

		

			

				
					
cesium 文本标注被遮挡_Cesium中Primitive讲解

				
			

			

				

					weixin_39718460的博客
				

				

					01-26
					
					2104
					
				

			

		

		

			
				
前面介绍了entity方式绘制对象，现在我们开始接触primitive方式，primitive方式更接近渲染引擎底层，由于我对webgl知之甚少，因此primitive接口我现在也是一知半解，写这个博客我参考了这一篇博客Cesium(三) 几何图形与外观。(https://blog.csdn.net/happyduoduo1/article/details/51868042)1、Primitive...

			
		

	





	

		

			

				
					
Cesium画点线面

				
			

			

				

					01-25
				

			

		

		

			
				
Cesium画点线面，实现在Cesium地图上点几个点，画成一条线或者面。

			
		

	





	

		

			

				
					
Cesium画点线添加标注和描述

				
			

			

				

					04-02
				

			

		

		

			
				
Cesium画点线，添加标注，添加后弹窗输入描述等。。。

			
		

	





	

		

			

				
					
cesium 三维坐标系绘制

				
			

			

				

					God's asylum的博客
				

				

					07-16
					
					2383
					
				

			

		

		

			
				
cesium 三维坐标系绘制  ------   本文为讲解+源码形式，本文将三维坐标系分解成六步来为大家讲接，每一步都有源码和介绍，每行代码都有标注来讲解该步骤

			
		

	





	

		

			

				
					
Cesium(三)在Terrain动态绘制线和面

				
			

			

				

					HPUGIS的博客
				

				

					06-02
					
					3146
					
				

			

		

		

			
				
在绘制线和面在Ceisum中GitHub中以有轮子（drawhelper），该轮子仅能绘制在2D层次，在Terrain上则不能绘制。在Terrain上绘制线和面，是进行淹没分析和剖面分析的第一步，在这里在展示如何在Terrain上绘制线和面（主要来源于官方demo）

效果：
demo示例：
<!DOCTYPE html>
<html>
<head>
    ...

			
		

	





	

		

			

				
					
cesium绘制点、线、面

				
			

			

				

					Raccon_的博客
				

				

					10-13
					
					5222
					
				

			

		

		

			
				
笔记

			
		

	





	

		

			

				
					
Cesium 点击绘制线/折线（动态绘制线/折线）

				
			

			

				

					qq_17627195的博客
				

				

					10-18
					
					5843
					
				

			

		

		

			
				
是一个类，其值由回调函数延迟计算。也就是说它在不断地自我调用，每当其返回的对象有改变时，就会抛出改变后的值。利用这种特性，我们就可以在定义。使用方法：调用 click_draw_polygon() 方法就可以。时，用CallbackProperty生成动态的数组赋值给。参数，就可以得到动态绘制线/折线的效果。

			
		

	





	

		

			

				
					
cesium绘制编辑区域

				
			

			

				

					梦寻汝的博客
				

				

					05-29
					
					588
					
				

			

		

		

			
				
cesium绘制区域、编辑区域、显示面积，区域化展示

			
		

	





	

		

			

				
					
Cesium 创建线

				
			

			

				

					前端小陈的成长记录
				

				

					04-08
					
					238
					
				

			

		

		

			
				
Cesium 创建线

			
		

	





	

		

			

				
					
Cesium 动态绘制实体水面

				
			

			

				

					03-28
				

			

		

		

			
				
Cesium是一个开源的3D地球可视化引擎，可以用来展示地球上的各种实体。在Cesium中动态绘制实体水面需要以下步骤：

1. 导入Cesium库和相关的插件，比如Cesium.js和Cesium-terrain-builder等。

2. 创建一个Cesium Viewer对象，并设置地球的初始位置和视角。

3. 添加水面实体对象，可以使用Cesium的Entity对象来表示水面，其中的属性包括位置、高度、颜色、纹理等。

4. 使用Cesium的时间轴（TimeLine）控件来控制水面实体的动态变化，比如水位的上升和下降等。

5. 根据需要设置其他的场景参数，比如光照、阴影、雾气等。

下面是一个简单的示例代码，演示了如何在Cesium中动态绘制实体水面：

```javascript
// 创建Cesium Viewer对象
var viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain()
});

// 设置地球的初始位置和视角
viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 20000),
    orientation: {
        heading: Cesium.Math.toRadians(20),
        pitch: Cesium.Math.toRadians(-20),
        roll: 0
    }
});

// 添加水面实体对象
var waterSurface = viewer.entities.add({
    name: 'Water Surface',
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 0),
    ellipsoid: {
        radii: new Cesium.Cartesian3(1000, 1000, 1000),
        material: new Cesium.Color(0, 0.5, 1, 0.5)
    }
});

// 使用Cesium的时间轴控件来控制水面实体的动态变化
viewer.timeline.addEventListener('settime', function(e) {
    var time = e.timeJulian;
    var waterLevel = Math.sin(time) * 50;
    waterSurface.position = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, waterLevel);
});

// 设置其他的场景参数
viewer.scene.globe.enableLighting = true;
viewer.scene.fog.enabled = true;
```

在以上代码中，我们先创建了一个Cesium Viewer对象，并设置了地球的初始位置和视角。然后，我们添加了一个水面实体对象，使用了Cesium的Entity对象来表示水面，其中的属性包括位置、高度、颜色、纹理等。接着，我们使用Cesium的时间轴控件来控制水面实体的动态变化，根据时间变化来更新水面的高度。最后，我们设置了其他的场景参数，比如光照、阴影、雾气等，以增强场景的真实感和美观度。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值