Cesium基础（四）：部署离线地图和地形资源

作者何处顾青山

2025年5月17日 17:14

cesium离线部署

引言：前面文章主要介绍了cesium的初始化，这篇文章主要介绍cesium怎么在断网条件下进行开发和调试，具体内容包括地图与地形的下载，切片和部署。最后会在断网条件下进行初始cesium。

cesium影像瓦片

cesium的初始化成功后的地球，看似是一个完整的球体，但是仔细观察镜头在推进的时候能看到图层表面是有一些缝隙的，就像一张张图片拼接成的一个能观察的现实地球，这些图片就是瓦片图。AI搜索的cesium瓦片图解释是这样： Cesium的瓦片图是其实现大规模地理数据高效加载与渲染的核心技术，主要分为影像瓦片和地形瓦片两大类，同时支持三维模型瓦片（3D Tiles）。其实，这些影像瓦片是通过将地图按照层级、行号、列号切分为小图块，以四叉树结构组织存储。Cesium通过ImageryProvider加载这些瓦片。具体实现如下：

离线化部署

瓦片图下载：下载全能地图下载器进行破解，因为很多地图资源的下载都是收费的，所以你懂的，[网盘链接](pan.baidu.com/s/11f5a6tsM… 提取码: 25yn)。下载解压后，右键注册机以管理员身份运行得到注册码，双击imaps.exe，将注册码填写就可以愉快的下载瓦片图了。具体操作如下：

有其余需要下载的，由于篇幅有限，就不一一介绍了，请自己摸索。下载成功的资源目录如下：

nginx部署： 在这里我就不介绍怎么在windows安装部署nginx了，请自行百度安装。安装后的目录如下：打开conf文件夹，打开nginx.conf文件，新增一个server，配置代码如下。其中root对应的是文件名称，下面的是为例解决跨域访问的问题

 server {
        listen       81;
        server_name  127.0.0.1;
       
        location / {
            root   satellite;
            autoindex on;
            autoindex_exact_size off;
            autoindex_localtime on;
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Credentials true;
            add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
            add_header Access-Control-Allow-Methods 'GET,POST,OPTIONS';  
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

之后双击nginx.exe，会出现cmd一闪而过，打开浏览器输入127.0.0.1:81出现如图所示即表示部署成功。

配置模板路径： 使用UrlTemplateImageryProvider，访问加载瓦片图，具体路径如：http://127.0.0.1：81/{z}/{x}/{y}.jpg。具体实现如下：

<script setup>
import * as cesium from "cesium";
import { onMounted } from 'vue';
import { useCesium } from "@/hooks/useCesium";
let viewer = null
const map1 = new cesium.UrlTemplateImageryProvider({
    url: 'http://127.0.0.1:81/{z}/{x}/{y}.jpg'
})

onMounted(() => {
    const earth = document.querySelector("#earth");
    viewer = useCesium(earth);
    viewer.imageryLayers.addImageryProvider(map1)
})
</script>

<template>
    <div class="content">
        <div class="earth" id="earth"></div>
    </div>
</template>

<style lang="scss" scoped>
.content {
    width: 100%;
    height: 100%;
    position: relative;
    .earth {
        width: 100%;
        height: 100%;
    }
}
</style>

cesium地形瓦片

1.下载： 地形瓦片的离线部署比较麻烦，因为需要自己切割，所以需要在地理空间数据云上下载数据。www.gscloud.cn/search 选择好需要下载的数据级，这里选择DEM数字高程数据中的GDEMV3 30M分辨率数字高程数据。

捕获.PNG 然后检索想要下载的地区，这里作者选择的是北京市昌平区。点击检索结果最右侧的下载按钮下载，实际下载的数据是绿色框框住的面积。

2.cesiumLab处理： 将解压后的ASTGTMV003_N40E115_dem.tif文件上传，具体操作如下：等待处理完成。捕获.PNG 处理好的地形瓦片：

3. nginx部署： 具体代码如下：

server {
        listen       888;
        server_name  127.0.0.1;
       
        location / {
            root   terrain;
            autoindex on;
            autoindex_exact_size off;
            autoindex_localtime on;
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Credentials true;
            add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
            add_header Access-Control-Allow-Methods 'GET,POST,OPTIONS'; 
        }
     
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

捕获.PNG 4.配置模板路径： 使用静态方法cesium.CesiumTerrainProvider.fromUrl，访问http://127.0.0.1:888加载地形资源。实现与效果如下：

<script setup>
import * as cesium from "cesium";
import { onMounted } from "vue";
import { useCesium } from "@/hooks/useCesium";
let viewer = null
// 加载离线地图
const map1 = new cesium.UrlTemplateImageryProvider({
    url: 'http://127.0.0.1:81/{z}/{x}/{y}.jpg'
})
onMounted(async () => {
    const earth = document.querySelector("#earth");
    viewer = useCesium(earth);
    viewer.imageryLayers.addImageryProvider(map1)
    // 加载离线地形
   try{
    const terrainProvider = await cesium.CesiumTerrainProvider.fromUrl('http://127.0.0.1:888');
    viewer.terrainProvider = terrainProvider;
   }catch(e){
       console.log(e)
   }
});
</script>
<template>
    <div class="earth" id="earth"></div>
</template>

<style lang="scss" scoped>
.earth {
    width: 100%;
    height: 100%;
}
</style>

总结

cesium影像瓦皮和地形瓦片的部署已经实现，回顾前几篇文章，发现几乎没有新的API用到，最麻烦的也就是nginx部署，实际应用中可以直接整合到后端代码中，如果前端再进行桌面化开发，那么就不用nginx也可以实现，作者已经使用tauri + rust实现了集成。具体实现等有时间再聊聊，今天就到此为止。下一篇聊cesium实体的创建，敬请期待！（觉得对你有帮助的话请点赞+收藏，有问题下方留言。）

普通视图

cesium离线部署

cesium影像瓦片

离线化部署

cesium地形瓦片

总结