从零开始vue使用cesium通过nginx发布3d地形数据并展示（续二）

需要的工具：

cesiumlab ：http://www.cesiumlab.com/

 nginx：nginx: download

cesiumlab上一章已经讲了如何使用

简单说一下nginx

打开nginx所在的文件夹cmd进入该文件夹输入nginx -v查看版本号

 nginx常用命令：

启动Nginx：start nginx   或者  nginx

快速停止或关闭Nginx：nginx -s stop

正常停止或关闭Nginx：nginx -s quit

配置文件修改重装载命令：nginx -s reload

打开nginx文件夹找到conf文件夹进入找到nginf.conf文件打开

 添加代码;

箭头是需要改的地方，第一个设置你自己的端口号，第二个设置你的项目所在位置，第三个切片数据所在位置，第四个你的项目端口位置，我通过8080端口发布服务，当请求地址带有/terrain的时候反向代理8081

    server {
        listen 8080;
         add_header Access-Control-Allow-Origin $http_origin;
         add_header Access-Control-Allow-Credentials true;
         add_header Access-Control-Allow-Headers Origin,X-Requested-Width,Content-Type,Accept;
         add_header Access-Control-Allow-Methods *;
         add_header Access-Control-Max-Age 1728000;
         if ($request_method = 'OPTIONS') {
               return 204;
         }
        location / {
            alias D:/code/huanglei/cesium-demo;
            index  index.html index.htm;
        }
 
    
 
        location /terrain {
            alias C:/Users/admin/Desktop/utils/cesium;
            autoindex on;
            autoindex_localtime on;
            proxy_pass http://172.16.70.233:8081;
        }
    }

浏览器输入地址：http://localhost:8080/terrain/

出现这表示发布成功：

 

项目代码：

const viewer = new Cesium.Viewer("cesiumContainer", {
        
        // 我使用高德影像地形地图
        imageryProvider: new Cesium.UrlTemplateImageryProvider({
          url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
        }),
        fullscreenButton:false,
        baseLayerPicker: false,          //是否显示图层选择控件
        selectionIndicator: false,
        animation:false,
        inforbox:false,
        timeline:false,
        terrainProvider: new Cesium.CesiumTerrainProvider({
        url: 'http://172.16.70.233:8080/terrain'
      }),
      sceneMode:3   
      });

实际效果图：