Cesium加载离线地图

一、下载地图并导出为tms格式

利用地图下载器下载相关范围的地图，然后导出为tms格式的地图切片

二、安装nginx并配置静态文件服务路径

1、下载、解压nginx
下载地址：http://nginx.org/en/download.html
2、启动nginx:
方法1：直接双击nginx.exe，双击后一个黑色的弹窗一闪而过:
方法2：打开cmd命令窗口，切换到nginx解压目录下，输入命令 nginx.exe 或者 start nginx ，回车即可
浏览器地址栏输入网址 http://localhost:80，查看是否启动成功，有的机器不成功，可能是80端口被占用
3、修改nginx监听端口
nginx的配置文件是conf目录下的nginx.conf，默认配置的nginx监听的端口为80，如果80端口被占用可以修改为未被占用的端口即可

修改完配置文件，只需要执行命令 nginx -s reload 即可让改动生效
4、nginx配置静态资源
将静态资源（如jpg|png|css|js等）放在如下配置的D:/software/nginx-1.16.1/nginx-1.16.1/static目录下，然后在nginx配置文件中做如下配置(注意：静态资源配置只能放在 location / 中)，浏览器中访问 http://localhost:80/82.png 即可访问到 D:/software/nginx-1.16.1/nginx-1.16.1/static目录下的 82.png图片

5、ngnix跨域设置

location / {
        add_header 'Access-Control-Allow-Origin' $http_origin;
        add_header 'Access-Control-Allow-Credentials' 'true';	
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';	
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
            
        if ($request_method = 'OPTIONS') {	
            add_header 'Access-Control-Max-Age' 1728000;	
            add_header 'Content-Type' 'text/plain; charset=utf-8';	
            add_header 'Content-Length' 0;
                return 204;	
        }
        root   D:/software/nginx-1.16.1/nginx-1.16.1/static;
        index  index.html index.htm;
    }

6、把有tms切片的map文件夹copy 到static文件夹下面，就可以通过cesium访问离线地图了

三、cesium加载离线地图

var viewer = new Cesium.Viewer('cesiumContainer', {
        animation: false,
        timeline: false,
        scene3DOnly: true,
        selectionIndicator: false,
        geocoder: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        homeButton: false,
        baseLayerPicker: false,
        // terrainProvider: Cesium.createWorldTerrain(), //Adding Cesium World Terrain
        orderIndependentTranslucency: false, //cesium背景设置为透明
        contextOptions: {
            webgl: {
                alpha: true,
            }
        },
      })
      viewer.cesiumWidget.creditContainer.style.display = 'none' // 去掉版权

        // 加载arcgis蓝色背景的本地地图
        var arcgis_blue = viewer.scene.imageryLayers.addImageryProvider(
            new Cesium.UrlTemplateImageryProvider({
                url:'http://10.172.12.21:8090/map/arcgis_blue_tms/{z}/{x}/{y}.png',
                fileExtension : "png"
            })
        );
        // 加载谷歌夜景的本地地图
        var google_night = viewer.scene.imageryLayers.addImageryProvider(
            new Cesium.UrlTemplateImageryProvider({
                url:'http://10.172.12.21:8090/map/google_night/google_night_0_4_tms/{z}/{x}/{y}.jpg',
                fileExtension : "jpg"
            })
        );

        google_night.alpha = 0.3; // 0.0  全透明.  1.0 不透明.
        arcgis_blue.brightness = 5.0; // > 1.0 增加亮度  < 1.0减少亮度
      //cesium背景设置为透明
      viewer.scene.skyBox.show = false;
      viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0);
    //   判断cesium的缩放级别（即摄像机高度）
      viewer.scene.camera.moveEnd.addEventListener(function(){
        var currentMagnitude = viewer.camera.getMagnitude();
        //获取当前相机高度
        height = Math.ceil(viewer.scene.camera.positionCartographic.height);
        // alert('currentMagnitude - ' + currentMagnitude + '---height:' + height);
        // if（height>100000）{

        // }else{

        // }
        })