Cesium动态线绘制程序

tzbm123456

<Cesium动态线绘制程序>

2022年10月

tzbm123456

<script>
    function drawLine(){
        let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
        var line = undefined; //全局线对象
        var linearr = []; //线的坐标存储

        var tmpLine = undefined;
        var tmpLineArr = [];
    //1、鼠标左键点击事件监听
        handler.setInputAction(function (event) {
            //获取射线   
            var pick = viewer.camera.getPickRay(event.position);
            //获取射线与地球面交点的世界坐标点   
            var cartesian = viewer.scene.globe.pick(pick, viewer.scene);
            //如果世界坐标点存在
            if (cartesian) {

                //添加一个线对象
                if (!tmpLine) {
                    linearr.push(cartesian);
                    line = viewer.entities.add({
                        polyline: {
                            positions:new Cesium.CallbackProperty(function () {         
                                return linearr;
                            }, false),
                            width: 3,
                            // material: Cesium.Color.YELLOW,
                            material: new Cesium.PolylineDashMaterialProperty({
                                color: Cesium.Color.YELLOW,
                                dashLength: 20,
                                dashPattern: 255,
                            }),
                            clampToGround: true,
                        }
                    })
                    tmpLineArr.push(cartesian);
                    tmpLine = viewer.entities.add({
                        polyline: {
                            positions:new Cesium.CallbackProperty(function () {         
                                return tmpLineArr;
                            }, false),
                            width: 3,
                            material: Cesium.Color.RED,
                            clampToGround: true,
                        }
                    })
                } else {
                    linearr.push(cartesian);
                    tmpLineArr[0]=cartesian;
                }
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    //2、鼠标移动事件监听
        handler.setInputAction(function (event) {
            var pick = viewer.camera.getPickRay(event.endPosition);
            var cartesian = viewer.scene.globe.pick(pick, viewer.scene);
            console.log(cartesian);
            if (cartesian) {
                if(tmpLine){
                    tmpLineArr[1]=cartesian;               
                }
            }
            // 徒手绘制线
            // linearr[linearr.length-1]=cartesian;   
        },Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    //3、鼠标右键事件监听
        var tmpRightClick=Cesium.ScreenSpaceEventType.RIGHT_CLICK;
        var tmKeyboard=Cesium.KeyboardEventModifier.CTRL;
        handler.setInputAction(function (event) {
            // viewer.entities.remove(line);
            // viewer.entities.remove(tmpLine);
            var endline = viewer.entities.add({
                polyline: {
                    positions: linearr,
                    width: 10,
                    // material: Cesium.Color.YELLOW,
                    material: new Cesium.PolylineDashMaterialProperty({
                        color: new Cesium.Color (244,146,96,1.0),
                        dashLength: 20,
                        // dashPattern: parseInt('110000001111',2),
                        dashPattern: 255,
                    }),
                    clampToGround: true,
                    zIndex: 1,
                }
            })

            line = undefined;
            tmpLine = undefined;
            linearr = [];
            tmpLineArr = [];

            if (!handler.isDestroyed()){
                handler.destroy ();
                alert("handler.destroy ();")
            }

        }, tmpRightClick,tmKeyboard);
    }
</script>
<script>
//设置各种事件
    //1、点击'绘制直线'按钮事件
    document.getElementById("Draw").addEventListener("click",function(){
        drawLine();
        alert("drawLine()");
    })
</script>

tzbm123456

function drawLine(){
    alert("绘制折线")
    let handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
    var line = undefined; //全局线对象
    var linearr = []; //线的坐标存储

    var tmpLine = undefined;
    var tmpLineArr = [];
//1、鼠标左键点击事件监听
    handler.setInputAction(function (event) {
/*            
        //获取射线   
        var pick = viewer.camera.getPickRay(event.position);
        //获取射线与地球面交点的世界坐标点   
        var cartesian = viewer.scene.globe.pick(pick, viewer.scene);
*/
        var cartesian=viewer.scene.pickPosition(event.position);
        //如果世界坐标点存在
        if (cartesian) {

            //添加一个线对象
            if (!tmpLine) {
                linearr.push(cartesian);
                line = viewer.entities.add({
                    polyline: {
                        positions:new Cesium.CallbackProperty(function () {         
                            return linearr;
                        }, false),
                        width: 3,
                        // material: Cesium.Color.YELLOW,
                        material: new Cesium.PolylineDashMaterialProperty({
                            color: Cesium.Color.YELLOW,
                            dashLength: 20,
                            dashPattern: 255,
                        }),
                        clampToGround: false,
                    }
                })
                tmpLineArr.push(cartesian);
                tmpLine = viewer.entities.add({
                    polyline: {
                        positions:new Cesium.CallbackProperty(function () {         
                            return tmpLineArr;
                        }, false),
                        width: 1,
                        material: Cesium.Color.RED,
                        clampToGround: false,
                    }
                })
            } else {
                linearr.push(cartesian);
                tmpLineArr[0]=cartesian;
            }
        }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
//2、鼠标移动事件监听
    handler.setInputAction(function (event) {
/*            
        var pick = viewer.camera.getPickRay(event.endPosition);
        var cartesian = viewer.scene.globe.pick(pick, viewer.scene);
*/
        var cartesian1=viewer.scene.pickPosition(event.endPosition);
        if (cartesian1) {
            if(tmpLine){
                tmpLineArr[1]=cartesian1;
                console.log(cartesian1);            
            }
        }
        // 徒手绘制线
        // linearr[linearr.length-1]=cartesian;   
    },Cesium.ScreenSpaceEventType.MOUSE_MOVE);
//3、鼠标右键事件监听
    var tmpRightClick=Cesium.ScreenSpaceEventType.RIGHT_CLICK;
    var tmKeyboard=Cesium.KeyboardEventModifier.CTRL;
    handler.setInputAction(function (event) {
        // viewer.entities.remove(line);
        // viewer.entities.remove(tmpLine);
        var endline = viewer.entities.add({
            polyline: {
                positions: linearr,
                width: 10,
                // material: Cesium.Color.YELLOW,
                material: new Cesium.PolylineDashMaterialProperty({
                    color: Cesium.Color.YELLOW,
                    dashLength: 20,
                    // dashPattern: parseInt('110000001111',2),
                    dashPattern: 255,
                }),
                depthFailMaterial: new Cesium.PolylineOutlineMaterialProperty(
                    {
                        color: Cesium.Color.YELLOW,
                    }
                    ),
                clampToGround: false,
                zIndex: 1,
            }
        })

        line = undefined;
        tmpLine = undefined;
        linearr = [];
        tmpLineArr = [];

        if (!handler.isDestroyed()){
            handler.destroy ();
            alert("handler.destroy ();")
        }

    }, tmpRightClick,tmKeyboard);
}

tzbm123456

kj01邮箱Oyc050703120212_

用户名：k'j01邮箱密码：Oyc050703120212_