背景

在上一篇博文中CAD圖DWG決議WebGIS可視化技術分析總結提到，實作CAD/DWG圖形Web展示的思路一般為決議AutoCAD圖形格式，然后轉成html5所能繪制的格式如svg,geojson,柵格瓦片,矢量瓦片，在前端渲染，而在WebGIS中地圖底圖一般采用的是柵格瓦片或 矢量瓦片，下面就相關技術的原理做個分析，

瓦片地圖

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

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

柵格瓦片

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

優點：使用最廣，技術成熟

柵格瓦片的原理與機制:

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

矢量瓦片

概念：矢量圖層以矢量瓦片的形式進行切分和存盤，
優點：創建效率高，傳輸和渲染速度快，前端可自定義渲染樣式

矢量瓦片的原理與機制:

矢量瓦片類似柵格瓦片，是將矢量資料用多層次模型分割成矢量要素描述檔案存盤在服務器端，再到客戶端根據指定樣式進行渲染繪制地圖，在單個矢量瓦片上存盤著投影于一個矩形區域內的幾何資訊和屬性資訊，當客戶端通過分布式網路獲取矢量瓦片、地圖示注字體、圖示、樣式檔案等資料后，最終在客戶端進行渲染輸出地圖，

矢量瓦片沒有統一資料標注，mapbox基于Google protocol buffers制定了MAPBOX CECTOR TILE SPECIFICATION通用的矢量瓦片資料標準，被許多公司和組織采用，

矢量瓦片資料組織分成兩層，一層是地圖表達范圍內的瓦片資料集組織模型，另一層是單個瓦片內要素的組織模型，

矢量瓦片資料集的組織模型類似柵格瓦片金字塔模型，包含坐標系、投影方式、瓦片編號已實作任意精度、空間位置與矢量瓦片的對應關系，并被柵格瓦片規范相互兼容，這樣方便將矢量瓦片轉換成柵格瓦片，畢竟兩者采用相似的投影方式和瓦片編號方式，

單個瓦片要素的組織模型將幾何資訊和屬性資訊分開存盤，幾何資訊主要包括點、線、面和未知要素類，元資料資訊包含了圖層屬性和要素屬性，

雖然矢量瓦片也采用金字塔的方式進行存盤資料，但是由于其默認網格數較高，以PBF為例，單個矢量瓦片的網格是4096*4096，所以在視網膜屏等設備上也顯示地很清楚，而不會出現鋸齒，同時這個網格數可以隨時進行修改調整，以更精確的方式來記錄幾何位置資訊從而適應不同螢屏的要求，同時，在矢量瓦片中，會將其幾何資訊轉換成指令集表達，再將指令存盤到32位無符號整數進行存盤，而在存盤屬性資訊是，則是以不同的是表示，geojson直接標注，PBF則是用索引號進行標注，

矢量瓦片的資料格式可參考 https://www.cnblogs.com/hsljyyy/p/8496267.html:

可在chrome瀏覽器里安裝插件來除錯矢量瓦片的資料內容

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

實作

柵格瓦片這個技術很成熟，開源的GIS專案如MapServer或GeoServer都能生成柵格瓦片，

矢量瓦片這個技術比較新，可參考一些開源的專案來實作，如：

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可視化顯示開發提供的一站式解決方案, 完全兼容dwg格式，23d效果完美切換，高性能webgl渲染，個性化地圖，跨平臺私有化部署，矢量柵格瓦片全支持, 實作把CAD地圖通過柵格瓦片或矢量瓦片Web展示，只需兩步：

第一步：設定渲染方式為幾何渲染 GeomRender

第二步：設定樣式為柵格瓦片風格(rasterStyle)或矢量瓦片(vectorStyle)

相關代碼如下：

// --打開地圖[矢量瓦片]--以矢量瓦片方式打開已上傳的CAD的DWG格式的圖
// js代碼
// 新建地圖服務物件，傳入服務地址和token
let svc = new vjmap.Service(env.serviceUrl, env.accessToken)
// 打開地圖
let res = await svc.openMap({
    mapid: env.exampleMapId, // 地圖ID,(請確保此ID已存在，可上傳新圖形新建ID)
    mapopenway: vjmap.MapOpenWay.GeomRender, // 以幾何資料渲染方式打開
    style: vjmap.openMapDarkStyle() // div為深色背景顏色時，這里也傳深色背景樣式
})
if (res.error) {
    message.error(res.error)
}
// 獲取地圖的范圍
let mapExtent = vjmap.GeoBounds.fromString(res.bounds);
// 建立坐標系
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
});
// 地圖關聯服務物件和坐標系
map.attach(svc, prj);
// 使地圖全部可見
map.fitMapBounds();
// 點擊有高亮狀態（滑鼠點擊地圖元素上時，會高亮)
map.enableLayerClickHighlight(svc, e => {
    let msg = {
        content: `type: ${e.name}, id: ${e.objectid}, layer: ${e.layerindex}`,
        key: "layerclick",
        duration: 5
    }
    e && message.info(msg);
})

效果

相比之下，矢量瓦片相比柵格瓦片，渲染效果更好，前端能自定義樣式，

可以訪問此 Demo https://vjmap.com/demo/#/demo/map/service/01openMapVector 在線體驗下，

標籤：其他

上一篇：SuperEdge v0.6.0 版本正式發布

下一篇：HO引擎近況20211015