青岛cms建站系统,科学做视频网站,wordpress如何修改首页,在线整合营销推广前言 Cesium作为开源的库要加超图的服务则需要适配层去桥接超图与Cesium的数据格式。这个工作iClient系列已经做好#xff0c;相比用过超图二维的道友们可以理解#xff1a;要用Openlayer加载超图二维#xff0c;那就用iClient for Openlayer库去加载#xff1b;同样的要用…前言 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、VieverCesium对象是最底层的其代表了整个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定位成功属于是文档不完善了。
