当前位置：首页 > news >正文

Cesium通过本地nginx代理实现离线加载地图

news 来源：原创 2025/6/12 2:52:29

1、从官网下载nginx

nginx: download

2、把静态资源的地图放入html文件夹，可以再里面新建一个static文件夹

3、打开nginx.conf文件配置nginx代理

4、启动nginx

//开启服务：
start nginx
直接点击Nginx目录下的nginx.exe 

//停止服务：nginx停止命令stop与quit参数的区别在于stop是快速停止nginx，可能并不保存相关信息，quit是完整有序的停止nginx  ，并保存相关信息。nginx启动与停止命令的效果都可以通过Windows任务管理器中的进程选项卡观察。
nginx -s stop
nginx -s quit

//其他命令重启、关闭nginx
ps -ef | grep nginx
//从容停止Nginx
kill -QUIT 主进程号
//快速停止Nginx
kill -TERM 主进程号
//强制停止Nginx
pkill -9 nginx
//平滑重启nginx：
kill -HUP 主进程号

//重启服务：
nginx -s reload

//检查配置文件是否有语法操作
./nginx -t
//或者显示指定配置文件
./nginx -t -c /usr/local/nginx/conf/nginx.conf

5、访问图片，看看是否成功

6、代码实现Cesium加载地图

<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';

onMounted(() => {
  const viewer = new Cesium.Viewer('cesiumContainer', {
    baseLayerPicker: false,
    geocoder: false,
  });

  const custom = new Cesium.UrlTemplateImageryProvider({
    url: "http://127.0.0.1:8090/static/map/{z}/{x}/{reverseY}.jpg",
    tilingScheme: new Cesium.GeographicTilingScheme(),
  });
  viewer.imageryLayers.addImageryProvider(custom);
});
</script>

<style scoped>
#cesiumContainer {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
</style>