Nginx代理部署高德地图风格的瓦片

部署高德地图风格的瓦片（{z}/{y}/{x}.png）并通过 Nginx 提供服务是一个非常常见的需求。Nginx 在处理静态小文件（如图片瓦片）方面性能极高。

以下是详细的步骤和配置：

第一步：确认瓦片结构

现有一个gaode_Imagery 文件夹文件夹结构完全符合以下格式：

• z: 缩放级别 (Zoom Level) 文件夹

• y: 瓦片的行号 (Tile Row) 文件夹，位于 z 文件夹内

• x.png: 瓦片的列号 (Tile Column) 文件，以 .png 结尾，位于 y 文件夹内

第二步：配置 Nginx

配置示例 1：作为主要服务（直接通过端口/域名访问）

nginx

# 在 /etc/nginx/conf.d/tiles.conf 中创建此文件
server {
    listen 80;
    # 如果你有域名，可以取消注释下一行并替换你的域名
    # server_name your-domain.com; 

    # 开启 gzip 压缩（可选但推荐，对文本有效，图片可能已是压缩格式）
    gzip on;

    # 设置根目录，指向瓦片文件夹的父目录
    root /var/www/tiles;

    # 配置 /gaode_Imagery/ 路径下的访问规则
    location /gaode_Imagery/ {
        # 非常重要：允许跨域请求
        # 因为你的瓦片服务很可能被不同域名下的网页地图（如Leaflet, OpenLayers）调用
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';
        
        # 开启高效发送文件模式
        sendfile on;
        tcp_nopush on;

        # 设置浏览器缓存时间，图片瓦片一旦生成通常不会改变，可以缓存很久
        # 这里设置1天（1d），可以根据需要调整（如30d, max）
        expires 1d;
    }
}

配置示例 2：作为现有网站的一个子路径（反向代理）

如果你的 Nginx 已经在运行其他服务，你可以添加一个新的 location 块来代理瓦片路径。

nginx

# 添加到现有的 server 块中
server {
    listen 80;
    server_name your-existing-domain.com;

    ... # 你现有的其他配置

    location /gaode_Imagery/ {
        # 别名（alias）指令非常重要！
        # 它告诉Nginx，收到 /gaode_Imagery/ 的请求时，去哪个目录找文件
        alias /var/www/tiles/gaode_Imagery/;

        # 同样需要允许跨域
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS';

        # 启用缓存
        expires 1d;
    }
}

第三步：在前端地图库中使用

前端vue.config.js种配置

'/gaode_Imagery': {
        target: 'http://youip:端口',
        changeOrigin: true,
        pathRewrite: {
          '^/gaode_Imagery': '/gaode_Imagery'
        }
      },

window.viewer.imageryLayers.get(0).show = true;
      const imagery = new Cesium.UrlTemplateImageryProvider({
        url: "/gaode_Imagery/{z}/{x}/{y}.png"   
      });
      window.viewer.imageryLayers.addImageryProvider(imagery);