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端展示点云