干貨：傾斜攝影數(shù)據(jù)如何導(dǎo)入到Cesium中

們知道有一種快速建模的方式叫傾斜攝影，適用大場景的建模，快速逼真高效，本文分享傾斜攝影如何與cesium結(jié)合的話題，那么什么是傾斜攝影呢？傾斜攝影適用什么場景的建模？傾斜攝影相對于純手工建模方式有什么優(yōu)劣勢？傾斜攝影數(shù)據(jù)如何導(dǎo)入到cesium中，代碼示例是什么？希望本文能夠讓大家對二者有個(gè)大體認(rèn)識。

傾斜攝影概述

傾斜攝影（Oblique Photography）是一種航空攝影技術(shù)，它使用多個(gè)相機(jī)從不同的角度同時(shí)拍攝地面，從而獲取建筑物和其他地物的立體信息。這些圖像可以用來生成高精度的三維模型，包括地形模型、紋理網(wǎng)格和三維建筑模型。這種方法特別適合于城市環(huán)境和大范圍區(qū)域的快速三維重建。

適用場景

傾斜攝影適用于：

城市三維建模
地形和地貌的三維重建
道路、橋梁等基礎(chǔ)設(shè)施建模
自然災(zāi)害評估和應(yīng)急響應(yīng)
歷史遺跡和考古遺址的記錄
規(guī)劃和設(shè)計(jì)項(xiàng)目

相對于純手工建模的優(yōu)勢和劣勢

優(yōu)勢：

快速建模：傾斜攝影可以迅速覆蓋大面積區(qū)域，而手工建模則耗時(shí)且成本高。
高精度和細(xì)節(jié)：自動化的數(shù)據(jù)處理可以達(dá)到高精度，且能夠捕捉到建筑物和地形的細(xì)節(jié)。
真實(shí)感：由真實(shí)照片生成的紋理，使得模型具有更高的真實(shí)感。
自動化：大部分過程可以自動化，減少了人工干預(yù)的需求。

劣勢：

數(shù)據(jù)處理需求：需要專業(yè)的軟件和計(jì)算資源來處理和分析大量圖像數(shù)據(jù)。
光照和陰影問題：不同光照條件下的圖像可能影響模型質(zhì)量。
隱私和安全問題：可能涉及個(gè)人隱私和敏感地點(diǎn)的安全問題。

導(dǎo)入傾斜攝影數(shù)據(jù)到Cesium中

Cesium支持加載3D Tiles格式的數(shù)據(jù)，這意味著你需要將傾斜攝影產(chǎn)生的OSGB或其他格式的數(shù)據(jù)轉(zhuǎn)換成3D Tiles格式。這個(gè)轉(zhuǎn)換過程通常通過專門的工具完成，例如：

Cesium ion
3D Tiles Converter (cesium.com/downloads/)
其他第三方工具

一旦轉(zhuǎn)換完成，你就可以使用Cesium JavaScript API來加載數(shù)據(jù)。下面是一個(gè)簡單的代碼示例：

Javascript
1// 創(chuàng)建Cesium Viewer實(shí)例
2var viewer = new Cesium.Viewer('cesiumContainer');
3
4// 定義3D Tiles數(shù)據(jù)集
5var tileset = new Cesium.Cesium3DTileset({
6    url : 'path/to/your/tileset.json'
7});
8
9// 將數(shù)據(jù)集添加到Viewer中
10viewer.scene.primitives.add(tileset);
11
12// 調(diào)整視圖以聚焦數(shù)據(jù)集
13viewer.zoomTo(tileset);

在這個(gè)例子中，tileset.json是3D Tiles數(shù)據(jù)集的根文件，它包含了加載和渲染所有3D Tiles所需的信息。

傾斜攝影結(jié)合Cesium為快速構(gòu)建大場景的三維模型提供了強(qiáng)大工具。通過使用現(xiàn)代的WebGIS技術(shù)，如Cesium，可以輕松地將這些模型集成到交互式的地理空間應(yīng)用中，為用戶提供沉浸式體驗(yàn)。

大象數(shù)據(jù)工場→10年經(jīng)驗(yàn)的可視化/數(shù)字孿生領(lǐng)域的老司機(jī)，專注大數(shù)據(jù)設(shè)計(jì)和前端交互部分。關(guān)注我，帶您了解最新的觀點(diǎn)、技術(shù)、干貨，如有需求可私信。

斜攝影+GIS(一)

傾斜攝影越來越火，幾乎都上天了......。所以我們想來聊一聊關(guān)于它的一些內(nèi)容以及背后應(yīng)用的一些GIS平臺。

傾斜攝影

01、傾斜攝影——通過在同一飛行平臺上搭載多臺傳感器，可以同時(shí)從多個(gè)角度采集影像。通過引入該技術(shù)，使目前高昂的三維建模成本大大降低(然而實(shí)際上還是沒有降低，如果你能很好的應(yīng)用Esri的CityEngine，實(shí)際上你不能，可能你就不會總是想到傾斜模型，后期有空我們會詳細(xì)說CityEngine的建模)，它在低空以45度角對地面進(jìn)行攝影測量，可以獲得近地高分辨率航測影像。它克服了正射影像只能從垂直角度拍攝的局限，可獲得5個(gè)或更多角度的傾斜攝影影像，大大提升了數(shù)據(jù)采集的速度和效率。

一句話——正射、傾斜的角度給地物拍照，最后得到的成片交給建模軟件(Smart3D\PhotsScan\Pix4D\Photomesh等)做空三、出模型——得到真三維模型成果。航拍的照片通常會包含經(jīng)緯度、飛機(jī)拍攝時(shí)刻航向角度、俯仰角度等信息，而建模的時(shí)候這些信息至關(guān)重要。

傾斜攝影拍攝示意圖

似乎一說好像也沒啥可新鮮的，原理就那樣、建模又是自動的......可是為啥就能那么火呢，優(yōu)點(diǎn)來了。在說優(yōu)點(diǎn)之前先給大家說說前不久巴黎圣母院發(fā)生大火的事——“2019年4月15日巴黎圣母院遭遇大火，損毀極為嚴(yán)重，同時(shí)法國總統(tǒng)馬克龍宣布將進(jìn)行重建"。

且不說巴黎圣母火災(zāi)事件是不是意外(其實(shí)我感覺不是。為啥呢，你看這張圖..........有人在火災(zāi)現(xiàn)場微笑，看到這個(gè)新聞的時(shí)候，我真想來句(wo)兄 (cao)弟 (.........)厲害)。

好了，回歸正題：前面說到巴黎圣母院損毀極為嚴(yán)重，同時(shí)又要重建，可是未毀之前的巴黎圣母院長啥樣呢，總得有個(gè)參考吧，巴黎圣母院長啥樣總得知道吧！于是乎就找到了以下谷歌地球上收錄的巴黎圣母院的傾斜攝影模型——巴黎圣母院原來長這樣

說到這里大概就明白了我想說的了，在我看來----傾斜攝影有一大優(yōu)勢——不可移動文物保護(hù)、留存。當(dāng)然這已經(jīng)是傾斜攝影后期應(yīng)用了。但也要說明僅僅有巴黎圣母院的傾斜攝影模型，重建工作還是很難進(jìn)行的，萬幸的是藝術(shù)史學(xué)家Andrew Tallon從2010年開始?xì)v時(shí)6年，首次運(yùn)用先進(jìn)的激光掃描結(jié)合實(shí)景技術(shù)，對整座巴黎圣母院的構(gòu)造進(jìn)行的精確還原記錄。相關(guān)記錄的誤差能控制在5毫米左右（五毫米!五毫米!五毫米!）。同時(shí)《刺客信條》的游戲設(shè)計(jì)師也曾花兩年時(shí)間按照1:1對巴黎圣母院進(jìn)行還原，精確到每一塊磚。

嗯，不錯(cuò)，這樣重建應(yīng)該有希望了，也許哪天有機(jī)會去參觀一下呢是吧，夢想還是要有的！剩下的——就差錢了

傾斜攝影-創(chuàng)新

02、利用傾斜攝影技術(shù)的最大優(yōu)勢在于可以全自動、高效率、高精度、高精細(xì)的構(gòu)建地表全要素三維模型。自動建模和智能測圖一下搞定了攝影測量幾十年來苦苦追求的目標(biāo)。所以呢，這項(xiàng)技術(shù)還是很厲(niu)害(bi)的。當(dāng)然了更應(yīng)該佩服的是那群通過計(jì)算機(jī)視覺技術(shù)利用足夠數(shù)量和有足夠重疊度的傾斜影像實(shí)現(xiàn)了三維重建的程序員，這才形成了傾斜攝影技術(shù)或傾斜攝影測量技術(shù)。而我自己覺得傾斜攝影這項(xiàng)技術(shù)帶來的最大創(chuàng)新在于這項(xiàng)技術(shù)帶來了——無人機(jī)、實(shí)景三維建模平臺軟件、實(shí)景三維模型后期建模修模、GIS+上下游產(chǎn)業(yè)應(yīng)用的空間。帶來了一大批高薪就業(yè)的機(jī)會。哈哈

整個(gè)傾斜攝影的應(yīng)用可以囊括——無人機(jī)、傾斜攝影相機(jī)、航拍航線、航飛、空三、建模——面向應(yīng)用（三維測圖、結(jié)合3DGIS定制開發(fā)應(yīng)用）等。

傾斜攝影GIS應(yīng)用平臺

03、第一次接觸傾斜攝影的時(shí)候遇到了一個(gè)需求——我覺得可以把它就叫"矢量化"吧，雖然他有個(gè)高大上的叫法——單體化——曾經(jīng)我的老師告訴我有些專業(yè)名詞就是要說得專業(yè)一點(diǎn)，不然就顯得你不夠?qū)I(yè)了，只不過本質(zhì)上就是同一件事。學(xué)GIS的都知道，地圖學(xué)實(shí)踐第一件事應(yīng)該就是"畫圖",老師會給一張影像，讓學(xué)生把影像上的房屋或者農(nóng)田等地理對象按點(diǎn)、線、面等歸類畫出來。這樣做的根本原因是衛(wèi)星或者飛機(jī)拍攝到的影像并不能自動對影像上的農(nóng)田、建筑、道路等地物進(jìn)行自動識別分類，所以需要手動的對影像上的每一類每一塊地物進(jìn)行手動分類標(biāo)識，以便后期的入庫存留管理(長期以來我都不是很明白這里入庫的意思，直到后來同學(xué)去做了類似的工作給我講了大致流程后才解我心中疑惑)。而對傾斜攝影模型來所，做的單體化就類似二維GIS影像矢量化一樣的工作，因?yàn)閮A斜攝影模型本質(zhì)上還是一張影像，只不過帶了Z值。

有機(jī)會我們來討論一下傾斜攝影建模，畢竟它其實(shí)也挺有趣的，而github上也有大神開源了底層建模的源碼......

幾家平臺介紹

一：Cesium——WebGL技術(shù)+三維球開源框架+大數(shù)據(jù)渲染

從師兄哪兒了解到，Cesium起初是一個(gè)做.NET的大神在自己項(xiàng)目中遇到的同時(shí)，思考基于webgl技術(shù)寫的一套三維虛擬地球框架，這讓我自然的聯(lián)想到為什么Cesium默認(rèn)底圖是微軟的BingMap，可能這哥們很喜歡微軟。Cesium到現(xiàn)在已經(jīng)迭代到1.56版，在各方面已經(jīng)相當(dāng)成熟。有OGC社區(qū)標(biāo)準(zhǔn)的3DTiles數(shù)據(jù)規(guī)范雖然積極因素很大，但是從國內(nèi)國外使用Cesium來拓展自己webgl三維球的GIS廠商來看就知道了。

Cesium支持傾斜攝影分層分戶單體化、影像黑邊代碼控制透明、支持3DTiles傾斜攝影、BIM數(shù)據(jù)加載和lod，支持實(shí)WMS\WFS\WMTS標(biāo)準(zhǔn)OGS服務(wù)等。

二：ArcGIS ——ArcGIS的Web3D來得很遲

ArcGIS API for JavaScript4.x，Esri推出的旗幟鮮明對接64位ArcGIS Pro的WebGL開發(fā)包，ArcGIS這一套完全是自己自主開發(fā)，底層用了Dojo框架，用ArcGIS開發(fā)一個(gè)好處就是你壓根不必要準(zhǔn)備好一個(gè)谷歌瀏覽器環(huán)境，dojo屏蔽了瀏覽器差異。不僅僅于此，用ArcGIS平臺一個(gè)好處就是你在桌面配的效果，只管放心的發(fā)布服務(wù)，桌面什么風(fēng)格，發(fā)布后服務(wù)絕對就是什么風(fēng)格，不用擔(dān)心風(fēng)格、樣式丟失......，一個(gè)字："爽"！

短期內(nèi)的web三維崛起，還是挺期待ArcGIS的。

三：SuperMap——借助二三維一體化占據(jù)國內(nèi)三維市場第一

用超圖的軟件：流程簡易，容易上手入門，場景配置、服務(wù)發(fā)布流程簡易，國內(nèi)服務(wù)好，有中文api，同時(shí)還能撥打客服電話咨詢開發(fā)中遇到的問題。

但是超圖的WebGL較早的投入到了Cesium的懷抱，而早期的Cesium 問題較多，超圖在拿到源碼后為了適配自己的其他產(chǎn)品，修復(fù)了不少bug，同時(shí)Cesium團(tuán)隊(duì)也在對這些bug進(jìn)行修復(fù)。后來就出現(xiàn)了超圖的代碼與Cesium團(tuán)隊(duì)代碼合不上的情況，所以，所以、所以、到現(xiàn)在，超圖的WebGL版本還是1.41，其實(shí)社區(qū)已經(jīng)有很大的更新呼聲了。相信不久就能更新了吧，因?yàn)?.4x到1.5x Cesium確實(shí)進(jìn)行大的更新迭代和功能修復(fù)。

四：skyline——與谷歌地球同源的3D數(shù)字虛擬地球

其實(shí)在各家三維球開發(fā)過程中最避不開的就是相機(jī)飛行與四角矩陣的計(jì)算，Cesium提供的方法各種參數(shù)要一一的調(diào)試測試，費(fèi)九牛二虎之力才能找到一個(gè)合適的角度，后來師兄教了我自己來計(jì)算四角矩陣我才差不多解決這個(gè)問題。在此之前飛行方法真的是很頭疼。不過假如你是使用Skyline，你就能體會到skyline提供的飛行方法多么的穩(wěn)定、強(qiáng)大。

們在設(shè)計(jì)網(wǎng)站的時(shí)候，有時(shí)候?yàn)榱梭w現(xiàn)出別具一格的風(fēng)格，往往會設(shè)計(jì)出一些特殊的風(fēng)格。這里就舉一個(gè)比較常見的例子 —— 傾斜的背景顏色。

在CSS中，沒有某一個(gè)屬性能夠直接實(shí)現(xiàn)傾斜的背景顏色，而是需要通過一些“手段”來實(shí)現(xiàn)。最常想到的方案就是在內(nèi)容的底部放置一個(gè)div，給這個(gè)div設(shè)定一個(gè)背景顏色，然后讓這個(gè)div傾斜一個(gè)角度，從而實(shí)現(xiàn)傾斜的背景顏色。比如像下圖所示的案例：

那么下面就來用一個(gè)基本的實(shí)例來解釋并實(shí)現(xiàn)傾斜背景的效果：

首先要說明一下，頁面導(dǎo)航條是固定在頁面頂部的，導(dǎo)航條不會隨著頁面的滾動而移動。這個(gè)效果的實(shí)現(xiàn)非常簡單，就是利用了 position 這個(gè)屬性的 fixed 值來實(shí)現(xiàn)的。

我下面的代碼實(shí)例中，HTML用來給頁面上添加元素，而在 CSS 部分需要精細(xì)化的設(shè)定屬性的參數(shù)值，而且需要若干個(gè)HTML標(biāo)簽的CSS來配合，從而實(shí)現(xiàn)傾斜背景的效果。所以我在CSS代碼部分用了比較多的注釋來描述這些屬性的效果和目的，大家在閱讀的時(shí)候可以將 CSS 結(jié)合著 HTML 一起來理解。或者可以直接拿我的這個(gè)實(shí)例作為一個(gè)模板來使用。

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>

為了讓導(dǎo)航條和其他元素都能夠與頁面的兩邊留出距離，我在實(shí)際內(nèi)容標(biāo)簽的外圍又包裹了一層div，主要在這個(gè)包裹的div里設(shè)定左右內(nèi)間距，從而實(shí)現(xiàn)兩邊留白的效果。這些外圍包裹的 div 的 class 名稱一般都會有一個(gè)后綴 "-bg"。

在實(shí)際內(nèi)容的排列時(shí)，我采用了更加方便靈活的彈性布局，這樣會相對的減少HTML和CSS的代碼量。

另外，如果想要實(shí)現(xiàn)傾斜的背景顏色，那么這些帶有 bg 后綴的 div 就是需要傾斜的標(biāo)簽。傾斜這些 div 其實(shí)很簡單，只需要設(shè)定一個(gè) transform: skew(0deg, -9deg) 這樣的CSS代碼即可，但是我們可以想象一下，原本是長方形的 div 按照 Y 軸逆時(shí)針旋轉(zhuǎn)了一個(gè)弧度（-9deg）后，它會變成一個(gè)平行四邊形，這個(gè)平行四邊形是左邊低右邊高。這樣就會露出它后面的白色的 body 的部分。所以這種玩法麻煩的地方就是如何通過多個(gè) CSS 屬性的配合來遮住露出的白色的body部分。下面就來看一下這個(gè)HTML對應(yīng)的 CSS 代碼部分。

在大家閱讀 CSS 的代碼之前，我給出一個(gè)原理圖來解釋一下其中的原理：

當(dāng)外圍的 div 傾斜了之后，就需要把內(nèi)容部分的div的上部的內(nèi)間距增大，以此來遮住平行四邊形的左側(cè)露出的白色區(qū)域。這是頁面上部區(qū)域的原理。

那么頁面底部也同樣需要實(shí)現(xiàn)這樣傾斜背景顏色的設(shè)計(jì)，這樣才能將風(fēng)格一致，產(chǎn)生美感。原理還是這個(gè)原理圖所示的邏輯，不同的地方在于，底部最外圍的 div 不傾斜，而是需要兩個(gè)屬性，height 和 overflow-y，并且這個(gè) div 不能帶有背景顏色。它們的作用是當(dāng)它里面的內(nèi)容超出這個(gè) div 的區(qū)域時(shí)就不顯示，這樣就會讓上圖中藍(lán)色的平行西變形的左下角區(qū)域被紅色的框線裁剪掉，從而讓這個(gè)div 乖乖的呆在頁面的底部。而這個(gè) div 里面一層的 div 需要讓它傾斜，而且還帶有一個(gè)背景顏色。這樣組合出來的效果就是一個(gè)看似是左右兩邊是豎線，下部是橫線，只有上部是斜線的帶有背景顏色的四邊形，這個(gè)四邊形里面是實(shí)際的頁面內(nèi)容。

最終的樣子在這篇 CSS 代碼的最后展示出來了。

CSS

在線咨詢

上一篇：3行css實(shí)現(xiàn)循環(huán)動畫，順便說說瀏覽器兼容性
下一篇：十分鐘能看清-HTTP詳解-請求、響應(yīng)、緩存

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商