屋顶光伏项目中三维勘察技术之CesiumLab集成三维模型

在做屋顶光伏项目的过程中，发现屋顶勘探是一个很麻烦的事情，需要人工上屋顶测量，效率地下且存在安全隐患，人工测量的尺寸容易漏掉且人员素质参差不齐，导致最后给出的草图无法理解，导致设计中存在很大的麻烦，所以使用无人机进行测绘是很有必要的，最后将测绘得到的三维模型通过cesiumlab展示在web端。

文章目录

一、CesiumLab介绍
二、 CesiumLab安装使用
三、上传三维数据
四、项目中集成EearthSDK
五、项目部署
六、项目效果

一、CesiumLab介绍

CesiumLab官网

现有开源的三维可视化端目前有 Cesium 平台，Unreal Engine 平台，OsgEarth 平台等。开源的 HTTP 数据服务有 tomcat，nginx 等。但是数据预处理部分基本没有完整的开源产品，这是CesiumLab就应运而生了。CesiumLab 就是定位围绕Cesium 平台的一套完整易用的数据预处理工具集，并且已经内置了一个启动可用的轻量高性能 http 分发服务，以及集成了我们另外一个产品 EarthSDK 做为数据预览工具，所以整个 CesiumLab的功能三大部分：

数据预处理，包括地形、影像、模型、矢量、倾斜、BIM、点云等相关切片工具。
分发服务，包括影像切片服务，地形切片服务、3dtiles 切片服务等。
EarthSDK 预览页面，用来基于 EarthSDK 整合三维场景。

二、 CesiumLab安装使用

在官网下载CesiumLab，在本机电脑上安装，安装完成后在浏览器会弹出软件的使用页面，推荐使用谷歌浏览器作为默认浏览器
注册后登录到CesiumLab，在数据处理界面进行数据的预处理，可以将其他格式的三维数据转换成3dtiles数据，具体的使用方法可以参考官方文档，点击任务栏的帮助按钮即可打开官方使用手册。

三、上传三维数据

没有使用CesiumLab自带的分发服务，因为项目最终部署到公网上，所以将文件服务器作为项目的存放位置，好统一进行维护和管理。可以将上传至minion文件服务器或者阿里云OOS文件服务器，具体的上传操作可以百度。

注意：文件服务器需要开启下载功能，即文件能通过浏览器直接访问，minio中需要通过mc进行配置开启下载，阿里云OOS需要开启ACL权限。

文件上传到MINIO文件服务器

屋顶光伏项目中三维勘察技术之CesiumLab集成三维模型

文件上传到阿里云OOS文件服务器

屋顶光伏项目中三维勘察技术之CesiumLab集成三维模型

四、项目中集成EearthSDK

EarthSDK是CesiumLab实验室出品的一款基于Cesium的开源的免费三维地图二次开发包，在Cesium的功能上增加了很多实用功能

测量：包含点位、距离、高度、面积、体积、挖方计算等；
分析：包含可视阈、模型压平（挖空）、视频融合、模型剖切、地形挖孔、水面倒影等；
效果：包含阴影、泛光、环境遮蔽、景深、轮廓、夜视，限制光照方向，全屏亮度调整等；
动画：包含路径动画、相机跟随，扫描线、OD线等；
标绘：包含常规点线面标注，各种箭头标，以及军事标注库等；

基于Vue2的项目搭建可以点击参考博文，按照博文的配置进行项目的配置，这里需要注意的地方是index.html中需要引入js

<!-- 使用EarthSDK进行开发 -->
<script src="./js/XbsjEarth/XbsjEarth.js"></script>
<script src="./js/XbsjEarthUI/xbsj.js"></script>

项目中使用EarthUI，必须引入xbsj.js和XbsjEarth.js，具体的组件编码

<template>
  <div style="width: 100%; height: 100%">
    <div ref="earthContainer" style="width: 100%; height: 100%">
    </div>
  </div>
</template>

<script>
  export default {
    name: "EarthComp",
    data() {
      return {
        _earth: null, // 注意：Earth和Cesium的相关变量放在vue中，必须使用下划线作为前缀！
        _disposers:null,
        _tileset:null,
      };
    },
    // 1.1 资源加载
    mounted() {
      this.initEarth();

    },
    methods:{
      initEarth(){
        XbsjEarthUI.create("app").then(earthUI => {
          //注意：此处使用earthUI.earth.sceneTree这种方式配置会导致不生效
          earthUI.earth.xbsjFromJSON({
            "sceneTree": {
              "root": {
                "children": [
                  {
                    "czmObject": {
                      "xbsjType": "Tileset",
                      "xbsjGuid": "3f0f663c-969e-435c-8f9d-d6e9a88637c1",
                      "name": "report",
                      "url": "http://192.168.1.100:9000/company/report/tileset.json",
                      "xbsjClippingPlanes": {},
                      "xbsjCustomShader": {}
                    }
                  }
                ]
              }
            },
            "cameraViewManager": {
              "lastView": {
                "position": [
                  2.0325835657412252,
                  0.6961622952277993,
                  1516.2813055917127
                ],
                "rotation": [
                  5.950795411990839e-14,
                  -0.7856327871041935,
                  6.283185307179586
                ],
                "fov": 1.0471975511965976,
                "near": 0.1,
                "far": 10000000000
              }
            }
          });
          //earthUI.earth.sceneTree.$refs.viewshed.czmObject.flyTo();

          window.uia = earthUI;
        });
      },
    },
    // 1.2 资源销毁
    beforeDestroy() {
      // vue程序销毁时，需要清理相关资源
      this._disposers.forEach(d => d());
      this._disposers.length = 0;
      this._earth = this._earth && this._earth.destroy();
    },
  }
</script>

<style scoped>

</style>

五、项目部署

将项目打包部署到公网，按照正常的部署流程，将编译完成后的dist文件放到nginx的html目录下即可完成nginx部署。

注意：项目部署时容易出现跨域问题，我的解决方式是通过nginx解决跨域问题，具体的配置如下

 server {
                listen       80;
                server_name  127.0.0.1;

                #后台服务配置，配置了这个location便可以通过http://域名/jeecg-boot/xxxx 访问             
                location ^~ /company {
                        #使用minio服务器
                        #proxy_pass               http://ip:9000/company/;
                        #使用阿里云OSS，注意最后的/不要有
                        proxy_pass               https://域名/company;

                }
                #解决Router(mode: 'history')模式下，刷新路由地址不能找到页面的问题
                location / {
                        root   html/dist;
                        index  index.html index.htm;
                        if (!-e $request_filename) {
                                rewrite ^(.*)$ /index.html?s=$1 last;
                                break;
                        }
                }
        }