9. Cesium项目的迁移

视频介绍

大家好，欢迎大家回到山海鲸的二次开发的系列教程。

我们前面给大家简单介绍了山海鲸当中的一些组件的二次开发。今天，我们给大家介绍一下，如果希望把已有的Cesium GIS的现成项目移植到山海鲸当中来，我们可以怎么样去做这样的一个移植。

我们如果熟悉山海鲸的朋友们应该都知道，我们山海鲸在整个Cesium的开发上做得非常成熟。我们可以在官网看一下，我们对于Cesium本身的效果做了一个大幅的升级。我们可以看到这里，首先增加了一个空气透视，空气透视就是大气中的大气的雾的效果。同时，我们增加了像这种体积云，而且我们有高度指示物等等的，包括我们还内置了一些天气。而这些，更好的是，我们不仅是在整个Cesium上直接升级的，而且我们也可以直接支持Cesium的原生代码，直接拷进来，做一些微小的改动就可以直接生效了。

所以，大家如果之前老的项目是用Cesium JS去写的，那么可以直接移植过来，直接去享受这样的一个视效的升级。

那我们今天就来看一下，这块是怎么移植的。

我们打开我们的软件，在新建当中，我们就可以看到，我们选到3D地理信息（3DGIS），这里有个叫Cesium GIS集成开发，我们选中它，然后点击创建项目。这里，我们就给大家一个示例，我们来看一下这个示例，来换一下它整个的Cesium的代码。

这个示例我们可以看到，就是我们Cesium中的一个标准的示例。我们来看一下这个代码，二次开发代码到底是放在哪里的。我们双击鲸孪生，进入整个的这样一个项目的编辑。注意，我们Cesium的二次开发代码都是挂载在这个叫GIS层上的，这个位置的。我们之前的老版本，可能是会挂载到场景上或者鲸孪生上，我们现在最新的版本，都是挂载在GIS层上的，所以大家不要搞混了。

我们点击GIS层，然后这边看到代码，我们就可以看到整个这个我们已经挂载好的代码文件了。如果大家用的是我们新建的那个空白的GIS项目，甚至是比如，我们新建的空白的GIS项目，或者是我们新建的空白的孪生项目，那大家有了GIS层之后，也可以直接对它进行一个挂载。我们这里已经挂载好了，我建议大家用我们这个项目来去做，因为这个项目在很多的其他地方，也都给大家设置好了，比如说我们在场景上的这个主相机，还有这个原点自适应，都给大家设置好了，所以更简单一点。

我们回到这个GIS层，我们看到我们的代码，然后我们点击编辑。

这样子我们就打开了这个二次开发的代码了。我们可以看到，这个代码里面，实际上它在整个我们前面的extension当中的unique方法里面，我们写了很多的代码。这些代码除了第一句以外，其他的，都是我们San Castle里面的原生代码。

也就是说，大家只需要对第一句进行一个修改，就可以了，就可以移植过来。

我们看一下我们第一句是什么。我们第一句是在this.element上get一个mounted instance，get出来有两个，一个是Cesium整个的这样一个对象，我们Cesium，因为它有很多的一些类，都挂在在Cesium这个类这个相当于这个name space上的。然后第二个就是viewer，这是我们自己的Cesium viewer。我们可以看到下一句，viewer.thing.globe，这就是Cesium原生的一个接口了。

那么现在呢，我们来把整个这个东西换一个，我们换一个site castle的东西。我们打开我们前面的这样的一个Cesium的sandcastle，我们在里面去挑一个。我这个是我挑的，大家也可以去挑其他的，但是要注意，就是说，因为我们Cesium经常它会有一些新的，比如说我们这里的这个3DTiles Gaussian Splatting，对吧，这个是Cesium最新版的，我们会在后面去兼容。当然我们GISBox已经兼容了这个3D Tiles的高斯泼溅的这样一个切片，但是我们现在山海鲸本身的版本，目前的版本还是不支持这个的，因为这是最新版的。所以大家去挑的时候挑一些相对老一些的项目。当然了，如果大家看到这个视频的时候，山海鲸可能很有可能已经支持了。

我们这里就先选中这个，我们看一下，我们之前选中的是这个项目，我们可以对比一下这两个项目跟我们这个2K里面的代码的一个区别。我们可以看到就是第一句，第一句它是直接new一个Cesium viewer，而我们是直接get出来的instance。除第一句以外，剩下的句，直接从这里从头到尾一复制贴进来就好了。

那我们直接用这个point cloud这个项目。我们一样的，我们第一句这个创建，我们是没办法创建的，我们就不能在这里面直接创建。那连带的这里有个叫Terrain，对吧，那它是一个叫farm world Terrain，这个是在我们山海鲸里面直接设置的，所以我们不支持在代码上设置。剩下的，我们就可以直接从这里拷下来，拷到最尾上，Ctrl c。

让我们打开我们这个项目，然后注意，第一句不要动，我们从下面这句开始，一直到最下面。这当然大家还要注意哦，我们这个是必须放在我们的这个init方法里面的，大家千万不要把这个尾巴上的这个划括号给删错了哈。我们这样一贴，然后修正一下我们的Tab。

我们保存。保存完了之后呢，我们打开我们的软件，我们最好刷新一下，刷新一下之后，这个还是没有动，这个已经直接动过来，那这样非常好。如果大家这个东西没有变过来的话，大家可以关掉它重新打开就好了。

那这里我前面说了，我们本身因为没有全球影像，所以我们看这个跟我们的在Cesium里面的样子好像不太一样，这个因为我们全球影像是用手动去加载上去的，这个我们可以在这里去设置，我们点一下。

这里我要再说一下，就是说因为Cesium本身的这个，我们可以看到，这个已经跟我们Cesium 3CASTLE里面一模一样了。