小白學webgl合集-三維數據源和格式

大多數地圖瓦片數據是二維的,三維效果通過渲染和樣式設置實現。主要的三維數據源和格式包括:

1. 3D Tiles (CesiumJS)

3D Tiles 是一種開放標準,用于流式傳輸和可視化大規模三維地理數據。它可以包含各種三維數據,如建筑物、點云、地形等。CesiumJS 是一個常用的開源庫,可以加載和渲染 3D Tiles。

2. Mapbox GL JS

Mapbox GL JS 支持加載和渲染三維建筑物和地形數據。雖然其底層數據還是二維矢量瓦片,但通過樣式設置可以呈現三維效果。Mapbox 也提供三維地形和建筑物數據源。

3. BIM (Building Information Modeling)

BIM 數據通常用于建筑和工程領域,包含詳細的三維建筑物模型。雖然不是傳統意義上的地圖瓦片,但這些數據可以被用于三維地圖展示。

CesiumJS 示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Cesium 3D Tiles Example</title><script src="https://cesium.com/downloads/cesiumjs/releases/latest/Build/Cesium/Cesium.js"></script><link href="https://cesium.com/downloads/cesiumjs/releases/latest/Build/Cesium/Widgets/widgets.css" rel="stylesheet"><style>#cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}</style>
</head>
<body><div id="cesiumContainer"></div><script>const viewer = new Cesium.Viewer('cesiumContainer', {scene3DOnly: true,selectionIndicator: false,baseLayerPicker: false,});viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: 'https://assets.cesium.com/1/tileset.json'}));viewer.zoomTo(viewer.entities);</script>
</body>
</html>

Mapbox GL JS 示例:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Mapbox GL JS 3D Buildings Example</title><meta name="viewport" content="width=device-width, initial-scale=1"><script src="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js"></script><link href="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css" rel="stylesheet"><style>body { margin: 0; padding: 0; }#map { position: absolute; top: 0; bottom: 0; width: 100%; }</style>
</head>
<body><div id="map"></div><script>mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';const map = new mapboxgl.Map({container: 'map',style: 'mapbox://styles/mapbox/streets-v11',center: [-74.0066, 40.7135],zoom: 15,pitch: 45,bearing: -17.6});map.on('load', () => {map.addLayer({'id': '3d-buildings','source': 'composite','source-layer': 'building','filter': ['==', 'extrude', 'true'],'type': 'fill-extrusion','minzoom': 15,'paint': {'fill-extrusion-color': '#aaa','fill-extrusion-height': ['interpolate', ['linear'], ['zoom'],15, 0,15.05, ['get', 'height']],'fill-extrusion-base': ['interpolate', ['linear'], ['zoom'],15, 0,15.05, ['get', 'min_height']],'fill-extrusion-opacity': 0.6}});});</script>
</body>
</html>

總結

目前,主流的地圖瓦片數據大多是二維的,三維效果通過渲染技術和樣式設置實現。不過,像 3D Tiles 這樣的格式專門用于三維數據,并且可以直接用于三維地圖展示。使用這些三維數據源和工具,可以實現豐富的三維地圖效果。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/45019.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/45019.shtml
英文地址,請注明出處:http://en.pswp.cn/web/45019.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

循環結構(二)——while語句【互三互三】

文章目錄 &#x1f341;引言 &#x1f341;一、語句格式 &#x1f341;二、語句執行過程 &#x1f341;三、格式舉例 &#x1f341;四、例題 &#x1f449;【例1】 &#x1f48e;【示例代碼】 &#x1f449;【例2】 &#x1f680;【方法1】&#xff1a; &#x1f48e…

運維的操作紅線

1. 無工單、郵件的任何操作&#xff0c;嚴禁執行。 2. 工單標題和內容不一致或工單內容超出現場范圍禁止操作。 3. 操作前必須確定資產信息&#xff1a;機柜號、U位、資產號、sn 號、ip。 4. 機柜后門操作設備&#xff0c;必須多次執行第 3 條紅線。 5. 嚴禁操作、觸碰工單指定…

【Java伴學筆記】Day-02 變量|計算機的存儲方式|數據類型|標識符|鍵盤輸入流

一、變量 在Java中&#xff0c;變量用于存儲數據值&#xff0c;可以是數字、文本或其他類型的信息。Java中的變量必須聲明后才能使用&#xff0c;并且每個變量都有特定的類型。下面是一些基本的變量使用示例&#xff1a; 聲明一個整型變量并賦值&#xff1a; int myNumber; …

企業如何選擇渲染農場?渲染100邀請碼1a12

渲染農場能降低企業成本&#xff0c;幫助企業更好的服務客戶&#xff0c;那么如何選擇渲染農場呢&#xff1f;又有什么標準&#xff1f;這次我們就來看下。 1、渲染性能 渲染性能是衡量農場優劣的重要指標&#xff0c;性能越好農場越優質&#xff0c;性能主要包括渲染速度、穩…

一文快速接入銀行卡識別API

銀行卡識別API 能通過機器學習和圖像識別技術來解析銀行卡相關信息&#xff0c;根據用戶上傳卡片自動識別內容&#xff0c;返回該卡的卡號、所屬銀行及銀行類型等信息。可以在用戶需要輸入銀行卡等相關信息時使用該功能&#xff0c;幫助用戶快速輸入正確信息&#xff0c;簡化用…

VPX3U架構+GPU景嘉微:基于飛騰處理器的全國產化刀片式板卡

近期承接了客戶一個全國產的VPX3U的項目。搭載的飛騰FT2000系列處理器的VPX3U板卡。服務于某某部門。這款產品擁有全國產化及自主可控的硬件技術。以下是基于飛騰FT2000處理器的VPX3U主板的一些特點&#xff1a; ①飛騰FT2000系列處理器 處理器&#xff1a;板卡兼容飛騰FT2000…

【觸摸屏】【紅十字會學習系統】功能模塊:視頻 + AI拍照合成

項目背景 提升公眾急救能力&#xff1a;確保每個人都能在緊急情況下采取正確的急救措施&#xff0c;減少傷害&#xff0c;挽救生命。培養人道主義價值觀&#xff1a;通過教育和培訓&#xff0c;傳播紅十字精神&#xff0c;促進社會對弱勢群體的關注與支持。建立社區響應網絡&a…

java同步塊介紹

在多線程編程中,同步塊(synchronized block)用于保護代碼塊,使得同一時間只有一個線程能夠執行該代碼塊,從而避免并發問題。同步塊使用一個對象作為鎖,確保在同步塊內對共享資源的訪問是線程安全的。 1. 什么是同步塊? 同步塊是 Java 中的一種同步機制,用于保護代碼塊…

【Linux】進程間通信(IPC)——匿名管道

目錄 為什么要進行進程間通信&#xff1f; 匿名管道的具體實現 pipe創建內存級文件形成管道 pipe的簡單使用 匿名管道的四種情況和五種特性 四種情況 五種特性 PIPE_BUF 命令行管道 | 功能代碼&#xff1a;創建進程池 為什么要進行進程間通信&#xff1f; 1.數據傳輸&…

第五天安全筆記(持續更新)

第五天防御筆記 NAT種類&#xff1a; 靜態NAT動態NATNapt 特點&#xff1a; 一對多----easy ip 多對多的napt 服務器的映射關系: 1.源NAT----基于IP地址進行轉換&#xff0c;包括靜態NAT&#xff0c;動態NAT&#xff0c;以及NAPT 2.目標NAT---基于目標IP地址進行轉換&a…

[筆記.AI]AI Agent理解(LLM AI Agent)

前幾天看到一個圖&#xff0c;感覺能幫助理解 AI Agent 的基本思想和原理&#xff0c;特摘過來備忘。順道加上自己目前對相關部分的理解&#xff0c;不一定對&#xff0c;權當做個記錄。 另外&#xff0c;專門查了下圖的來源&#xff0c;應該是源自 Lilian Weng 的博客文章《…

Android Studio啟動報錯:The emulator process for AVD Pixel_5_API_30 has terminated

Android Studio啟動AVD報錯&#xff1a; The emulator process for AVD Pixel_5_API_30 has terminated. 原因&#xff1a;安裝時使用自定義安裝后&#xff0c;修改了默認安裝目錄。 而avd文件默認在 C:\Users\用戶名\.android 目錄下。所以導致打開AVD時報錯。 解決方法&am…

SadTalker數字人服務器部署

一、單獨SadTalker部署 git clone https://github.com/OpenTalker/SadTalker.gitcd SadTalker conda create -n sadtalker python3.8conda activate sadtalkerpip install torch1.12.1cu113 torchvision0.13.1cu113 torchaudio0.12.1 --extra-index-url https://download.pyto…

切換node版本

一、在Linux上切換Node.js版本有多種實現方法&#xff1a; 1.使用nvm&#xff08;Node Version Manager&#xff09;&#xff1a; 安裝nvm&#xff1a;可以通過curl或wget來安裝nvm&#xff0c;具體請參考nvm的官方文檔。 安裝不同版本的Node.js&#xff1a;使用nvm可以輕松…

快速上手綠聯私有云UGOS Pro系統Docker | 安裝/部署/管理/docker-compose一網打盡

快速上手綠聯私有云UGOS Pro系統Docker | 安裝/部署/管理/docker-compose一網打盡 哈嘍小伙伴們好&#xff0c;我是Stark-C~ 因為眾所周知的原因&#xff0c;關于最新發布的綠聯私有云UGOS Pro系統咱這里也不過多說&#xff0c;不過有一點不可否認&#xff1a;新系統專業性更…

用python寫一個基于ai agent協同供應鏈管理流程的案例

要實現一個基于AI Agent的協同供應鏈管理流程&#xff0c;我們可以參考以下步驟&#xff1a; 1. 首先&#xff0c;定義一個類SupplyChainManager&#xff0c;用于模擬供應鏈管理系統的功能。 python class SupplyChainManager: def __init__(self): self.warehouse Warehous…

代碼隨想錄第51天|單調棧

42. 接雨水 參考 思路1: 暴力解法 找每個柱子的左右高度超時 O(N^2) 思路2: 雙指針優化 class Solution { public:int trap(vector<int>& height) {vector<int> lheight(height.size(), 0);vector<int> rheight(height.size(), 0);lheight[0] hei…

nginx的正向與反向代理

正向代理與反向代理的區別 雖然正向代理和反向代理都涉及代理服務器接收客戶端請求并向服務端轉發請求&#xff0c;但它們之間存在一些關鍵的區別&#xff1a; 正向代理&#xff1a; 在正向代理中&#xff0c;代理服務器代表客戶端向服務器發送請求&#xff0c;并將服務…

ctfshow-web入門-php特性(web104-web108)

目錄 1、web104 2、web105 3、web106 4、web107 5、web108 1、web104 需要傳入的 v1 和 v2 進行 sha1 加密后相等。 解法1&#xff1a; 這里都沒有判斷 v1 和 v2 是否相等&#xff0c;我們直接傳入同樣的內容加密后肯定也一樣。 ?v21 post&#xff1a; v11 拿到 flag…

SQL 多變關聯使用子查詢去重

不去重狀態 select a.*,b.recon_amt from free_settlement_first aleft join free_settlement_second b on a.settlement_first_id b.settlement_first_id 有2條數據出現了重復 使用子查詢去重 select a.*,b.recon_amt from free_settlement_first aleft join free_settlem…