整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
们知道有一种快速建模的方式叫倾斜摄影，适用大场景的建模，快速逼真高效，本文分享倾斜摄影如何与cesium结合的话题，那么什么是倾斜摄影呢？倾斜摄影适用什么场景的建模？倾斜摄影相对于纯手工建模方式有什么优劣势？倾斜摄影数据如何导入到cesium中，代码示例是什么？希望本文能够让大家对二者有个大体认识。
倾斜摄影（Oblique Photography）是一种航空摄影技术，它使用多个相机从不同的角度同时拍摄地面，从而获取建筑物和其他地物的立体信息。这些图像可以用来生成高精度的三维模型，包括地形模型、纹理网格和三维建筑模型。这种方法特别适合于城市环境和大范围区域的快速三维重建。
倾斜摄影适用于：
优势：
劣势：
Cesium支持加载3D Tiles格式的数据，这意味着你需要将倾斜摄影产生的OSGB或其他格式的数据转换成3D Tiles格式。这个转换过程通常通过专门的工具完成，例如：
一旦转换完成，你就可以使用Cesium JavaScript API来加载数据。下面是一个简单的代码示例：
Javascript
1// 创建Cesium Viewer实例
2var viewer = new Cesium.Viewer('cesiumContainer');
3
4// 定义3D Tiles数据集
5var tileset = new Cesium.Cesium3DTileset({
6 url : 'path/to/your/tileset.json'
7});
8
9// 将数据集添加到Viewer中
10viewer.scene.primitives.add(tileset);
11
12// 调整视图以聚焦数据集
13viewer.zoomTo(tileset);在这个例子中，tileset.json是3D Tiles数据集的根文件，它包含了加载和渲染所有3D Tiles所需的信息。
倾斜摄影结合Cesium为快速构建大场景的三维模型提供了强大工具。通过使用现代的WebGIS技术，如Cesium，可以轻松地将这些模型集成到交互式的地理空间应用中，为用户提供沉浸式体验。
大象数据工场→10年经验的可视化/数字孪生领域的老司机，专注大数据设计和前端交互部分。关注我，带您了解最新的观点、技术、干货，如有需求可私信。
斜摄影+GIS(一)
倾斜摄影越来越火，几乎都上天了......。所以我们想来聊一聊关于它的一些内容以及背后应用的一些GIS平台。
倾斜摄影
01、倾斜摄影——通过在同一飞行平台上搭载多台传感器，可以同时从多个角度采集影像。通过引入该技术，使目前高昂的三维建模成本大大降低(然而实际上还是没有降低，如果你能很好的应用Esri的CityEngine，实际上你不能，可能你就不会总是想到倾斜模型，后期有空我们会详细说CityEngine的建模)，它在低空以45度角对地面进行摄影测量，可以获得近地高分辨率航测影像。它克服了正射影像只能从垂直角度拍摄的局限，可获得5个或更多角度的倾斜摄影影像，大大提升了数据采集的速度和效率。
一句话——正射、倾斜的角度给地物拍照，最后得到的成片交给建模软件(Smart3D\PhotsScan\Pix4D\Photomesh等)做空三、出模型——得到 真三维模型成果。航拍的照片通常会包含经纬度、飞机拍摄时刻航向角度、俯仰角度等信息，而建模的时候这些信息至关重要。
倾斜摄影拍摄示意图
似乎一说好像也没啥可新鲜的，原理就那样、建模又是自动的......可是为啥就能那么火呢，优点来了。在说优点之前先给大家说说前不久巴黎圣母院发生大火的事——“2019年4月15日巴黎圣母院遭遇大火，损毁极为严重，同时法国总统马克龙宣布将进行重建"。
且不说巴黎圣母火灾事件是不是意外(其实我感觉不是。为啥呢，你看这张图..........有人在火灾现场微笑，看到这个新闻的时候，我真想来句(wo)兄 (cao)弟 (.........)厉害)。
好了，回归正题：前面说到巴黎圣母院损毁极为严重，同时又要重建， 可是未毁之前的巴黎圣母院长啥样呢，总得有个参考吧，巴黎圣母院长啥样总得知道吧！于是乎就找到了以下谷歌地球上收录的巴黎圣母院的倾斜摄影模型——巴黎圣母院原来长这样
说到这里大概就明白了我想说的了，在我看来----倾斜摄影有一大优势——不可移动文物保护、留存。当然这已经是倾斜摄影后期应用了。但也要说明仅仅有巴黎圣母院的倾斜摄影模型，重建工作还是很难进行的，万幸的是艺术史学家Andrew Tallon从2010年开始历时6年，首次运用先进的激光扫描结合实景技术，对整座巴黎圣母院的构造进行的精确还原记录。相关记录的误差能控制在5毫米左右（五毫米!五毫米!五毫米!）。同时《刺客信条》的游戏设计师也曾花两年时间按照1:1对巴黎圣母院进行还原，精确到每一块砖。
嗯，不错，这样重建应该有希望了，也许哪天有机会去参观一下呢是吧，梦想还是要有的！剩下的——就差钱了
倾斜摄影-创新
02、利用倾斜摄影技术的最大优势在于可以全自动、高效率、高精度、高精细的构建地表全要素三维模型。自动建模和智能测图一下搞定了摄影测量几十年来苦苦追求的目标。所以呢，这项技术还是很厉(niu)害(bi)的。当然了更应该佩服的是那群通过计算机视觉技术利用足够数量和有足够重叠度的倾斜影像实现了三维重建的程序员，这才形成了倾斜摄影技术或倾斜摄影测量技术。而我自己觉得倾斜摄影这项技术带来的最大创新在于这项技术带来了——无人机、实景三维建模平台软件、实景三维模型后期建模修模、GIS+上下游产业应用的空间。带来了一大批高薪就业的机会 。哈哈
整个倾斜摄影的应用可以囊括——无人机、倾斜摄影相机、航拍航线、航飞、空三、建模——面向应用（三维测图、结合3DGIS定制开发应用）等。
倾斜摄影GIS应用平台
03、第一次接触倾斜摄影的时候遇到了一个需求——我觉得可以把它就叫"矢量化"吧，虽然他有个高大上的叫法——单体化——曾经我的老师告诉我有些专业名词就是要说得专业一点，不然就显得你不够专业了，只不过本质上就是同一件事。学GIS的都知道，地图学实践第一件事应该就是"画图",老师会给一张影像，让学生把影像上的房屋或者农田等地理对象按点、线、面等归类画出来。这样做的根本原因是卫星或者飞机拍摄到的影像并不能自动对影像上的农田、建筑、道路等地物进行自动识别分类，所以需要手动的对影像上的每一类每一块地物进行手动分类标识，以便后期的入库存留管理(长期以来我都不是很明白这里入库的意思，直到后来同学去做了类似的工作给我讲了大致流程后才解我心中疑惑)。而对倾斜摄影模型来所，做的单体化就类似二维GIS影像矢量化一样的工作，因为倾斜摄影模型本质上还是一张影像，只不过带了Z值。
有机会我们来讨论一下倾斜摄影建模，毕竟它其实也挺有趣的，而github上也有大神开源了底层建模的源码......
几家平台介绍
一：Cesium——WebGL技术+三维球开源框架+大数据渲染
从师兄哪儿了解到，Cesium起初是一个做.NET的大神在自己项目中遇到的同时，思考基于webgl技术写的一套三维虚拟地球框架，这让我自然的联想到为什么Cesium默认底图是微软的BingMap，可能这哥们很喜欢微软。Cesium到现在已经迭代到1.56版，在各方面已经相当成熟。有OGC社区标准的3DTiles数据规范虽然积极因素很大，但是从国内国外使用Cesium来拓展自己webgl三维球的GIS厂商来看就知道了。
Cesium支持倾斜摄影分层分户单体化、影像黑边代码控制透明、支持3DTiles倾斜摄影、BIM数据加载和lod，支持实WMS\WFS\WMTS标准OGS服务等。
二：ArcGIS ——ArcGIS的Web3D来得很迟
ArcGIS API for JavaScript4.x，Esri推出的旗帜鲜明对接64位ArcGIS Pro的WebGL开发包，ArcGIS这一套完全是自己自主开发，底层用了Dojo框架，用ArcGIS开发一个好处就是你压根不必要准备好一个谷歌浏览器环境，dojo屏蔽了浏览器差异。不仅仅于此，用ArcGIS平台一个好处就是你在桌面配的效果，只管放心的发布服务，桌面什么风格，发布后服务绝对就是什么风格，不用担心风格、样式丢失......，一个字："爽"！
短期内的web三维崛起，还是挺期待ArcGIS的。
三：SuperMap——借助二三维一体化占据国内三维市场第一
用超图的软件：流程简易，容易上手入门，场景配置、服务发布流程简易，国内服务好，有中文api，同时还能拨打客服电话咨询开发中遇到的问题。
但是超图的WebGL较早的投入到了Cesium的怀抱，而早期的Cesium 问题较多，超图在拿到源码后为了适配自己的其他产品，修复了不少bug，同时Cesium团队也在对这些bug进行修复。后来就出现了超图的代码与Cesium团队代码合不上的情况，所以，所以、所以、到现在，超图的WebGL版本还是1.41，其实社区已经有很大的更新呼声了。相信不久就能更新了吧，因为1.4x到1.5x Cesium确实进行大的更新迭代和功能修复。
四：skyline——与谷歌地球同源的3D数字虚拟地球
其实在各家三维球开发过程中最避不开的就是相机飞行与四角矩阵的计算，Cesium提供的方法各种参数要一一的调试测试，费九牛二虎之力才能找到一个合适的角度，后来师兄教了我自己来计算四角矩阵我才差不多解决这个问题。在此之前飞行方法真的是很头疼。不过假如你是使用Skyline，你就能体会到skyline提供的飞行方法多么的稳定、强大。
广州君和信息技术有限公司专注BIM咨询|软件出售|BIM平台研发|建模出图|BIM培训|工程动画
们在设计网站的时候，有时候为了体现出别具一格的风格，往往会设计出一些特殊的风格。这里就举一个比较常见的例子 —— 倾斜的背景颜色。
在CSS中，没有某一个属性能够直接实现倾斜的背景颜色，而是需要通过一些“手段”来实现。最常想到的方案就是在内容的底部放置一个div，给这个div设定一个背景颜色，然后让这个div倾斜一个角度，从而实现倾斜的背景颜色。比如像下图所示的案例：
那么下面就来用一个基本的实例来解释并实现倾斜背景的效果：
首先要说明一下，页面导航条是固定在页面顶部的，导航条不会随着页面的滚动而移动。这个效果的实现非常简单，就是利用了 position 这个属性的 fixed 值来实现的。
我下面的代码实例中，HTML用来给页面上添加元素，而在 CSS 部分需要精细化的设定属性的参数值，而且需要若干个HTML标签的CSS来配合，从而实现倾斜背景的效果。所以我在CSS代码部分用了比较多的注释来描述这些属性的效果和目的，大家在阅读的时候可以将 CSS 结合着 HTML 一起来理解。或者可以直接拿我的这个实例作为一个模板来使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="navbar-bg">
<ul class="navbar">
<li class="item">
<a href="https://www.baidu.com">Home</a>
</li>
<li class="item">
<a href="https://www.baidu.com">Home</a>
</li>
<li class="item">
<a href="https://www.baidu.com">Home</a>
</li>
<li class="item">
<a href="https://www.baidu.com">Home</a>
</li>
<li class="item sign">
<a href="https://www.baidu.com">Sign</a>
</li>
</ul>
</div>
<div class="box-bg">
<div class="box">
<div class="item">
<h1>Title</h1>
<p>This is the description for title.</p>
<button>click me</button>
</div>
<div class="item">
<h1>Title</h1>
<p>This is the description for title.</p>
<button>click me</button>
</div>
<div class="item">
<h1>Title</h1>
<p>This is the description for title.</p>
<button>click me</button>
</div>
</div>
</div>
<div class="content">
<h1>This is content</h1>
</div>
<div class="footer">
<div class="footer-bg">
<ul class="list">
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
</ul>
</div>
</div>
</body>
</html>为了让导航条和其他元素都能够与页面的两边留出距离，我在实际内容标签的外围又包裹了一层div，主要在这个包裹的div里设定左右内间距，从而实现两边留白的效果。这些外围包裹的 div 的 class 名称一般都会有一个后缀 "-bg"。
在实际内容的排列时，我采用了更加方便灵活的弹性布局，这样会相对的减少HTML和CSS的代码量。
另外，如果想要实现倾斜的背景颜色，那么这些带有 bg 后缀的 div 就是需要倾斜的标签。倾斜这些 div 其实很简单，只需要设定一个 transform: skew(0deg, -9deg) 这样的CSS代码即可，但是我们可以想象一下，原本是长方形的 div 按照 Y 轴逆时针旋转了一个弧度（-9deg）后，它会变成一个平行四边形，这个平行四边形是左边低右边高。这样就会露出它后面的白色的 body 的部分。所以这种玩法麻烦的地方就是如何通过多个 CSS 属性的配合来遮住露出的白色的body部分。下面就来看一下这个HTML对应的 CSS 代码部分。
在大家阅读 CSS 的代码之前，我给出一个原理图来解释一下其中的原理：
当外围的 div 倾斜了之后，就需要把内容部分的div的上部的内间距增大，以此来遮住平行四边形的左侧露出的白色区域。这是页面上部区域的原理。
那么页面底部也同样需要实现这样倾斜背景颜色的设计，这样才能将风格一致，产生美感。原理还是这个原理图所示的逻辑，不同的地方在于，底部最外围的 div 不倾斜，而是需要两个属性，height 和 overflow-y，并且这个 div 不能带有背景颜色。它们的作用是当它里面的内容超出这个 div 的区域时就不显示，这样就会让上图中蓝色的平行西变形的左下角区域被红色的框线裁剪掉，从而让这个div 乖乖的呆在页面的底部。而这个 div 里面一层的 div 需要让它倾斜，而且还带有一个背景颜色。这样组合出来的效果就是一个看似是左右两边是竖线，下部是横线，只有上部是斜线的带有背景颜色的四边形，这个四边形里面是实际的页面内容。
最终的样子在这篇 CSS 代码的最后展示出来了。
*请认真填写需求信息，我们会在24小时内与您取得联系。
