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   
      });

实际效果图:


相关文章
|
1天前
|
JavaScript 前端开发 开发者
响应式原理:Vue 如何跟踪数据变化
【4月更文挑战第22天】Vue 的响应式系统是其核心,通过数据双向绑定实现视图与数据同步。依赖收集和观测数据使Vue能跟踪变化,变化通知组件更新视图。高效的更新策略如批量更新和虚拟DOM提升性能。组件化和可组合性支持有效通信和代码复用,强调数据驱动开发。开发者应合理组织数据、谨慎处理变更并充分利用组件化优势,以提高效率和用户体验。
|
1天前
Vue3响应式数据ref
Vue3响应式数据ref
|
1天前
|
JavaScript
Vue响应式数据的判断
Vue响应式数据的判断
|
1天前
Vue3 子传父 暴露数据 defineExpose
Vue3 子传父 暴露数据 defineExpose
Vue3 子传父 暴露数据 defineExpose
|
1天前
|
JavaScript
Vue3之Props组件数据传递
Vue3之Props组件数据传递
5 0
|
1天前
|
JavaScript
vue3表格编辑(数据回显)和删除功能实现
vue3表格编辑(数据回显)和删除功能实现
13 1
|
1天前
|
JavaScript
vue3使用element-plus 树组件(el-tree)数据回显
vue3使用element-plus 树组件(el-tree)数据回显
10 0
|
1天前
|
JavaScript 索引
vue 在什么情况下在数据发生改变的时候不会触发视图更新
vue 在什么情况下在数据发生改变的时候不会触发视图更新
18 2
|
1天前
|
监控 JavaScript
Vue中的数据变化监控与响应——深入理解Watchers
Vue中的数据变化监控与响应——深入理解Watchers
|
1天前
|
存储 JavaScript 前端开发
父子组件通信:有效地在Vue组件树中传递数据
【4月更文挑战第24天】Vue.js中的组件通信是实现可维护和可扩展代码的关键。遵循单向数据流原则,数据从父组件通过`props`传给子组件,子组件通过`$emit`触发事件响应。常用通信方式包括:1) `Props`和`Events`基础通信;2) `Provide / Inject`跨级通信;3) 使用Vuex管理复杂状态;4) 共享祖先组件或Vuex处理非父子组件通信;5) 少量使用`ref`和`$parent / $children`直接访问。选择合适的方式能优化应用性能和用户体验。