基于JavaScript在Web端用Cesium加载自己的点云数据

1.上传数据至Cesium ion

    首先，我们需要登录Cesium ion官网，登录界面地址：Cesium ion

    登录成功后会进入这样的操作界面，点击My Assets能够看到我们上传的数据,上传数据可以点击Add data进行数据的上传。

 图1 主界面

 图2 我的资产

      点击Adjust Tileset Location可以在这里调整点云数据的位置。

图3 调整位置

       注意这里的ID号就是最后在Cesium里调用点云的凭据。

 2.代码编写

       在这里使用前端框架VUE进行代码的编写，话不多说，直接上代码！

//Cesium_Pointcloud.vue代码内容
<template>
  <el-main>
    <el-row>
      <el-col :span="24" class="colone">
        <el-row class="rowmap">
          <div id="RealMap" class="fullSize"></div>
        </el-row>
      </el-col>
    </el-row>
  </el-main>
</template>

<script>
export default {
  name: "RealMap",
  mounted() {
    mounted: {
      this.$nextTick(function () {
        //这里写入自己在Cesium ion里面的Token
        Cesium.Ion.defaultAccessToken =
          "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhOGUyYmQ3NC1jYmIzLTQ1OGYtYTMyNy04MzU0ODBkNzQ1NTEiLCJpZCI6NzY0NTgsImlhdCI6MTYzOTQ5MTUwMX0.Cc4wztmIqlr2MBzeijm8OVXMoptqFjTYEkB2svrY5hc";
        //定义Cesium地球
        var viewer = new Cesium.Viewer("RealMap",{
          geocoder: false,
          homeButton: true,
          sceneModePicker: false,
          baseLayerPicker: true,
          navigationHelpButton: false,
          animation: false,
          timeline: false,
          fullscreenButton: false,
          vrButton: false,
        });
        //这里定义要加入的点云数据，ID即为之前Cesium ion里资产数据的ID
        var tileset = viewer.scene.primitives.add(
          new Cesium.Cesium3DTileset({
            url: Cesium.IonResource.fromAssetId(1432554),
          })
        );

        tileset.readyPromise
          .then(function () {
            viewer.zoomTo(tileset);
            var extras = tileset.asset.extras;
            if (
              Cesium.defined(extras) &&
              Cesium.defined(extras.ion) &&
              Cesium.defined(extras.ion.defaultStyle)
            ) {
              tileset.style = new Cesium.Cesium3DTileStyle(
                extras.ion.defaultStyle
              );
            }
          })
          .otherwise(function (error) {
            console.log(error);
          });

        
      });
    }
  },
};
</script>
//样式
<style scoped>
.rowmap {
  background-color: white;
  border: 1px solid #dfe4ed;
  height: 900px !important;
  /*margin: 20px 10px 10px 10px !important;*/
  border: 1px solid #dfe4ed;
  box-shadow: 0px 0px 2px 2px lightgrey;
}
.rowaside {
  background-color: white;
  height: 380px !important;
  margin: 20px 10px 10px 10px !important;
  border: 2px solid #dfe4ed;
  box-shadow: 0px 0px 2px 2px lightgrey;
  line-height: 20px;
}
.coltwo {
  background-color: white;
  height: 828px !important;

  float: right;
}
.colone {
  background-color: white;
  height: 828px !important;
  /*border:1px solid #B3C0D1;*/
  float: left;
}
#RealMap {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  /*width: 100%;*/
  /*height: calc(100vh);*/
  z-index: 1;
}
.el-aside {
  background-color: white;
  color: #333;
  text-align: center;
  line-height: 1000px;
  height: 1000px;
}
.el-main {
  /*background-color: #20a0ff;*/
  border: 1px solid #dfe4ed;
  background-color: white;
  height: 910px;
  text-align: center;
  line-height: 60px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>

      同时记得在index.html中引入Cesium.js

<script src="https://cesium.com/downloads/cesiumjs/releases/1.89/Build/Cesium/Cesium.js"></script>

3.Web端展示

      这里省略了一些VUE里面的固有操作，只放入了一些核心代码，如需成功实现下图web端显示，还需加入一些VUE基本代码，这里不再赘述。下面是Web端展示结果：

 图4 Web端展示点云