Cesium入门（二）

my陈

已于 2024-12-17 10:12:42 修改

阅读量1.3k

点赞数

分类专栏： webGis 文章标签： javascript

于 2021-12-17 14:56:12 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44552168/article/details/121991363

版权

webGis 专栏收录该内容

4 篇文章

订阅专栏

一、创建项目并配置环境

拷贝Cesium中的Build文件夹和Apps中的HelloWorld.html页面放到demo文件夹中

修改插件引用路径

    <!-- <script src="../Build/Cesium/Cesium.js"></script> -->
    <script src="./Build/Cesium/Cesium.js"></script>

二、查看demo

直接访问HelloWorld会报错所以要将项目发布在访问，如果使用的是VScode

下载 Live Server 这个扩展插件然后在thml页面右键即可

就会出现实例上的页面

三、页面控件的展示和隐藏

 var viewer = new Cesium.Viewer('cesiumContainer', {
        //一般false都是隐藏控件
        // 一种地理位置搜索工具，用于显示相机访问的地理位置,默认使用微软的Bing地图
        geocoder: false,
        //首页位置，点击之后将视图跳转到默认视角
        homeButton: false,
        //切换2D、3D 和 Columbus View (CV) 模式
        sceneModePicker: false,
        //选择三维数字地球的底图（imagery and terrain）
        baseLayerPicker: false,
        //帮助提示，如何操作数字地球
        navigationHelpButton: false,
        //控制视窗动画的播放速度
        animation: false,
        //展示商标版权和数据源
        //creditContainer: 'cesiumContainer',
        //展示当前时间和允许用户在进度条上拖动到任何一个指定的时间
        timeline: false,
        //视察全屏按钮
        fullscreenButton: false,
        //切换vr模式
        vrButton: false,
      })

四、地图上添加几何体

 //在地图上创建几何图形
      var redBox = viewer.entities.add({
        name: '黄色的正方体',
        //在地图上的坐标(x,y,z)
        position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 100.0),
        //几何图形的属性
        box: {
          //设置几何图形的长宽高
          dimensions: new Cesium.Cartesian3(200.0, 200.0, 200.0),
          //设置图形的颜色和透明度
          material: new Cesium.Color(1.0, 1.0, 0.0, 1.0),
          //几何图形的边线
          outline: true,
          //几何图形边线的颜色
          outlineColor: Cesium.Color.RED,
        },
      })
      //控制地图缩放到创建的几何图形位置
      viewer.zoomTo(viewer.entities)
      //三秒后删除几何图形
      setTimeout(function () {
        //删除几何图形
        // viewer.entities.remove(redBox)
      }, 3000)

五、完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../resource/bucket.css" />
  </head>
  <body>
    <div id="cesiumContainer"></div>
    <script src="../resource/Build/Cesium/Cesium.js"></script>
    <script>
      var viewer = new Cesium.Viewer('cesiumContainer', {
        //一般false都是隐藏控件
        // 一种地理位置搜索工具，用于显示相机访问的地理位置,默认使用微软的Bing地图
        geocoder: false,
        //首页位置，点击之后将视图跳转到默认视角
        homeButton: false,
        //切换2D、3D 和 Columbus View (CV) 模式
        sceneModePicker: false,
        //选择三维数字地球的底图（imagery and terrain）
        baseLayerPicker: false,
        //帮助提示，如何操作数字地球
        navigationHelpButton: false,
        //控制视窗动画的播放速度
        animation: false,
        //展示商标版权和数据源
        //creditContainer: 'cesiumContainer',
        //展示当前时间和允许用户在进度条上拖动到任何一个指定的时间
        timeline: false,
        //视察全屏按钮
        fullscreenButton: false,
        //切换vr模式
        vrButton: false,
      })
      //在地图上创建几何图形
      var redBox = viewer.entities.add({
        name: '黄色的正方体',
        //在地图上的坐标(x,y,z)
        position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 100.0),
        //几何图形的属性
        box: {
          //设置几何图形的长宽高
          dimensions: new Cesium.Cartesian3(200.0, 200.0, 200.0),
          //设置图形的颜色和透明度
          material: new Cesium.Color(1.0, 1.0, 0.0, 1.0),
          //几何图形的边线
          outline: true,
          //几何图形边线的颜色
          outlineColor: Cesium.Color.RED,
        },
      })
      //控制地图缩放到创建的几何图形位置
      viewer.zoomTo(viewer.entities)
      //三秒后删除几何图形
      setTimeout(function () {
        //删除几何图形
        // viewer.entities.remove(redBox)
      }, 3000)
    </script>
  </body>
</html>