cesium用鼠标绘制点、线

最新推荐文章于 2025-04-14 23:34:56 发布

月影星云

最新推荐文章于 2025-04-14 23:34:56 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： cesium 3d vue 文章标签： vue

本文链接：https://blog.csdn.net/yyxy_gis/article/details/118578300

vue 同时被 3 个专栏收录

17 篇文章

订阅专栏

cesium

5 篇文章

订阅专栏

4 篇文章

订阅专栏

1、如图所示

在这里插入图片描述

2、封装代码

        //绘制
        drawPointLine() {
            this.isDrawPointLine = !this.isDrawPointLine;//用于判断是否绘制
            let that = this;
            let handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
            handler.setInputAction((e) => {
                //停止绘制
                if(this.isDrawPointLine == false){
                    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);//移除事件放在这里才会起效果
                    return;
                }
                //笛卡尔坐标转换经纬度
                let ray = that.viewer.camera.getPickRay(e.position);
                let position = that.viewer.scene.globe.pick(ray, that.viewer.scene);
                let cartographic = Cesium.Cartographic.fromCartesian(position);
                let lon = Cesium.Math.toDegrees(cartographic.longitude);
                let lat = Cesium.Math.toDegrees(cartographic.latitude);
                console.log(lon,lat)
                //创建点
                let pointPrimitives = null;
                pointPrimitives = that.viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection());
                pointPrimitives.add({
                    pixelSize: 10,
                    color: Cesium.Color['RED'],
                    position: Cesium.Cartesian3.fromDegrees(lon, lat),
                });
                //创建线
                that.drawPointLonLats.push(lon);
                that.drawPointLonLats.push(lat);
                that.viewer.entities.add({
                    name: 'line',
                    polyline: {
                        positions: Cesium.Cartesian3.fromDegreesArray(that.drawPointLonLats),
                        width: 2,
                        material: Cesium.Color.YELLOW,
                        clampToGround: true
                    }
                })
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        },