cesium可视化空间数据2

首页 > 代码库 > cesium可视化空间数据2

2024-09-03 20:12:32 221人阅读

圆柱圆锥体

<!DOCTYPE html>
<html>
<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>Hello World!</title>
  <script src="../Cesium/Build/Cesium/Cesium.js"></script>
  <style>
 @import url(../Cesium/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>
var viewer = new Cesium.Viewer(‘cesiumContainer‘);

var greenCylinder = viewer.entities.add({//Cylinder圆柱体
    name : ‘Green cylinder with black outline‘,
    position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 200000.0),
    cylinder : {
        length : 400000.0,
        topRadius : 200000.0,//圆柱体的顶部半径。
        bottomRadius : 200000.0,//    圆柱体底部的半径。
        material : Cesium.Color.GREEN.withAlpha(0.5),//绿色半透明
        outline : true,//轮廓
        outlineColor : Cesium.Color.DARK_GREEN//轮廓颜色深绿色
    }
});

var redCone = viewer.entities.add({//红色圆锥体
    name : ‘Red cone‘,
    position: Cesium.Cartesian3.fromDegrees(-105.0, 40.0, 200000.0),
    cylinder : {
        length : 400000.0,
        topRadius : 0.0,
        bottomRadius : 200000.0,
        material : Cesium.Color.RED
    }
});

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

技术分享

<!DOCTYPE html>
<html>
<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>Hello World!</title>
  <script src="../Cesium/Build/Cesium/Cesium.js"></script>
  <style>
 @import url(../Cesium/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>
var viewer = new Cesium.Viewer(‘cesiumContainer‘);

var redPolygon = viewer.entities.add({//红色多边形
    name : ‘Red polygon on surface‘,
    polygon : {
        hierarchy : Cesium.Cartesian3.fromDegreesArray([-115.0, 37.0,
                                                        -115.0, 32.0,
                                                        -107.0, 33.0,
                                                        -102.0, 31.0,
                                                        -102.0, 35.0]),//hierarchy多边形层次
        material : Cesium.Color.RED
    }
});

var greenPolygon = viewer.entities.add({//绿色多边形
    name : ‘Green extruded polygon‘,
    polygon : {
        hierarchy : Cesium.Cartesian3.fromDegreesArray([-108.0, 42.0,
                                                        -100.0, 42.0,
                                                        -104.0, 40.0]),
        extrudedHeight: 500000.0,//多边形的挤出面和椭圆面之间的距离（以米为单位）
        material : Cesium.Color.GREEN,
        closeTop : false,
        closeBottom : false
    }
});

var orangePolygon = viewer.entities.add({//橙色多边形
    name : ‘Orange polygon with per-position heights and outline‘,
    polygon : {
        hierarchy : Cesium.Cartesian3.fromDegreesArrayHeights([-108.0, 25.0, 100000,
                                                               -100.0, 25.0, 100000,
                                                               -100.0, 30.0, 100000,
                                                               -108.0, 30.0, 300000]),
        extrudedHeight: 0,//多边形的挤出面和椭圆面之间的距离（以米为单位）。
        perPositionHeight : true,//对每个位置使用options.positions的height，而不使用options.height来确定高度
        material : Cesium.Color.ORANGE.withAlpha(0.5),//橘色半透明
        outline : true,
        outlineColor : Cesium.Color.BLACK//黑色轮廓线
    }
});

var bluePolygon = viewer.entities.add({//蓝色多边形
    name : ‘Blue polygon with holes and outline‘,
    polygon : {
        hierarchy : {
            positions : Cesium.Cartesian3.fromDegreesArray([-99.0, 30.0,
                                                            -85.0, 30.0,
                                                            -85.0, 40.0,
                                                            -99.0, 40.0]),
            holes : [{
                positions : Cesium.Cartesian3.fromDegreesArray([
                    -97.0, 31.0,
                    -97.0, 39.0,
                    -87.0, 39.0,
                    -87.0, 31.0
                ]),
                holes : [{
                    positions : Cesium.Cartesian3.fromDegreesArray([
                        -95.0, 33.0,
                        -89.0, 33.0,
                        -89.0, 37.0,
                        -95.0, 37.0
                    ]),
                    holes : [{
                        positions : Cesium.Cartesian3.fromDegreesArray([
                            -93.0, 34.0,
                            -91.0, 34.0,
                            -91.0, 36.0,
                            -93.0, 36.0
                        ])
                    }]
                }]
            }]
        },
        material : Cesium.Color.BLUE.withAlpha(0.5),
        outline : true,
        outlineColor : Cesium.Color.BLACK
    }
});

viewer.zoomTo(viewer.entities);

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

技术分享

<!DOCTYPE html>
<html>
<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>Hello World!</title>
  <script src="../Cesium/Build/Cesium/Cesium.js"></script>
  <style>
 @import url(../Cesium/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>
var viewer = new Cesium.Viewer(‘cesiumContainer‘);

var redLine = viewer.entities.add({
    name : ‘Red line on the surface‘,
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray([-75, 35,
                                                        -125, 35]),
        width : 5,//多段线的宽度（以像素为单位）。
        material : Cesium.Color.RED
    }
});

var glowingLine = viewer.entities.add({
    name : ‘Glowing blue line on the surface‘,
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray([-75, 37,
                                                        -125, 37]),
        width : 10,
        material : new Cesium.PolylineGlowMaterialProperty({
            glowPower : 0.2,//发光强度的属性，以总线宽度的百分比表示。
            color : Cesium.Color.BLUE
        })
    }
});

var orangeOutlined = viewer.entities.add({
    name : ‘Orange line with black outline at height and following the surface‘,
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 39, 250000,
                                                               -125, 39, 250000]),
        width : 5,
        material : new Cesium.PolylineOutlineMaterialProperty({
            color : Cesium.Color.ORANGE,
            outlineWidth : 2,
            outlineColor : Cesium.Color.BLACK
        })
    }
});

var purpleArrow = viewer.entities.add({
    name : ‘Purple straight arrow at height‘,
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArrayHeights([-75, 43, 500000,
                                                               -125, 43, 500000]),
        width : 10,
        followSurface : false,
        material : new Cesium.PolylineArrowMaterialProperty(Cesium.Color.PURPLE)
    }
});

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


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

技术分享

cesium可视化空间数据2

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > cesium可视化空间数据2

cesium可视化空间数据2

看完仍有疑问？有类似问题直接问程序猿