整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
們知道有一種快速建模的方式叫傾斜攝影，適用大場景的建模，快速逼真高效，本文分享傾斜攝影如何與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小時內與您取得聯系。
