Cesium叠加超图二维服务、三维场景模型

前言

Cesium作为开源的库要加超图的服务则需要适配层去桥接超图与Cesium的数据格式。这个工作iClient系列已经做好，相比用过超图二维的道友们可以理解：要用Openlayer加载超图二维，那就用iClient for Openlayer库去加载；同样的要用Cesium加载超图三维就要用iClient for Cesium库。

道友们一看：竟然要换库？我过来学cesium，你让我装iClient for Cesium？退！退！退！

道友不必惊慌！ iClient for Cesium是在Cesium库基础上做增量开发，没有对原本的Cesium做改动，童叟无欺！直白点说，你装完 iClient for Cesium仍然可以按Cesium官方API文档进行Cesium的原生开发。

项目地址：cesium-demo

Cesium文档：Cesium Documentation

iClient for Cesium文档：iClient for Cesium Documentation

一、引入iClient for Cesium

1.下载

这里的引入不是重复引入，而是直接替换。

超图的包需要手动下载，没有npm仓库（其实Cesium有npm仓库和没npm一个样，npm下下来之后还是要手动复制）

SuperMap iClient3D for Cesium 产品下载

SuperMap技术资源中心|为您提供全面的在线技术服务

百度网盘

2.引入

引入方式与Cesium库一模一样，将下载后的包Build文件夹下的Cesium文件夹复制到public/static下，而后在index.html中引入，详细步骤见初始化Cesium

二、加载超图二维

现在做三维的目的其核心概念为二三维一体化，所以在三维系统中叠加二维数据也是很重要的一个环节。

1.补充知识

Cesium中有3个核心对象，Cesium、Scene、Viever，Cesium对象是最底层的，其代表了整个Cesium 库和渲染引擎的实例，而Scene 对象是 Cesium 库中一个重要的组成部分，它表示一个场景，包含了地球、相机、光照、图层等元素，Viever则是对Scene进行了更高级的封装，Viewer继承了Scene的所有功能。总之这三个对象上的属性方法很多是共享的，记住这句话，不然看API会很懵。

2.imageryLayers

首先要明确原生Cesium中加载二维用什么。一般都用imageryLayers去加载，例如球体表面的影像就是如此叠加映射上去的，放大看，这些影像（无高程图片）都是平贴在球体表面的二维服务。与之相反的是地形、白膜等有高程的服务。

3.使用imageryLayers加二维

// Add an OpenStreetMaps layer
const imageryLayer = new Cesium.ImageryLayer(new Cesium.OpenStreetMapImageryProvider({
  url: "https://tile.openstreetmap.org/"
}));
scene.imageryLayers.add(imageryLayer);

官网加载影像的示例代码，定义一个ImageryLayer对象，传OpenStreetMapImageryProvider对象（可以理解成数据源），最终添加到场景中的imageryLayers集合里去。

4.SuperMapImageryProvider

上面提到了加载oms地图只需要使用OpenStreetMapImageryProvider构造数据源，那么加载超图也只需要SuperMapImageryProvider即可，这个可以理解为将超图数据源转化成cesium的imageryLayer数据源，桥接适配层。

不同的是，OpenStreetMapImageryProvider是Cesium官方自己写的，并收纳到了Cesium源码中；而SuperMapImageryProvider是超图自己写的，毕竟超图没开源（bushi）。

加载代码贴上：

这里进行了简单封装，附加了关闭逻辑。

添加逻辑附加了图层定位；添加时顺便打上guid标识，方便后续关闭图层。

    dealSuperMapService({ url, active, guid }) {
      const imageryLayers = this.viewer.imageryLayers;
      if (active) {
        const provider = new Cesium.SuperMapImageryProvider({
          url
        });
        // 皆为cesium原生，只有SuperMapImageryProvider为桥接层
        const layer = imageryLayers.addImageryProvider(provider);
        layer.guid = guid;
        this.viewer.flyTo(layer, { duration: 0 });
      } else {
        const layers = imageryLayers._layers;
        const target = layers.find(e => e.guid === guid);
        imageryLayers.remove(target);
      }
    },

三、加载超图三维场景

1. open()方法

此方法为超图所创，挂载Scene对象上，可以自行查看，Cesium文档中无此方法，下面是超图iClient for Cesium文档对open的简要介绍。

openSuperMapScene({ url, active }) {
      const scene = this.viewer.scene;
      if (active) {
        scene.open(url);
      } else {
        scene.layers.removeAll();
      }
    },

使用起来简单粗暴，直接往里面丢url即可，地址精确到realspace，也就是超图场景服务的地址，其为全加载，也就是说场景中的所有图层全部加载，无过滤功能。说其粗暴可不敢乱言，只因确实迷之操作，超图社区官方答复附上，该方法打开场景后不可以关闭。

2.addS3MTilesLayerByScp

仍然是超图自研方法，挂接在scene上，用于添加超图的三维切片缓存图层。相较于open()而言，可进行图层过滤，可以进行自由移除。S3M是超图自主研发的用于存储三维数据的格式。

   dealSingleSuperMapScene({ url, active,layerName }) {
      const scene = this.viewer.scene;
      if (active) {
        const promise = scene.addS3MTilesLayerByScp(url, {
          name: layerName
        });
        promise.then(layer => {
          this.viewer.flyTo(layer, { duration: 0 });
        });
      } else {
        scene.layers.remove(layerName);
      }
    }

其中layers类是超图在cesium基础上加的，目的是用来管理场景中的所有图图层。

四、重点说下图层定位

1.吐槽

原本是不想说这个事的，主要是看到网上的资源太差了，这一方面的全是胡诌，随便举个例子，这是网上随便搜的，大多数都是这种。这有啥用，你高低整个几何定位吧？

2.图层定位

打开图层后定位到查看区域，这才是符合操作逻辑，增强用户体验的流程，上文档：

官方文档说的很清晰，flyTo方法的第一个参数支持的参数类型，其中之一就有ImagerLayer类型，结论就是二维图层可以直接当作target参数直接定位。

说完了二维图层的定位再来说说三维场景的定位，这里原本根据文档走，addS3MTilesLayerByScp返回的图层并不在flyTo的可选参数之中，因为返回的类型是S3MTileLayer类型，但超图文档flyTo并没有补充target的该类型，而该图层又可以直接flyTo定位成功，属于是文档不完善了。