cesium 画线（第一步）_cesium 蚂蚁线-CSDN博客

本文链接：https://blog.csdn.net/weixin_42448623/article/details/101023565
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>点击添加 有闪烁</title>
    <link rel="shortcut icon" type="image/x-icon" href="./img/favicon.ico" />
    <script src="Cesium/Cesium.js" ></script>
    <link rel="stylesheet" href="Cesium/Widgets/widgets.css">
    <style>
        html,body,#cesiumdiv{
            width:100%;
            height:100%;
            margin:0;
        }
        .right{
            position: fixed;
            background-color: rgba(30,36,50,0.6);
            right: 180px;
            top: 10px;
            z-index: 2;
            border:1px solid rgba(32,160,255,0.6);
            border-radius:3px;
            padding:10px;
            color:white;
        }
        .right span{
            display: inline-block;
            border:1px solid rgba(32,160,255,0.6);
            border-radius:3px;
            font-size: 14px;
            padding: 2px 4px;
            cursor: pointer;
        }
    </style>
    <script src="./js/GifImageProperty.js"></script>
    <script src="./js/navigation/viewerCesiumNavigationMixin.min.js"></script>
    <!-- <script src="./js/navigation/viewerCesiumNavigationMixin.css"></script> -->
    <!-- <script src="./node_modules/cesiumnavigation/viewerCesiumNavigationMixin.min.js"></script>  -->

</head>
<body>
<div id="cesiumdiv" >
    <div class="right">
        <!--<span class="point">绘制点</span>-->
        <span class="line">绘制线</span>
        <!--<span class="face">绘制面</span>-->
        <span class="clear">清除</span>
    </div>
    <div id="creditContainer" style="display: none;"></div>
</div>
<script>
    Cesium.Ion.defaultAccessToken = '你的秘钥';
        
    //创建地球
    var viewer = new Cesium.Viewer("cesiumdiv",{
        animation:true,
        terrainExaggeration:50.0,//地形夸张
        terrainProvider:new Cesium.createWorldTerrain({ //加载全球地形
            requestVertexNormals:true, //有水面效果
            requestWaterMask:true, //光照效果
        }),
        scene3DOnly:true,
        // creditContainer: "creditContainer",
    });
    viewer.extend(Cesium.viewerCesiumNavigationMixin, {});  
    viewer.cesiumWidget.creditContainer.style.display = "none";//去cesium logo水印
    // viewer.scene.globe.depthTestAgainstTerrain = true;// 打开深度检测，那么在地形以下的对象不可见

    var arr = [0];


    
    // viewer.cesiumNavigation.destroy();

    // var options = {}; // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
    // options.defaultResetView = Cesium.Rectangle.fromDegrees(80, 22, 130, 50);
    // options.enableCompass= true; // 用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。默认值为true。
    // options.enableZoomControls= false;// 用于启用或禁用缩放控件。true是启用，false是禁用。默认值为true。
    // options.enableDistanceLegend= false; // 用于启用或禁用距离图例。true是启用，false是禁用。默认值为true。
    // options.enableCompassOuterRing= true;// 用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。
    
    // viewer.extend(Cesium.viewerCesiumNavigationMixin, options);


    var navigationDiv = document.getElementById("navigationDiv");
    var compass = document.getElementsByClassName("compass")[0]
    console.log(navigationDiv,compass)
    //坐标存储
    var positions = [];
    var cesiumdiv =  document.getElementById("cesiumdiv");
    var lineStatus = false;
    var handlerlineStatus = false;
    var lineBtn = document.getElementsByClassName("line")[0];

    // new Cesium.PolylineGraphics({
    //     clampToGround:true
    // })


    //绘制线
    lineBtn.onclick = function(){
        lineStatus = true;
        cesiumdiv.style.cursor = 'crosshair';
    }
    var redLine;
    //ScreenSpaceEventHandler处理用户输入事件。可以添加自定义函数，以便在用户输入时执行。
    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    handler.setInputAction(function(event){
        //event position: a {x: 510, y: 345} 屏幕坐标
        if(!lineStatus){return}
        handlerlineStatus = true;

        //屏幕坐标转
        var ray = viewer.camera.getPickRay(event.position);
        var ellipsoid = viewer.scene.globe.ellipsoid;
        var cartesian = viewer.scene.globe.pick(ray,viewer.scene);
        //将笛卡尔坐标转换为地理坐标
        var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
        //将弧度转为度的十进制度表示
        var log = Cesium.Math.toDegrees(cartographic.longitude);
        var lat = Cesium.Math.toDegrees(cartographic.latitude);
        // 获取海拔高度
        var height1 = viewer.scene.globe.getHeight(cartographic);
        var height2 = cartographic.height;
        positions.push(cartesian);
        //添加实体
        // var en = viewer.entities.add({
        //     id:arr[arr.length-1],
        //     name:"点击",
        //     description:"cjgfjb",
        //     position:cartesian,
        //     billboard:{
        //         image: './img/default1.png',
        //         width:100,
        //         height:100
        //     }
        // })

        console.log(redLine.polyline.positions)
        if(positions.length>1){
            redLine.polyline.positions = positions; //更新线的点
            // viewer.entities.add(redLine);
        }
        
        
        arr.push(arr.length)
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    redLine = viewer.entities.add({
        name:arr[arr.length-1],
        polyline: {
            show : true,
            positions: [],//Cesium.Cartesian3.fromDegreesArray([110, 25, 130, 25]),
            width: 5,
            material:Cesium.Color.CORNFLOWERBLUE, //获取或设置折线的表面外观
            heightReference : Cesium.HeightReference.CLAMP_TO_GROUND,
        }
    });

    var end = [],endline ;
    viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
        //event position: a {x: 510, y: 345} 屏幕坐标
        if(!handlerlineStatus){return}
       
        var endpoint = Cesium.Cartesian3.fromDegreesArray([movement.endPosition.x,movement.endPosition.y]);   

    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
    
    
   
    

    //单击鼠标右键结束画点 线 面
    handler.setInputAction(function (movement) {
        pointStatus = false;
        lineStatus = false;
        faceStatus = false;
        cesiumdiv.style.cursor = 'unset'
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

    //清除
    var clearBtn = document.getElementsByClassName("clear")[0];
    clearBtn.onclick = function(){
        // for(var i=0;i<arr.length;i++){
        //     viewer.entities.removeById(arr[i]);//删除
        //     //viewer.entities.getById("rain").show = false; //隐藏实体
        // }

        pointStatus = false;
        lineStatus = false;
        faceStatus = false;
        handlerlineStatus = false;
        cesiumdiv.style.cursor = 'unset';
        // 移除所有实体Entity
        viewer.entities.removeAll();
    }


</script>
</body>
</html>