Cesium+tomcat的倾斜摄影发布与Web加载

所以本文基于vue, cesium, tomcat, cesiumLab进行了倾斜摄影数据的发布与cesium加载展示，实现效果如下：

图1 总体效果图

主要思路如下：

①使用cesiumlab软件，将osgb数据转为cesium需要的3DTiles数据格式 。

②使用tomcat将3dtiles数据进行发布，并对tomcat进行跨域配置。

③使用cesuim访问上一步发布的倾斜摄影数据。

现在开始详细说明。

1. OSGB 转 3DTile 格式

        osgb如何得到我也不清楚，内业处理不是我在做，在此仅介绍如何把osgb转为3DTiles（3DTiles数据格式是Cesium官方自己开发的在Web加载三维模型的数据格式，现在已经被定为OGC标准），主要是依赖免费软件cesiumLab来转换，下载网址如下：Cesium实验室官网 。下载安装好以后，点击左侧的"倾斜摄影模型转换V4"，输入选择你的osgb文件，输出路径自己随便选。

图2 3dtiles数据格式制作

生成好以后会得到一个有tileset.json文件的倾斜摄影文件夹，到此处理完毕。

图3 3DTiles数据成果文件夹

2. tomcat发布3DTile格式的倾斜摄影文件

        把上一步生成好的3dtiles文件夹，扔到tomcat的webapps中即可。并根据下面提供的文件替换相关文件，解压后有说明文档，以解决跨域的问题，第一个是百度网盘，第二个是CSDN资源不要金币，自取。

①链接：https://pan.baidu.com/s/1oVeBN9d69SnQHW844ydEWQ  提取码：ckyy

②tomcat跨域jar.rar_web加载倾斜摄影-Web服务器文档类资源-CSDN下载

3. vue + cesium访问倾斜摄影服务

vue+cesium已经有大佬封装好了，直接用：GitHub - ShareQiu1994/cesium-vue: Cesium development template based on vueCli 4.x.x +

然后修改Home.vue文件如下代码，保存以后便可得到图1所示的场景。

<template>
  <div class="home">
    <div id="cesiumContainer" />
  </div>
</template>

<script>

export default {
  name: "Home",
  mounted() {
    let viewer = new Cesium.Viewer("cesiumContainer", {
      // 添加地形
      terrainProvider: new Cesium.CesiumTerrainProvider({
        url: Cesium.IonResource.fromAssetId(1),
        requestWaterMask: true,
        requestVertexNormals: true,
      }),
    });

    // 添加倾斜摄影模型
    let tileset = new Cesium.Cesium3DTileset({
      url: "/api/cesiumtest/3dtiles/tileset.json", //这个网址根据自己tomcat的地址进行修改
    });
    viewer.scene.primitives.add(tileset);
    viewer.zoomTo(tileset);
  },
};
</script>

<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>

主要问题：

        加载较慢，需要加入缓存机制，最快捷的方法就是在图2制作3DTiles数据格式的时候，有个“压缩参数”的选项配置，把那个打开就会对模型进行压缩，300多M可以压到10多M，极大提高加载速度。