cesium通过点击事件绘制图形（点，线，面，圆，矩形）

Passerby_OK

已于 2023-05-15 14:11:36 修改

阅读量1.1k

点赞数

文章标签： javascript 前端 java

于 2023-05-15 14:07:05 首次发布

本文链接：https://blog.csdn.net/passerby_ok/article/details/130683266

版权

本文详细介绍了如何利用CesiumJavaScript库响应鼠标点击事件，动态地在3D地球场景中绘制点、线、面、圆形以及矩形。通过实例代码展示各个图形的生成过程，为Cesium地图应用开发提供实用技巧。

摘要由CSDN通过智能技术生成

//未定义变量均为全局变量，如：MinShape，BigShape
// 触发事件
    Draw(){
       const _this = this;
       let handler = new Cesium.ScreenSpaceEventHandler(globalEarth.viewer.scene.canvas);
       let drawingMode = _this.drawType;
       let activeShapePoints = [];
       let activeShape;
       let floatingPoint;

       //双击鼠标左键清除默认事件
                        
globalEarth.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
            //鼠标左键
            handler.setInputAction(function (event) {
                var earthPosition = globalEarth.viewer.scene.pickPosition(event.position);
                if (Cesium.defined(earthPosition)) {
                    if (activeShapePoints.length === 0) {
                        if(drawingMode != '点'){
                            floatingPoint = createPoint(earthPosition);
                        }
                        activeShapePoints.push(earthPosition);
                        var dynamicPositions = new Cesium.CallbackProperty(function () {
                            if (drawingMode == '面') {
                            return new Cesium.PolygonHierarchy(activeShapePoints);
                            }
                            return activeShapePoints;
                        }, false);
                        if(drawingMode == "点"){
                            activeShape = drawShape(dynamicPositions,earthPosition,true);//绘制动态图
                            terminateShape(false)
                        }else{
                            activeShape = drawShape(dynamicPositions,earthPosition,false);//绘制动态图
                        }
                    }else{
                        activeShapePoints.push(earthPosition);
                        createPoint(earthPosition);
                    }
                }
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
            //鼠标移动
            handler.setInputAction(function (event) {
                if (Cesium.defined(floatingPoint)) {
                    var newPos