Cesium离线地图极简教程

小咪咪 2022-11-08 15:28 2464阅读 0赞

**目录**

前言

一、数据获取

二、数据处理

三、地图发布

--------------------

# 前言 #

发现cesium挺好玩的，不过地图就是要在线加载，想要整一个离线部署的。上网找了好多资料，都对于非GIS开发出身的小朋友（比如我）很不友好，一开始，不知道怎么整离线地图，傻fufu的整了个geoserver，通过geoserver来发布离线地图。接下来我也会写一篇关于geoserver 发布离线地图的文章。

现在这篇是比用geoserver来部署更简单的方式，是直接把地图数据切片，然后通过nginx以静态服务方式发布。

实验环境：win10

使用工具：

*  LSV——图新地球，可以用来下载地图（当然你也可以用其他的地图下载工具）

*  cesiumlab2——用于数据切片

*  nginx——代理服务器，用于瓦片数据发布

# **一、数据获取** #

这里通过图新地球进行地图数据下载。由于新版的图新地球无法下载天地图，默认也没有其他图源，我们无法下载地图，报错如下图所示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaDc2Mzk4NDAxNw_size_16_color_FFFFFF_t_70][]

因此，我们需要自己导入地图源文件lrc，这里我导入的是Arcgis影像文件

链接: [https://pan.baidu.com/s/1w-Hu\_jM\_scQEqVv9LNsIuw][https_pan.baidu.com_s_1w-Hu_jM_scQEqVv9LNsIuw] 提取码: pakf

下载后，直接拖入LSV里面，就可以使用了![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaDc2Mzk4NDAxNw_size_16_color_FFFFFF_t_70 1][]

这里演示需要，就只下载10的数据

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaDc2Mzk4NDAxNw_size_16_color_FFFFFF_t_70 2][]

# **二、数据处理** #

打开cesiumlab2，【数据处理】->【影像切片】![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaDc2Mzk4NDAxNw_size_16_color_FFFFFF_t_70 3][]

选择我们下载的guangdong.tif文件，储存方式选择【散列文件】，输出路径我是**G:\\soft\\geoserver\\map\\guangdong\\new10** 这个路径要记住，后面要用到

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaDc2Mzk4NDAxNw_size_16_color_FFFFFF_t_70 4][]

等待切割

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaDc2Mzk4NDAxNw_size_16_color_FFFFFF_t_70 5][]

切割完的数据如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaDc2Mzk4NDAxNw_size_16_color_FFFFFF_t_70 6][]

# **三、地图发布** #

修改nginx.conf配置文件，静态文件发布我们地图服务，路径就是上面咱们数据切割的输出路径

server {
            listen 666;
            location / {
                alias G:/soft/geoserver/map/guangdong/cesiumDemo/;
                index  index.html index.htm;
            }
    
            location /map {
                alias G:/soft/geoserver/map/guangdong/new10;
                autoindex on;
                autoindex_localtime on;
            }
        }

nginx重载后，咱们访问咱们的map路径

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaDc2Mzk4NDAxNw_size_16_color_FFFFFF_t_70 7][]

咱们的index.html里面引入瓦片地图服务的cesium代码如下：

var viewer = new Cesium.Viewer('cesiumContainer', {
    
                animation: false,//是否显示动画控件
    
                baseLayerPicker: true,//是否显示图层选择控件
    
                geocoder: true,
    
                timeline: false,
    
                sceneModePicker: true,
    
                navigationHelpButton: false,
    
                infoBox: true,
    
                imageryProvider: new Cesium.UrlTemplateImageryProvider({
    
                    url: '/map/{z}/{x}/{y}.png',
    
                    fileExtension: 'png'
    
                })
    
            });

这样子就在cesium的地球上看到广东这个鸡腿了~

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaDc2Mzk4NDAxNw_size_16_color_FFFFFF_t_70 8][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaDc2Mzk4NDAxNw_size_16_color_FFFFFF_t_70]: /images/20221023/22873173a809481ea88c365ea9950e83.png
[https_pan.baidu.com_s_1w-Hu_jM_scQEqVv9LNsIuw]: https://pan.baidu.com/s/1w-Hu_jM_scQEqVv9LNsIuw
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaDc2Mzk4NDAxNw_size_16_color_FFFFFF_t_70 1]: /images/20221023/e3b1749eae714324a24130837ca988c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaDc2Mzk4NDAxNw_size_16_color_FFFFFF_t_70 2]: /images/20221023/cbf99dd8db434a6f9ec9d191ed2815c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaDc2Mzk4NDAxNw_size_16_color_FFFFFF_t_70 3]: /images/20221023/7b9264be4c044257b62e792c1acda7cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaDc2Mzk4NDAxNw_size_16_color_FFFFFF_t_70 4]: /images/20221023/a87b213ef8ce4f079e460a624c1ca1f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaDc2Mzk4NDAxNw_size_16_color_FFFFFF_t_70 5]: /images/20221023/ae947639bfb84590b18b8c1a64dc79b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaDc2Mzk4NDAxNw_size_16_color_FFFFFF_t_70 6]: /images/20221023/47634ecf485d49d7ba75dc686444c6c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaDc2Mzk4NDAxNw_size_16_color_FFFFFF_t_70 7]: /images/20221023/08db195f6145423887a35a39b0dcc018.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaDc2Mzk4NDAxNw_size_16_color_FFFFFF_t_70 8]: /images/20221023/5437b731e2444089a490224df2cc77ea.png