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

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

## 诊断步骤

### 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. 检查网络请求

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

### 3. 检查打包后的文件

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

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

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

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

## 解决方案

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

**步骤：**
1. 确认文件在正确位置：
   ```
   RuoYi-Vue3/public/js/莒口水闸河道范围.geojson
   ```

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

3. 验证文件已复制：
   ```bash
   dir dist\js\莒口水闸河道范围.geojson
   ```

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

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

**解决方案：**
1. 重命名文件：
   ```bash
   # 将文件重命名为英文
   move public\js\莒口水闸河道范围.geojson public\js\jukou-water.geojson
   ```

2. 修改代码引用（需要手动修改）：
   ```javascript
   // 修改 aside.vue
   waterLayer.loadWaterLayer(
     '/js/jukou-water.geojson',  // 改为英文路径
     '莒口水闸河道',
     (dataSource) => {
       console.log('水面图层加载完成', dataSource);
     }
   );
   ```

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

#### Nginx 配置
确保 Nginx 正确配置静态文件访问：
```nginx
location /js/ {
    alias /path/to/dist/js/;
    charset utf-8;
    index index.html;
}
```

#### IIS 配置
1. 确保应用程序池集成模式
2. 添加 MIME 类型：
   - 扩展名：`.geojson`
   - MIME类型：`application/json`

### 方案4：检查文件权限

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

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

## 调试技巧

### 1. 手动测试文件访问

在浏览器地址栏直接访问：
```
http://localhost/js/莒口水闸河道范围.geojson
```

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

### 2. 使用 curl 测试

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

# 应该返回 200 OK
```

### 3. 添加调试代码

在 `waterLayer.js` 的 `loadWaterLayer` 函数开始处添加：
```javascript
console.log('当前 URL:', window.location.href);
console.log('完整路径:', new URL(url, window.location.href).href);
```

## 已知问题

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

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

**解决：**
- 检查打包后的文件路径
- 检查 Web 服务器配置

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

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

**解决：**
- 使用相对路径 `/js/...`
- 或使用 HTTPS 协议访问所有资源

## 验证修复

修复后，检查以下内容：

1. ✅ 控制台无错误日志
2. ✅ 网络请求返回 200
3. ✅ 地图上可以看到水面图层
4. ✅ 水面有动态效果

## 联系支持

如果以上方法都无法解决问题，请提供：
1. 浏览器控制台完整日志
2. 网络请求截图
3. 打包后的文件列表
4. Web 服务器配置