莒口水闸河道范围加载问题诊断指南

问题描述

打包后，莒口水闸河道范围水面图层无法加载。

诊断步骤

1. 检查浏览器控制台日志

启动应用后，打开浏览器控制台（F12），查看以下日志：

正常情况应该看到：

========== loadWaterLayers 开始执行 ==========
window.viewer: Viewer {...}
开始加载莒口水闸河道范围水面...
========== loadWaterLayer 开始执行 ==========
URL: /js/莒口水闸河道范围.geojson
Name: 莒口水闸河道
Fetch response: Response {ok: true, status: 200, ...}
GeoJSON 加载成功: {type: "FeatureCollection", ...}
水面图层加载完成

错误情况可能看到：

window.viewer 不存在，无法加载水面图层

或

加载水体GeoJSON失败
URL: /js/莒口水闸河道范围.geojson
错误详情: TypeError: Failed to fetch

2. 检查网络请求

打开浏览器开发者工具（F12）
切换到 Network 标签
查找请求：莒口水闸河道范围.geojson
检查状态：
- ✅ 200 OK - 文件加载成功
- ❌ 404 Not Found - 文件不存在
- ❌ Failed to fetch - 路径问题或跨域问题

3. 检查打包后的文件

Windows:

# 检查文件是否存在
Test-Path dist\js\莒口水闸河道范围.geojson

# 或使用 dir
dir dist\js\莒口水闸河道范围.geojson

Linux/Mac:

# 检查文件是否存在
ls -la dist/js/莒口水闸河道范围.geojson

文件应该存在于 dist/js/ 目录下。

解决方案

方案1：确保文件正确打包

步骤：

确认文件在正确位置：

RuoYi-Vue3/public/js/莒口水闸河道范围.geojson

重新打包：
```
cd RuoYi-Vue3
npm run build:prod
```

验证文件已复制：

dir dist\js\莒口水闸河道范围.geojson

方案2：解决中文路径问题（推荐）

问题： 某些服务器对中文路径支持不好

解决方案：

重命名文件：

# 将文件重命名为英文
move public\js\莒口水闸河道范围.geojson public\js\jukou-water.geojson

修改代码引用（需要手动修改）：

// 修改 aside.vue
waterLayer.loadWaterLayer(
 '/js/jukou-water.geojson',  // 改为英文路径
 '莒口水闸河道',
 (dataSource) => {
   console.log('水面图层加载完成', dataSource);
 }
);

方案3：检查 Web 服务器配置

Nginx 配置

确保 Nginx 正确配置静态文件访问：

location /js/ {
    alias /path/to/dist/js/;
    charset utf-8;
    index index.html;
}

IIS 配置

确保应用程序池集成模式
添加 MIME 类型：
- 扩展名：.geojson
- MIME类型：application/json

方案4：检查文件权限

Linux/Mac:

# 设置正确的文件权限
chmod 644 dist/js/莒口水闸河道范围.geojson

Windows: 确保 IIS_IUSRS 或 IIS_WPG 用户对文件有读取权限。

调试技巧

1. 手动测试文件访问

在浏览器地址栏直接访问：

http://localhost/js/莒口水闸河道范围.geojson

如果能看到 JSON 数据，说明文件可访问。

2. 使用 curl 测试

# 测试文件是否可访问
curl -I http://localhost/js/莒口水闸河道范围.geojson

# 应该返回 200 OK

3. 添加调试代码

在 waterLayer.js 的 loadWaterLayer 函数开始处添加：

console.log('当前 URL:', window.location.href);
console.log('完整路径:', new URL(url, window.location.href).href);

已知问题

问题1：开发环境正常，生产环境失败

原因： Vite 开发服务器和静态文件服务器行为不同

解决：

检查打包后的文件路径
检查 Web 服务器配置

问题2：HTTPS 环境加载 HTTP 文件

症状： 控制台显示 Mixed Content 错误