cesium动态绘制多边形(polygon)

朱颜辞镜、

已于 2023-09-27 21:01:48 修改

阅读量3.3k

点赞数

分类专栏： cesium 文章标签：前端 javascript 开发语言

于 2023-07-27 17:42:01 首次发布

本文链接：https://blog.youkuaiyun.com/qq_25519615/article/details/131965298

版权

cesium 专栏收录该内容

2 篇文章

订阅专栏

该文章展示了如何在Cesium1.95版本中通过三个坐标点动态调整多边形覆盖范围。首先，利用Cesium.CallbackProperty函数创建并实时更新多边形的位置；然后，通过定时器改变坐标点的经纬度来模拟位置变化，从而达到动态效果。示例代码中详细说明了实现步骤和关键函数的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中需要通过三个坐标点位动态调整覆盖范围，于是使用cesium实体对象中的多边形来实现(polygon),实现效果如下

第一步，先创建多边形，使用Cesium.CallbackProperty函数来实时更新位置

let positions = [
            110.0,
            30.0,
            120.0,
            30.0,
            115.0,
            40.0,
        ]

let polygon_height = viewer.entities.add({
            name: "polygon_height",
            polygon: {
                show: true,
                hierarchy:new Cesium.CallbackProperty(function () {
                    let arrPoint = new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(positions));
                    return arrPoint;
                }, false),
                height: 2,
                material: Cesium.Color.CYAN.withAlpha(0.5),
                outline: false,
                // outlineColor: Cesium.Color.BLACK,
            }
        })

第二步，使用定时器定时调用模拟位置变化

setInterval(()=>{
            positions[0] = 110 + Math.random()*20;
            positions[1] = 33 + Math.random()*10;

            positions[2] = 110 + Math.random()*20;
            positions[3] = 33 + Math.random()*10;

            positions[4] = 110 + Math.random()*20;
            positions[5] = 33 + Math.random()*10;
        },2000)

这样就完成了动态的多边形绘制了，完整代码如下

<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>动态绘制三角面</title>
    <link rel="stylesheet" href="Build/Cesium195/Widgets/widgets.css">
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
    </style>
    <script src="Build/Cesium195/Cesium.js"></script>
</head>
<body >
	<div id="cesiumContainer" class="fullSize"></div>
   
    <script type="module">


        Cesium.Ion.defaultAccessToken='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyMGFhNTBjMi1kNGM4LTRjYWQtYWZhMC05ZTJhY2U2Y2U0ODkiLCJpZCI6MzE2MzYsImlhdCI6MTY2MDcxODA4NX0.jljbTXZPBaeSdsU7vuWg8V01oV1-fEA_qUa_08wXvq0';
		
        const viewer = new Cesium.Viewer("cesiumContainer", {
            animation : true,//是否显示动画控件,左下角仪表
            fullscreenButton : false,//是否显示全屏按钮
            geocoder : false,//是否显示geocoder小器件，右上角查询按钮
            homeButton : false,//是否显示Home按钮
            infoBox : false,//是否显示信息框
            sceneModePicker : false,//是否显示3D/2D选择器
            scene3DOnly : true,//如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
            selectionIndicator : false,//是否显示选取指示器组件
            timeline : true,//是否显示时间轴
            navigationHelpButton : false,//是否显示右上角的帮助按钮
            baselLayerPicker:false,// 将图层选择的控件关掉，才能添加其他影像数据
            shadows: true,//是否显示背影
            shouldAnimate: true
        });


        //取消左键双击事件
        viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK); 

        //去除版权信息
        viewer._cesiumWidget._creditContainer.style.display = "none";

        //是否开启抗锯齿
        viewer.scene.fxaa = true;
        viewer.scene.postProcessStages.fxaa.enabled = true;

 
        var longitude = 110.0;
        var latitude = 30.0;

        viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(
                longitude,
                latitude,
                10000000.0
            ),
        });

        let positions = [
            110.0,
            30.0,
            120.0,
            30.0,
            115.0,
            40.0,
        ]

        let polygon_height = viewer.entities.add({
            name: "polygon_height",
            polygon: {
                show: true,
                hierarchy:new Cesium.CallbackProperty(function () {
                    let arrPoint = new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArray(positions));
                    return arrPoint;
                }, false),
                height: 2,
                material: Cesium.Color.CYAN.withAlpha(0.5),
                outline: false,
                // outlineColor: Cesium.Color.BLACK,
            }
        })


        setInterval(()=>{
            positions[0] = 110 + Math.random()*20;
            positions[1] = 33 + Math.random()*10;

            positions[2] = 110 + Math.random()*20;
            positions[3] = 33 + Math.random()*10;

            positions[4] = 110 + Math.random()*20;
            positions[5] = 33 + Math.random()*10;
        },2000)


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

注意：此案例是在cesium1.95版本上开发的