1-cesium添加实体

最新推荐文章于 2024-09-07 08:14:00 发布

冰块的旅行

最新推荐文章于 2024-09-07 08:14:00 发布

阅读量670

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/qq_38967150/article/details/108847711

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

此博客展示了如何使用Cesium JavaScript库在3D地球上创建不同类型的实体，包括浮空的绿色圆形、地表红色椭圆形和带有旋转效果的蓝色椭圆柱。代码示例详细说明了实体的位置、尺寸、颜色、高度和旋转等属性的设置方法。

摘要由CSDN通过智能技术生成

cesium添加实体的效果:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加实体</title>
    <script src="../Build/Cesium/Cesium.js"></script>
    <style>
        @import url(../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 type="text/javascript">
        var viewer = new Cesium.Viewer('cesiumContainer');//使用默认的地球影像
        //浮空的绿色圆形
        var greenCircle = viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(-111.0, 40.0, 150000.0),
            name: 'Green circle at height',
            ellipse: {
                semiMinorAxis: 300000.0,//axis:英文 轴心
                semiMajorAxis: 300000.0,
                height: 200000.0, //浮空
                material: Cesium.Color.GREEN
            }
        });
        //红色椭圆形，位于地表，带轮廓
        var redEllipse = viewer.entities.add({
            //不带高度
            position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
            name: 'Red ellipse on surface with outline',
            ellipse: {
                semiMinorAxis: 250000.0,
                semiMajorAxis: 400000.0,
                material: Cesium.Color.RED.withAlpha(0.5),
                outline: true,
                outlineColor: Cesium.Color.RED
            }
        });
        //蓝色椭圆柱，旋转了角度
        var blueEllipse = viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(-95.0, 40.0, 100000.0),
            name: 'Blue translucent, rotated, and extruded ellipse',
            ellipse: {
                semiMinorAxis: 150000.0,
                semiMajorAxis: 300000.0,
                extrudedHeight: 800000.0,  //拉伸
                rotation: Cesium.Math.toRadians(45), //旋转
                material: Cesium.Color.BLUE.withAlpha(0.7),
                outline: true
            }
        });

        viewer.zoomTo(viewer.entities);
    </script>

</body>

</html>

冰块的旅行

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1-cesium添加实体

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>添加实体</title> <script src="../Build/Cesium/Cesium.js"&
复制链接

扫一扫

专栏目录