CAD/DWG圖Web網(wǎng)頁可視化技術(shù)之柵格和矢量瓦片

時間：2023-08-31 09:24:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-08-31 09:24:01 來源：網(wǎng)站運(yùn)營

CAD/DWG圖Web網(wǎng)頁可視化技術(shù)之柵格和矢量瓦片：

背景

在上一篇博文中CAD圖DWG解析WebGIS可視化技術(shù)分析總結(jié)提到，實現(xiàn)CAD/DWG圖形Web展示的思路一般為解析AutoCAD圖形格式，然后轉(zhuǎn)成html5所能繪制的格式如svg,geojson,柵格瓦片,矢量瓦片，在前端渲染。而在WebGIS中地圖底圖一般采用的是柵格瓦片或 矢量瓦片。下面就相關(guān)技術(shù)的原理做個分析。

瓦片地圖

概念： 瓦片地圖金字塔模型是一種多分辨率層次模型，從瓦片金字塔的底層到頂層，分辨率越來越低，但表示的地理范圍不變。首先確定地圖服務(wù)平臺所要提供的縮放級別的數(shù)量N，把縮放級別最高、地圖比例尺最大的地圖圖片作為金字塔的底層，即第0層，并對其進(jìn)行分塊，從地圖圖片的左上角開始，從左至右、從上到下進(jìn)行切割，分割成相同大小(比如256x256像素)的正方形地圖瓦片，形成第0層瓦片矩陣;在第0層地圖圖片的基礎(chǔ)上，按每像素分割為2×2個像素的方法生成第1層地圖圖片，并對其進(jìn)行分塊，分割成與下一層相同大小的正方形地圖瓦片，形成第1層瓦片矩陣;采用同樣的方法生成第2層瓦片矩陣;…;如此下去，直到第N一1層，構(gòu)成整個瓦片金字塔。

地圖緩存技術(shù)是一種非常有效的提高在線地圖訪問效率的方式，用空間換取時間的方式。按地圖緩存的分類可分為 柵格瓦片 和 矢量瓦片 。

柵格瓦片

概念：將地圖中所有圖層都切分并存儲為柵格格式的地圖瓦片。

優(yōu)點：使用最廣，技術(shù)成熟

柵格瓦片的原理與機(jī)制:

柵格瓦片采用四叉樹金字塔模型的分級方式，將地圖切割成無數(shù)大小相等的矩形柵格圖片，由這些矩形柵格圖片按照一定規(guī)則拼接成不同層級的地圖顯示。

矢量瓦片

概念：矢量圖層以矢量瓦片的形式進(jìn)行切分和存儲。 優(yōu)點：創(chuàng)建效率高，傳輸和渲染速度快，前端可自定義渲染樣式

矢量瓦片的原理與機(jī)制:

矢量瓦片類似柵格瓦片，是將矢量數(shù)據(jù)用多層次模型分割成矢量要素描述文件存儲在服務(wù)器端，再到客戶端根據(jù)指定樣式進(jìn)行渲染繪制地圖，在單個矢量瓦片上存儲著投影于一個矩形區(qū)域內(nèi)的幾何信息和屬性信息。當(dāng)客戶端通過分布式網(wǎng)絡(luò)獲取矢量瓦片、地圖標(biāo)注字體、圖標(biāo)、樣式文件等數(shù)據(jù)后，最終在客戶端進(jìn)行渲染輸出地圖。

矢量瓦片沒有統(tǒng)一數(shù)據(jù)標(biāo)注，mapbox基于Google protocol buffers制定了MAPBOX CECTOR TILE SPECIFICATION通用的矢量瓦片數(shù)據(jù)標(biāo)準(zhǔn)，被許多公司和組織采用。

矢量瓦片數(shù)據(jù)組織分成兩層，一層是地圖表達(dá)范圍內(nèi)的瓦片數(shù)據(jù)集組織模型，另一層是單個瓦片內(nèi)要素的組織模型。

矢量瓦片數(shù)據(jù)集的組織模型類似柵格瓦片金字塔模型，包含坐標(biāo)系、投影方式、瓦片編號已實現(xiàn)任意精度、空間位置與矢量瓦片的對應(yīng)關(guān)系，并被柵格瓦片規(guī)范相互兼容，這樣方便將矢量瓦片轉(zhuǎn)換成柵格瓦片，畢竟兩者采用相似的投影方式和瓦片編號方式。

單個瓦片要素的組織模型將幾何信息和屬性信息分開存儲，幾何信息主要包括點、線、面和未知要素類，元數(shù)據(jù)信息包含了圖層屬性和要素屬性。

雖然矢量瓦片也采用金字塔的方式進(jìn)行存儲數(shù)據(jù)，但是由于其默認(rèn)網(wǎng)格數(shù)較高，以PBF為例，單個矢量瓦片的網(wǎng)格是4096*4096，所以在視網(wǎng)膜屏等設(shè)備上也顯示地很清楚，而不會出現(xiàn)鋸齒，同時這個網(wǎng)格數(shù)可以隨時進(jìn)行修改調(diào)整，以更精確的方式來記錄幾何位置信息從而適應(yīng)不同屏幕的要求。同時，在矢量瓦片中，會將其幾何信息轉(zhuǎn)換成指令集表達(dá)，再將指令存儲到32位無符號整數(shù)進(jìn)行存儲。而在存儲屬性信息是，則是以不同的是表示，geojson直接標(biāo)注，PBF則是用索引號進(jìn)行標(biāo)注。

矢量瓦片的數(shù)據(jù)格式可參考 https://www.cnblogs.com/hsljyyy/p/8496267.html:

可在chrome瀏覽器里安裝插件來調(diào)試矢量瓦片的數(shù)據(jù)內(nèi)容

柵格瓦片和矢量瓦片的對比

實現(xiàn)

柵格瓦片這個技術(shù)很成熟，開源的GIS項目如MapServer或GeoServer都能生成柵格瓦片。

矢量瓦片這個技術(shù)比較新，可參考一些開源的項目來實現(xiàn)。如：

https://github.com/mapbox/awesome-vector-tiles

https://github.com/mapbox/mapnik-vector-tile

https://github.com/SpatialServer/Leaflet.MapboxVectorTile

https://gdal.org/drivers/vector/mvt.html

唯杰地圖vjmap 為CAD圖WebGIS可視化顯示開發(fā)提供的一站式解決方案, 完全兼容dwg格式，23d效果完美切換，高性能webgl渲染，個性化地圖，跨平臺私有化部署，矢量柵格瓦片全支持, 實現(xiàn)把CAD地圖通過柵格瓦片或矢量瓦片Web展示，只需兩步：

第一步：設(shè)置渲染方式為幾何渲染 GeomRender

第二步：設(shè)置樣式為柵格瓦片風(fēng)格(rasterStyle)或矢量瓦片(vectorStyle)

相關(guān)代碼如下：

// --打開地圖[矢量瓦片]--以矢量瓦片方式打開已上傳的CAD的DWG格式的圖// js代碼// 新建地圖服務(wù)對象，傳入服務(wù)地址和tokenlet svc = new vjmap.Service(env.serviceUrl, env.accessToken)// 打開地圖let res = await svc.openMap({ mapid: env.exampleMapId, // 地圖ID,(請確保此ID已存在，可上傳新圖形新建ID) mapopenway: vjmap.MapOpenWay.GeomRender, // 以幾何數(shù)據(jù)渲染方式打開 style: vjmap.openMapDarkStyle() // div為深色背景顏色時，這里也傳深色背景樣式})if (res.error) { message.error(res.error)}// 獲取地圖的范圍let mapExtent = vjmap.GeoBounds.fromString(res.bounds);// 建立坐標(biāo)系let prj = new vjmap.GeoProjection(mapExtent);?// 新建地圖對象let map = new vjmap.Map({ container: 'map', // container ID style: svc.vectorStyle(), // 矢量瓦片樣式 如需柵格樣式需改成 rasterStyle() center: prj.toLngLat(mapExtent.center()), // 中心點 zoom: 2, renderWorldCopies: false});// 地圖關(guān)聯(lián)服務(wù)對象和坐標(biāo)系map.attach(svc, prj);// 使地圖全部可見map.fitMapBounds();// 點擊有高亮狀態(tài)（鼠標(biāo)點擊地圖元素上時，會高亮)map.enableLayerClickHighlight(svc, e => { let msg = { content: `type: ${e.name}, id: ${e.objectid}, layer: ${e.layerindex}`, key: "layerclick", duration: 5 } e && message.info(msg);})

效果

相比之下，矢量瓦片相比柵格瓦片，渲染效果更好，前端能自定義樣式?？梢栽L問此 Demo https://vjmap.com/demo/#/demo/map/service/01openMapVector 在線體驗下。