快速搭建Cesium離線應用

Cesium是一個用于構(gòu)建GIS應用的Javascript開源庫,本節(jié)將實現(xiàn)基于Cesium快速搭建離線的GIS應用demo。這個應用可以離線查看地圖影像以及地形起伏信息,也就是包含兩部分離線數(shù)據(jù)集:

  • map imagery
  • terrain dataset

地圖影像有很多獲取途徑,可以使用地圖下載器下載,如果你懶得自己做,這是我準備好的一個全球0-7級的地圖測試影像,點此下載。

地形數(shù)據(jù)集基于SRTM開放數(shù)據(jù)來制作,可以使用docker的這個image: tumgis/ctb-quantized-mesh來制作Quantized-Mesh格式的數(shù)據(jù)集合,以SRTM的數(shù)據(jù)srtm_56_05(嘉峪關(guān)市機場附近)為例,制作地形數(shù)據(jù)集的步驟請參考我的這篇文章點此下載已做好的地形數(shù)據(jù)集。

有了離線的地圖和地形數(shù)據(jù)集之后,就可以寫代碼了,下面基于node搭建一個簡單的服務器demo。

目錄結(jié)構(gòu)如下:

.
├── node_modules
│   ├── .....
├── package-lock.json
├── package.json
├── public
│   ├── js
│   ├── map
│   ├── terrain
├── server.js
└── views
    └── index.html

server.js的示例代碼如下:

let express = require("express")
let url = require('url')
let path = require('path')

let app = express()

let options = {
    maxAge: 3600000
};

// 應用級中間件
app.use(function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    next();
});

// 應用級中間件
app.use(function (req, res, next) {
    // 去除查詢參數(shù),支持heightMap和Quantized-Mesh
    let filePath = path.join(__dirname, url.parse(req.url).pathname);
    let pathTmep = path.extname(filePath)
    if (pathTmep === '.terrain') {
        res.set({
            'Content-Type': 'application/octet-stream',
            'Content-Encoding': 'gzip',
        });
        // Content-Disposition: attachment;filename=2948.terrain
        res.set('Content-Disposition', 'attachment;filename='+path.basename(filePath))
    }
    next();
})

app.get("/", function (req, res, next) {
    res.sendFile(path.join(__dirname + '/views/index.html'));
})

// 靜態(tài)資源中間件放到最后,確保應用級中間件被使用加上http頭部信息
app.use(express.static(__dirname + "/node_modules/cesium/Build", options));
app.use(express.static(__dirname + "/public", options));
 
// 異常處理中間件
app.use(function (req, res, next) {
    res.status(404).send('So sorry, we cannot find that!');
})

app.listen("8080", "localhost")

這是一份完整demo,下載下來后, npm install & node server.js
have fun

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容