其他分享
首页 > 其他分享> > cesium-绘制多边形

cesium-绘制多边形

作者：互联网

cesium-绘制多边形

通过Entity添加形状

创建entity

let redBox = viewer.entities.add({
        name: 'Red box with black outline',
        position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
        box: {
            dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
            material: Cesium.Color.RED.withAlpha(0.5),
            outline: true,
            outlineColor: Cesium.Color.BLACK
        }
    });

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Use correct character set. -->
    <meta charset="utf-8"/>
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <title>绘制多边形</title>
    <script src="../lib/Cesium-1.89/Build/Cesium/Cesium.js"></script>
    <style>
        @import url(../lib/Cesium-1.89/Build/Cesium/Widgets/widgets.css);

        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>

</head>
<body>
<div id="cesiumContainer"></div>
<script>
    Cesium.Ion.defaultAccessToken = "token";
    let viewer = new Cesium.Viewer('cesiumContainer');
    let redBox = viewer.entities.add({
        name: 'Red box with black outline',
        position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
        box: {
            dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
            material: Cesium.Color.RED.withAlpha(0.5),
            outline: true,
            outlineColor: Cesium.Color.BLACK
        }
    });

    viewer.zoomTo(redBox);

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

效果如下：

image-20220108125125411

通过czml创建

czml

        let czml = [{
            "id": "document",
            "name": "box",
            "version": "1.0"
        }, {
            "id": "shape2",
            "name": "Red box with black outline",
            "position": {
                "cartographicDegrees": [-107.0, 40.0, 300000.0]
            },
            "box": {
                "dimensions": {
                    "cartesian": [400000.0, 300000.0, 500000.0]
                },
                "material": {
                    "solidColor": {
                        "color": {
                            "rgba": [255, 0, 0, 128]
                        }
                    }
                },
                "outline": true,
                "outlineColor": {
                    "rgba": [0, 0, 0, 255]
                }
            }
        }];

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Use correct character set. -->
    <meta charset="utf-8"/>
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <title>绘制多边形</title>
    <script src="https://data.sunbt.ltd/lib/Cesium-1.89/Build/Cesium/Cesium.js"></script>
    <style>
        @import url(https://data.sunbt.ltd/lib/Cesium-1.89/Build/Cesium/Widgets/widgets.css);

        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>

</head>
<body>
<div id="cesiumContainer"></div>
<script>
    Cesium.Ion.defaultAccessToken = "token";
    let viewer = new Cesium.Viewer('cesiumContainer');


    //测试czml方式，可以描述动画
    function czml() {
        let czml = [{
            "id": "document",
            "name": "box",
            "version": "1.0"
        }, {
            "id": "shape2",
            "name": "Red box with black outline",
            "position": {
                "cartographicDegrees": [-107.0, 40.0, 300000.0]
            },
            "box": {
                "dimensions": {
                    "cartesian": [400000.0, 300000.0, 500000.0]
                },
                "material": {
                    "solidColor": {
                        "color": {
                            "rgba": [255, 0, 0, 128]
                        }
                    }
                },
                "outline": true,
                "outlineColor": {
                    "rgba": [0, 0, 0, 255]
                }
            }
        }];

        let dataSourcePromise = Cesium.CzmlDataSource.load(czml);
        viewer.dataSources.add(dataSourcePromise);
        viewer.zoomTo(dataSourcePromise);
    }

  czml();
</script>
</body>
</html>

标签：box,多边形,outline,Cesium,czml,300000.0,cesium,let,绘制
来源： https://blog.csdn.net/qq_36213352/article/details/122380459