cesium 画线画面画圆画矩形

最新推荐文章于 2025-11-18 16:39:37 发布

原创

最新推荐文章于 2025-11-18 16:39:37 发布 · 5.1k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#cesium #地图 #三维 #3Dtile

这段代码展示了如何使用Cesium库在三维地球上进行图形绘制，包括点、线、面和圆形、矩形的绘制。用户可以通过鼠标点击和移动来创建和编辑图形，支持左键点击增加点，右键点击结束绘制。此外，还提供了切换绘制模式的菜单选项。

        //鼠标绘图
		var activeShapePoints = [];
        var activeShape;
        var floatingPoint;
        var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
        //双击鼠标左键清除默认事件
        viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
        //绘制点
        function createPoint(worldPosition) {
            var point = viewer.entities.add({
                position: worldPosition,
                point: {
                    color: Cesium.Color.WHITE,
                    pixelSize: 5,
                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
                }
            });
            return point;
        }
        //初始化为线
        var drawingMode = '';
        //绘制图形
        function drawShape(positionData) {
            var shape;
            if (drawingMode === 'line') {
                // shape = viewer.entities.add({
                //     polyline: {
                //         positions: positionData,
                //         clampToGround: true,
                //         width: 3
                //     }
                // });
            } else if (drawingMode === 'polygon') {
                shape = viewer.entities.add({
                    polygon: {
                        hierarchy: positionData,
                        material: new Cesium.ColorMaterialProperty(Cesium.Color.WHITE.withAlpha(0.7))
                    }
                });
            } else if (drawingMode ===