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

简介: WebGis——从零开始vue使用cesium通过nginx发布3d地形数据并展示(续二)

需要的工具:

cesiumlab :Cesium实验室官网

nginxnginx: 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文件打开

添加代码;

a811df68240a47e69756ca3fbfb307b4.png

箭头是需要改的地方,第一个设置你自己的端口号,第二个设置你的项目所在位置,第三个切片数据所在位置,第四个你的项目端口位置,我通过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   
      });

实际效果图:


相关文章
|
6天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
24 1
|
6天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定,无论是使用内置的指令如 `v-model`,还是通过自定义事件或自定义指令,都能够方便地实现数据与视图之间的双向交互,满足不同场景下的开发需求。
25 1
|
13天前
|
API
vue3知识点:响应式数据的判断
vue3知识点:响应式数据的判断
22 3
|
14天前
|
存储 缓存 JavaScript
vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
32 2
|
2月前
|
JavaScript
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
本文讨论了在使用Vue和Element UI实现树形数据和懒加载时遇到的“Maximum call stack size exceeded”错误,指出问题的原因通常是因为数据中的唯一标识符`id`不唯一,导致递归渲染造成调用栈溢出。
64 1
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
|
1月前
|
JavaScript
vue3,使用watch监听props中的数据
【10月更文挑战第3天】
851 2
|
1月前
|
JavaScript 应用服务中间件 nginx
nginx部署vue项目
本文介绍了将Vue项目部署到Nginx的步骤,包括构建Vue项目、上传dist文件夹到服务器、安装Nginx、配置Nginx代理静态文件以及重启Nginx,确保了Vue应用可以通过域名或IP地址访问。
85 1
|
1月前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
161 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
1月前
|
JavaScript 应用服务中间件 开发工具
vue尚品汇商城项目-day07【53.nginx反向代理配置】
vue尚品汇商城项目-day07【53.nginx反向代理配置】
30 4
|
21天前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
107 0