Ceisum初始化、界面小控件、加载实体

上图

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.89/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.89/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    Cesium.Ion.defaultAccessToken = 'Cesium官网免费申请的密钥'

    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrainProvider: Cesium.createWorldTerrain(),
      homeButton:false,
      sceneModePicker:false,
      baseLayerPicker:false,
      navigationHelpButton:false,
      animation:false,
      timeline:false,
      fullscreenButton:false,
      vrButton:false,
      infoBox:true,

    });   
    var 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(viewer.entities);
  </script>
 </div>
</body>
<style>
   .cesium-viewer-toolbar{
     visibility: hidden;
   }
</style>
</html>

初始化以及界面小控件：

 Cesium.Ion.defaultAccessToken = 'Cesium官网免费申请的密钥'

 const viewer = new Cesium.Viewer('cesiumContainer', {
      terrainProvider: Cesium.createWorldTerrain(),		//为椭球表面提供地形或其他几何形状
      homeButton:false,			//主页按钮是否显示
      sceneModePicker:false,	//选择视角的模式，3D/2D/CV
      baseLayerPicker:false,	//底图选择器
      navigationHelpButton:false,	//导航帮助按钮
      animation:false,			//动画控件
      timeline:false,			//时间线
      fullscreenButton:false,	//全屏按钮
      vrButton:false,		//VR按钮
      infoBox:true,			//弹出信息框

    });

entity方式添加矩形

var redBox = viewer.entities.add({
    name : '一个矩形',
    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(viewer.entities);

CZML方式添加矩形

var czml = [{
    "id" : "czml",
    "name" : "矩形",
    "version" : "1.0"
},{
    "id" : "shape",
    "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]
        }
    }
}];
var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise);

赠人玫瑰，手有余香，记得随手点赞哦 ~

版权声明：本文为Enbir原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。