# map-dpp-components

**Repository Path**: gzlpsdp/map-dpp-components

## Basic Information

- **Project Name**: map-dpp-components
- **Description**: @gzlpsdp/map-components 是一个基于 Vue 3、OpenLayers（2D） 和 Cesium（3D） 构建的地图组件库，提供了统一的 2D/3D 地图切换、WMS 服务加载、三维分析工具（测量、通视、视域、填挖方、坡度分析）等功能，适用于需要集成二三维地图的 Vue 3 项目。
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-04-17
- **Last Updated**: 2026-04-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 地图组件库使用文档

**当前最新版本：v1.0.4**  

### 简介
@gzlpsdp/map-components 是一个基于 Vue 3、OpenLayers（2D） 和 Cesium（3D） 构建的地图组件库，提供了统一的 2D/3D 地图切换、WMS 服务加载、三维分析工具（测量、通视、视域、填挖方、坡度分析）等功能，适用于需要集成二三维地图的 Vue 3 项目。

### 安装
**1. 通过 Gitee Git URL 安装**
```bash
npm install git+https://gitee.com/gzlpsdp/map-dpp-components.git#v1.0.1
```

**2. 安装 peer 依赖**

组件库本身不打包以下依赖，需要宿主项目自行安装：

```bash
npm install vue@^3.5.0 cesium@^1.132.0 ol@^7.4.0 element-plus@^2.10.0 @turf/turf@^6.5.0 proj4@^2.20.0 @element-plus/icons-vue@^2.3.0
```

**3. 配置 Vite（如果使用 Cesium）**

在业务项目的 vite.config.js 中添加 Cesium 插件：
```javascript
import cesium from 'vite-plugin-cesium'

export default {
  plugins: [vue(), cesium()]
}
```

**4. 引入基础样式**

在业务项目的入口文件（如 main.js）中引入地图库和 UI 库的样式：
```javascript
import 'ol/ol.css'
import 'element-plus/dist/index.css'
import 'cesium/Build/Cesium/Widgets/widgets.css'
```

### 快速开始

**1. 在 Vue 组件中导入组件和样式**

```javascript
<script setup>
import { DualMap } from '@gzlpsdp/map-components'
import '@gzlpsdp/map-components/style.css'
</script>

<template>
  <DualMap ref="map" />
</template>
```

**2. 示例（参考后面的 MapPage.vue）**

下面是一个演示页面

```javascript
<template>
  <div class="map-page">
    <DualMap
      ref="dualMapRef"
      :tiandituKey="tiandituKey"
      :defaultCenter="[106.71, 26.57]"
      :defaultZoom2D="12"
      :defaultHeight3D="5000"
      :autoClearDrawings="true"
    />
    <!-- 其他 UI 控件 -->
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { DualMap } from '@gzlpsdp/map-components'
import '@gzlpsdp/map-components/style.css'

const dualMapRef = ref(null)
const tiandituKey = import.meta.env.VITE_TIANDITU_KEY || 'your_key'

// 调用组件方法示例
const flyToGuiyang = () => {
  dualMapRef.value?.flyTo(106.71, 26.57, 2000)
}
</script>
```

### 组件 API

**DualMap Props**

|属性名|	类型|	默认值|	描述
|------|-------|---------|-----|
|tiandituKey|	String	|'3c3c7e74921e6c523414b680f8c622e2'|	天地图密钥，用于 2D 和 3D 底图。建议使用自己的密钥。
|defaultCenter|	Array|	[106.71, 26.57]	|默认地图中心点 [经度, 纬度]。
|defaultZoom2D|	Number|	8|	2D 地图默认缩放级别。
|defaultHeight3D|	Number|	5000|	3D 地图初始相机高度（米）。
|autoClearDrawings|	Boolean|	true|	切换 2D/3D 模式时是否自动清除绘制的图形。
|tiandituLogoUrl|	String|	https://www.tianditu.gov.cn/images/logo.png|	天地图logo
|showTiandituLogo|	Boolean|	'true|	是否显示天地图logo

**DualMap 暴露的方法（通过 ref 调用）**

以下方法可通过 dualMapRef.value?.methodName() 调用。

***基础操作***

|方法|	参数	|描述|
|------|-------|-----|
|toggleMap()|	无|	切换 2D/3D 视图。
|flyTo(lon, lat, height)|	lon 经度, lat 纬度, height 相机高度（米）|	定位到指定经纬度。
|zoomIn()|	无|	放大一级。
|zoomOut()|	无|	缩小一级。
|resetView()	|无|	复位到默认视图。

***3D 模型与地形***

|方法|	参数|	描述|
|------|-------|-----|
|load3DModel(url, id, height)|	url 3D Tiles 服务地址, id 模型唯一标识, height 模型抬高高度|	加载 3D 倾斜摄影模型。
|remove3DModel(id)|	id 模型标识	|移除指定 3D 模型。
|setTerrain(url)|	url 地形服务地址（如 Cesium terrain 格式）|	加载自定义地形。
|resetTerrain()	|无	|重置地形为椭球体（无起伏）。

***WMS 服务管理***

|方法|	参数|	描述|
|------|-------|-----|
|addWmsLayer(id, url, params)|	id 图层唯一标识, url WMS 服务地址, params 参数对象（需包含 layers 字段）|	自动适配当前 2D/3D 模式添加 WMS 图层。
|removeWmsLayer(id)|	id 图层标识|	移除指定 WMS 图层。
|clearAllWmsLayers()|	无|	清除当前模式下的所有 WMS 图层。
|addWmsLayer2D(id, url, layerName, options)|	同上（仅 2D 模式）|	强制在 2D 模式下添加 WMS 图层。
|enableWmsQuery(callback)|	callback 查询结果回调函数|	启用 WMS 要素查询（点击地图获取属性）。
|disableWmsQuery()	|无	|禁用 WMS 要素查询。

***WMS 参数示例：***
```javascript
{
  layers: 'workspace:layer_name',
  format: 'image/png',
  transparent: true,
  version: '1.3.0',
  cql_filter: "id > 0",   // 可选的筛选条件
  token: 'your_token'     // 可选
}
```

***三维分析工具***

|方法|	参数|	描述|
|------|-------|-----|
|startDraw3D(type, options)|	type 几何类型（'Point', 'LineString', 'Polygon'）, options.onComplete 回调|	开始在地图上绘制几何图形。
|clearDrawings3D()|	无	|清除所有绘制的图形。
|measureDistance3D(p1, p2)|	p1, p2 为 Cesium.Cartesian3 点|	计算两点之间的直线距离（米）。
|measureArea3D(positions)|	positions 多边形顶点数组|	计算多边形面积（平方米）。
|visibilityAnalysis(start, end)|	start, end 为 Cesium.Cartesian3 点|	通视分析，返回 { isVisible, distance, heightDiff }。
|viewAnalysis(center, radius, startAngle, endAngle, step)|	center 观测点, radius 半径（米）, startAngle, endAngle 角度范围, step 步长（默认 5°）|	视域分析，在地图上绘制可视区域（绿色）和不可视区域（红色）。
|computeCutAndFill(positions, baseHeight)|	positions 多边形顶点数组, baseHeight 基准高程（米）|	填挖方分析，返回 { cutVolume, fillVolume, baseArea }。
|slopeAnalysis(positions)|	positions 多边形顶点数组|	坡度分析，返回各坡度等级百分比。

***其他辅助方法***

|方法	|参数	|描述|
|------|-------|-----|
|getActiveMapType()|	无|	返回当前地图模式 '2d' 或 '3d'。
|getHeightFromLonLatDeg(lon, lat)|	lon 经度, lat 纬度	|获取指定经纬度的地形高度（米）。
|toDegrees(radians) / toRadians(degrees)|	角度/弧度|	角度弧度转换工具。
|bearing(startLat, startLng, destLat, destLng)|	经纬度	|计算两点之间的方位角。

### 常见问题

**1. 安装后组件无法渲染，控制台报错 Component is missing template or render function**

**原因：** 使用了默认导入而不是具名导入。

**解决：** 改为 import { DualMap } from '@gzlpsdp/map-components'。

**2. 天地图底图不显示或请求 403**

**原因：** 默认的天地图测试密钥 3c3c7e74921e6c523414b680f8c622e2 可能有访问频率限制。

**解决：** 注册天地图开发者账号，获取自己的密钥，并通过 :tiandituKey 传入。

**3. Cesium 报错 Cesium is not defined**

**原因：** 未正确配置 Cesium 插件或未引入 Cesium 库。

**解决：** 

- 确保安装了 cesium 和 vite-plugin-cesium。

- 在 vite.config.js 中配置 cesium() 插件。

- 在 main.js 中引入 Cesium 的 CSS：import 'cesium/Build/Cesium/Widgets/widgets.css'。

**4. 2D 地图的测量结果不准确**

OpenLayers 的 getLength 和 getArea 默认使用球面计算，精度足够用于常规场景。如需更高精度，可自行修改 OlMap.vue 中的测量逻辑。

**5. 切换 2D/3D 后 WMS 图层消失**

组件内部已实现 WMS 图层的自动同步（syncWmsLayersToCurrentMode），无需手动处理。如果仍有问题，请检查 addWmsLayer 时是否传入了正确的 id 和 params。

**6. 地形加载失败**

- 确保地形服务 URL 符合 Cesium terrain 格式（如 http://example.com/terrain，目录下需包含 layer.json）。

- 检查网络是否可访问该 URL（注意跨域问题）。

- 可以先用 setTerrain 加载世界地形 Cesium.createWorldTerrain() 测试。

**7. 如何获取 WMS 查询返回的要素信息？**

启用 enableWmsQuery(callback) 后，点击地图会触发回调，参数格式为：
```javascript
[
  {
    layerName: '图层名',
    properties: { 属性键值对 },
    coordinate: { lon, lat }  // 2D 模式下为坐标，3D 模式下为 position
  }
]
```

### 更新组件库

当组件库有新版本时，在业务项目中执行：
```bash
npm install git+https://gitee.com/gzlpsdp/map-dpp-components.git#v1.0.2
```

建议在 package.json 中锁定版本号，避免意外升级。

### 完整的MapPage.vue示例

```javascript
<template>
  <div class="map-page">
    <!-- 传入必要的 props，建议使用环境变量 -->
    <DualMap
      ref="dualMapRef"
      :tiandituKey="tiandituKey"
      :defaultCenter="[106.71, 26.57]"
      :defaultZoom2D="12"
      :defaultHeight3D="5000"
      :autoClearDrawings="true"
    />

    <div class="demo-panel">
      <h4>地图操作演示</h4>
      <div class="button-group">
        <el-button size="small" type="primary" @click="toggleMap">切换2D/3D</el-button>
        <el-button size="small" @click="flyToGuiyang">飞往贵阳</el-button>
        <el-button size="small" type="primary" @click="load3DModelDemo">加载3D模型</el-button>
        <el-button size="small" type="danger" @click="removeCurrentModel">移除3D模型</el-button>
        <el-button size="small" type="primary" @click="loadTerrain">加载自定义地形</el-button>
        <el-button size="small" type="danger" @click="removeTerrain">移除自定义地形</el-button>
      </div>

      <el-divider content-position="left">三维分析工具</el-divider>
      <div class="button-group">
        <el-button size="small" type="success" @click="startMeasureDistance">测量距离(3D)</el-button>
        <el-button size="small" type="success" @click="startVisibilityAnalysis">通视分析(3D)</el-button>
        <el-button size="small" type="success" @click="startViewAnalysis">视域分析(3D)</el-button>
        <el-button size="small" type="success" @click="startCutFillAnalysis">填挖方分析(3D)</el-button>
        <el-button size="small" type="success" @click="startSlopeAnalysis">坡度分析(3D)</el-button>
        <el-button size="small" @click="clearDrawDemo">清除绘制</el-button>
      </div>

      <!-- WMS 服务示例区域 -->
      <el-divider content-position="left">WMS 服务加载示例</el-divider>
      <div class="button-group">
        <el-button size="small" type="success" @click="addWmsAuto">添加WMS(自动适配)</el-button>
        <el-button size="small" type="warning" @click="addWmsForce2D">强制2D添加WMS</el-button>
        <el-button size="small" type="danger" @click="addWmsForce3D">强制3D添加WMS</el-button>
        <el-button size="small" @click="addWmsWithFilter">添加筛选WMS</el-button>
        <el-button size="small" @click="clearAllWms">清除所有WMS</el-button>
        <!-- 新增：WMS查询开关 -->
        <el-button size="small" type="info" @click="toggleWmsQuery">
          {{ wmsQueryEnabled ? '禁用WMS查询' : '启用WMS查询' }}
        </el-button>
      </div>

      <!-- 已添加的 WMS 图层列表 -->
      <div v-if="wmsLayersList.length > 0" class="wms-layer-list">
        <div class="list-header">已添加的WMS图层：</div>
        <div v-for="layer in wmsLayersList" :key="layer.id" class="layer-item">
          <span>{{ layer.name }} ({{ layer.mode }})</span>
          <el-button size="small" type="danger" @click="removeWmsLayer(layer.id)">移除</el-button>
        </div>
      </div>

      <div class="api-list">
        <h5>可用的 API 方法（通过 dualMapRef 调用）</h5>
        <ul>
          <li><code>toggleMap()</code> - 切换2D/3D</li>
          <li><code>flyTo(lon, lat, height)</code> - 定位到经纬度</li>
          <li><code>load3DModel(url, id, height)</code> - 加载3D倾斜模型</li>
          <li><code>remove3DModel(id)</code> - 移除模型</li>
          <li><code>setTerrain(url)</code> - 加载地形</li>
          <li><code>resetTerrain()</code> - 重置地形</li>
          <li><code>addWmsLayer(id, url, params)</code> - 统一添加WMS</li>
          <li><code>removeWmsLayer(id)</code> - 移除WMS图层</li>
          <li><code>clearAllWmsLayers()</code> - 清除所有WMS</li>
          <li><code>startDraw3D(type, options)</code> - 开始绘制</li>
          <li><code>clearDrawings3D()</code> - 清除绘制</li>
          <li><code>measureDistance3D(p1, p2)</code> - 测量距离</li>
          <li><code>measureArea3D(positions)</code> - 测量面积</li>
          <li><code>visibilityAnalysis(start, end)</code> - 通视分析</li>
          <li><code>viewAnalysis(center, radius, startAngle, endAngle)</code> - 视域分析</li>
          <li><code>computeCutAndFill(positions, baseHeight)</code> - 填挖方分析</li>
          <li><code>slopeAnalysis(positions)</code> - 坡度分析</li>
          <li><code>enableWmsQuery(callback)</code> / <code>disableWmsQuery()</code> - 启用/禁用WMS点击查询</li>
        </ul>
      </div>
    </div>

    <!-- WMS 要素信息展示面板 -->
    <div v-if="wmsInfoList.length" class="wms-info-panel">
      <div class="panel-header">
        <span>WMS 要素信息</span>
        <el-icon class="close-btn" @click="clearWmsInfo"><Close /></el-icon>
      </div>
      <div class="panel-content">
        <div v-for="(item, idx) in wmsInfoList" :key="idx" class="info-item">
          <h4>{{ item.layerName }}</h4>
          <ul>
            <li v-for="(val, key) in item.properties" :key="key">
              <b>{{ key }}:</b> {{ val }}
            </li>
          </ul>
        </div>
        <div v-if="wmsInfoList.length === 0" class="empty-tip">点击地图上的WMS图层获取信息</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onUnmounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Close } from '@element-plus/icons-vue'
import { DualMap } from '@gzlpsdp/map-components'   // 具名导入
import '@gzlpsdp/map-components/style.css'
import * as Cesium from 'cesium'

// 天地图密钥（建议从环境变量读取，避免公开）
const tiandituKey = import.meta.env.VITE_TIANDITU_KEY || '3c3c7e74921e6c523414b680f8c622e2'

const dualMapRef = ref(null)

// WMS 图层管理
const wmsLayersList = ref([])
let nextLayerId = 1

// 当前激活的分析操作（用于避免多个绘制冲突）
let currentAction = null

// WMS 查询相关
const wmsQueryEnabled = ref(false)
const wmsInfoList = ref([])

// WMS 服务配置
const WMS_CONFIG = {
  url: '/geoserver/geoserver/wms',
  layerName: 'hngy:collect_geom_data',
}

// ========== WMS 查询功能 ==========
const handleWmsInfo = (info) => {
  // info 格式: [{ layerName, properties, coordinate/position }]
  if (info && info.length) {
    wmsInfoList.value = info
  } else {
    ElMessage.info('未查询到要素信息')
  }
}

const toggleWmsQuery = () => {
  if (wmsQueryEnabled.value) {
    // 禁用查询
    dualMapRef.value?.disableWmsQuery?.()
    wmsQueryEnabled.value = false
    ElMessage.info('已禁用WMS查询')
  } else {
    // 启用查询
    dualMapRef.value?.enableWmsQuery?.(handleWmsInfo)
    wmsQueryEnabled.value = true
    ElMessage.info('已启用WMS查询，点击地图上的WMS图层获取信息')
  }
}

const clearWmsInfo = () => {
  wmsInfoList.value = []
}

// 组件卸载时禁用查询，避免残留事件
onUnmounted(() => {
  if (wmsQueryEnabled.value) {
    dualMapRef.value?.disableWmsQuery?.()
  }
})

// ========== 3D 分析功能 ==========

// 测量距离
const startMeasureDistance = () => {
  if (currentAction) {
    ElMessage.warning('请先完成当前操作或点击“清除绘制”')
    return
  }
  currentAction = 'measureDistance'
  ElMessage.info('请在地图上绘制线（左键点击添加点，右键结束）')
  dualMapRef.value?.startDraw3D('LineString', {
    onComplete: (points) => {
      if (points.length < 2) {
        ElMessage.warning('至少需要两个点才能测量距离')
        currentAction = null
        return
      }
      let totalDistance = 0
      for (let i = 0; i < points.length - 1; i++) {
        const dist = dualMapRef.value?.measureDistance3D(points[i], points[i + 1]) || 0
        totalDistance += dist
      }
      ElMessage.success(`测量距离：${totalDistance.toFixed(2)} 米`)
      currentAction = null
    }
  })
}

let visibilityPoints = []

const startVisibilityAnalysis = () => {
  if (currentAction) {
    ElMessage.warning('请先完成当前操作或点击“清除绘制”')
    return
  }
  currentAction = 'visibility'
  visibilityPoints = []
  ElMessage.info('请在地图上依次绘制两个不同的点（起点和终点），右键结束')

  const drawNextPoint = () => {
    dualMapRef.value?.startDraw3D('Point', {
      onComplete: (point) => {
        if (visibilityPoints.length === 1) {
          const dist = Cesium.Cartesian3.distance(visibilityPoints[0], point)
          if (dist < 1) {
            ElMessage.warning('终点与起点过于接近，请重新绘制终点')
            drawNextPoint()
            return
          }
        }
        visibilityPoints.push(point)
        if (visibilityPoints.length === 1) {
          ElMessage.info('已绘制起点，请绘制终点')
          drawNextPoint()
        } else if (visibilityPoints.length === 2) {
          dualMapRef.value?.visibilityAnalysis(visibilityPoints[0], visibilityPoints[1])
            .then(result => {
              if (result) {
                const msg = result.isVisible ? '两点之间通视' : '两点之间不通视'
                ElMessage.success(`${msg}，距离：${result.distance}米，高差：${result.heightDiff}米`)
              }
            })
            .catch(err => {
              console.error(err)
              ElMessage.error('通视分析失败')
            })
          currentAction = null
          visibilityPoints = []
        }
      }
    })
  }
  drawNextPoint()
}

// 视域分析
const startViewAnalysis = async () => {
  if (currentAction) {
    ElMessage.warning('请先完成当前操作或点击“清除绘制”')
    return
  }
  const { value: form } = await ElMessageBox.prompt('请输入视域分析参数（半径(km)、起始角度、结束角度，用逗号分隔）', '视域分析', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputValue: '5,0,360',
    inputPattern: /^\d+(\.\d+)?,\d+(\.\d+)?,\d+(\.\d+)?$/,
    inputErrorMessage: '格式错误，示例：5,0,360'
  }).catch(() => ({ value: null }))
  if (!form) return

  const [radiusKm, startAngle, endAngle] = form.split(',').map(Number)
  const radius = radiusKm * 1000

  currentAction = 'viewAnalysis'
  ElMessage.info('请在地图上绘制一个点作为观测点')
  dualMapRef.value?.startDraw3D('Point', {
    onComplete: (centerPoint) => {
      dualMapRef.value?.viewAnalysis(centerPoint, radius, startAngle, endAngle, 10)
      ElMessage.success('视域分析已执行，绿色为可视区域，红色为不可视区域')
      currentAction = null
    }
  })
}

// 填挖方分析
const startCutFillAnalysis = () => {
  if (currentAction) {
    ElMessage.warning('请先完成当前操作或点击“清除绘制”')
    return
  }
  currentAction = 'cutfill'
  ElMessage.info('请在地图上绘制一个面（多边形），右键结束')
  dualMapRef.value?.startDraw3D('Polygon', {
    onComplete: async (positions) => {
      if (positions.length < 3) {
        ElMessage.warning('至少需要三个点才能构成面')
        currentAction = null
        return
      }
      const { value: baseHeight } = await ElMessageBox.prompt('请输入基准高度（米）', '填挖方分析', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: '0',
        inputPattern: /^-?\d+(\.\d+)?$/,
        inputErrorMessage: '请输入数字'
      }).catch(() => ({ value: null }))
      if (baseHeight === null) {
        currentAction = null
        return
      }
      const result = await dualMapRef.value?.computeCutAndFill(positions, parseFloat(baseHeight))
      if (result) {
        ElMessage.success(`填挖方分析完成：挖方量 ${result.cutVolume} m³，填方量 ${result.fillVolume} m³，基准面积 ${result.baseArea} m²`)
      } else {
        ElMessage.error('填挖方分析失败')
      }
      currentAction = null
    }
  })
}

// 坡度分析
const startSlopeAnalysis = () => {
  if (currentAction) {
    ElMessage.warning('请先完成当前操作或点击“清除绘制”')
    return
  }
  currentAction = 'slope'
  ElMessage.info('请在地图上绘制一个面（多边形），右键结束')
  dualMapRef.value?.startDraw3D('Polygon', {
    onComplete: async (positions) => {
      if (positions.length < 3) {
        ElMessage.warning('至少需要三个点才能构成面')
        currentAction = null
        return
      }
      const result = await dualMapRef.value?.slopeAnalysis(positions)
      if (result) {
        ElMessage.success(`坡度分析完成：0-2°: ${result.level1}%, 2-6°: ${result.level2}%, 6-15°: ${result.level3}%, 15-25°: ${result.level4}%, >25°: ${result.level5}%`)
      } else {
        ElMessage.error('坡度分析失败')
      }
      currentAction = null
    }
  })
}

// 清除绘制
const clearDrawDemo = () => {
  dualMapRef.value?.clearDrawings3D()
  currentAction = null
  visibilityPoints = []
  ElMessage.info('已清除所有绘制内容')
}

// ========== 原有 WMS 和基础功能 ==========

const currentModelId = ref(null)

const load3DModelDemo = async () => {
  const modelUrl = 'http://192.168.1.107/model/fhy1/tileset.json'
  const modelId = 'demo_model'
  const success = await dualMapRef.value?.load3DModel(modelUrl, modelId, 0)
  if (success) {
    currentModelId.value = modelId
    ElMessage.success('3D模型加载成功')
  }
}

const removeCurrentModel = async () => {
  if (currentModelId.value) {
    await dualMapRef.value?.remove3DModel(currentModelId.value)
    currentModelId.value = null
    ElMessage.success('已移除3D模型')
  } else {
    ElMessage.warning('没有已加载的模型')
  }
}

const loadTerrain = async () => {
  const terrainUrl = 'http://192.168.1.107/3d/gz'
  await dualMapRef.value?.setTerrain(terrainUrl)
}

const removeTerrain = async () => {
  await dualMapRef.value?.resetTerrain()
}

const addWmsAuto = async () => {
  try {
    const layerId = `wms_auto_${nextLayerId++}`
    const params = {
      layers: WMS_CONFIG.layerName,
      format: 'image/png',
      transparent: true,
      version: '1.3.0'
    }
    const layer = await dualMapRef.value?.addWmsLayer(layerId, WMS_CONFIG.url, params)
    if (layer) {
      const currentMode = dualMapRef.value?.getActiveMapType() || '2d'
      wmsLayersList.value.push({
        id: layerId,
        name: `${WMS_CONFIG.layerName} (自动-${currentMode})`,
        mode: currentMode.toUpperCase()
      })
      ElMessage.success(`WMS图层已添加至${currentMode.toUpperCase()}模式`)
    }
  } catch (error) {
    console.error('添加WMS失败:', error)
    ElMessage.error('添加WMS图层失败')
  }
}

const addWmsForce2D = async () => {
  try {
    const currentMode = dualMapRef.value?.getActiveMapType()
    if (currentMode === '3d') {
      ElMessage.info('正在切换至2D模式...')
      dualMapRef.value?.toggleMap()
      await new Promise(resolve => setTimeout(resolve, 500))
    }
    const layerId = `wms_2d_${nextLayerId++}`
    const options = { label: '强制2D WMS图层', transparent: true, version: '1.3.0' }
    const layer = dualMapRef.value?.addWmsLayer2D(layerId, WMS_CONFIG.url, WMS_CONFIG.layerName, options)
    if (layer) {
      wmsLayersList.value.push({ id: layerId, name: `${WMS_CONFIG.layerName} (强制2D)`, mode: '2D' })
      ElMessage.success('WMS图层已强制添加至2D模式')
    }
  } catch (error) {
    console.error('强制2D添加WMS失败:', error)
    ElMessage.error('强制2D添加WMS失败')
  }
}

const addWmsForce3D = async () => {
  try {
    const currentMode = dualMapRef.value?.getActiveMapType()
    if (currentMode === '2d') {
      ElMessage.info('正在切换至3D模式...')
      dualMapRef.value?.toggleMap()
      await new Promise(resolve => setTimeout(resolve, 800))
    }
    const viewer = dualMapRef.value?.viewer
    if (!viewer) {
      ElMessage.warning('3D视图未就绪，请稍后重试')
      return
    }
    const layerId = `wms_3d_${nextLayerId++}`
    const params = { layers: WMS_CONFIG.layerName, format: 'image/png', transparent: true, version: '1.3.0' }
    const layer = await dualMapRef.value?.addWmsLayer(layerId, WMS_CONFIG.url, params)
    if (layer) {
      wmsLayersList.value.push({ id: layerId, name: `${WMS_CONFIG.layerName} (强制3D)`, mode: '3D' })
      ElMessage.success('WMS图层已强制添加至3D模式')
    }
  } catch (error) {
    console.error('强制3D添加WMS失败:', error)
    ElMessage.error('强制3D添加WMS失败')
  }
}

const addWmsWithFilter = async () => {
  try {
    const layerId = `wms_filter_${nextLayerId++}`
    const params = {
      layers: WMS_CONFIG.layerName,
      format: 'image/png',
      transparent: true,
      version: '1.3.0',
      cql_filter: "id > 0"
    }
    const layer = await dualMapRef.value?.addWmsLayer(layerId, WMS_CONFIG.url, params)
    if (layer) {
      const currentMode = dualMapRef.value?.getActiveMapType() || '2d'
      wmsLayersList.value.push({ id: layerId, name: `${WMS_CONFIG.layerName} (带筛选)`, mode: currentMode.toUpperCase() })
      ElMessage.success(`带筛选条件的WMS图层已添加至${currentMode.toUpperCase()}模式`)
    }
  } catch (error) {
    console.error('添加筛选WMS失败:', error)
    ElMessage.error('添加筛选WMS失败')
  }
}

const removeWmsLayer = async (layerId) => {
  try {
    await dualMapRef.value?.removeWmsLayer(layerId)
    const index = wmsLayersList.value.findIndex(l => l.id === layerId)
    if (index !== -1) {
      wmsLayersList.value.splice(index, 1)
      ElMessage.success(`已移除WMS图层 ${layerId}`)
    }
  } catch (error) {
    console.error('移除WMS失败:', error)
    ElMessage.error('移除WMS图层失败')
  }
}

// 清除所有 WMS（优化：2D 模式使用 Promise.all 并行移除）
const clearAllWms = async () => {
  try {
    const currentMode = dualMapRef.value?.getActiveMapType()
    if (currentMode === '3d') {
      dualMapRef.value?.clearAllWmsLayers?.()
      wmsLayersList.value = []
      ElMessage.success('已清除所有3D WMS图层')
    } else {
      // 2D 模式：并行移除所有图层
      await Promise.all(wmsLayersList.value.map(layer => dualMapRef.value?.removeWmsLayer(layer.id)))
      wmsLayersList.value = []
      ElMessage.success('已清除所有2D WMS图层')
    }
  } catch (error) {
    console.error('清除所有WMS失败:', error)
    ElMessage.error('清除WMS图层失败')
  }
}

const toggleMap = () => dualMapRef.value?.toggleMap()
const flyToGuiyang = () => dualMapRef.value?.flyTo(106.71, 26.57, 2000)

// 保留原有演示函数
const measureDemo = () => ElMessage.info('请使用“测量距离(3D)”按钮')
const visibilityDemo = () => ElMessage.info('请使用“通视分析(3D)”按钮')
const viewAnalysisDemo = () => ElMessage.info('请使用“视域分析(3D)”按钮')
const flyTourDemo = () => {
  const points = [
    Cesium.Cartesian3.fromDegrees(106.71, 26.57, 500),
    Cesium.Cartesian3.fromDegrees(106.72, 26.58, 600),
    Cesium.Cartesian3.fromDegrees(106.73, 26.59, 700)
  ]
  dualMapRef.value?.startFlyTour(points, { modelUrl: 'http://192.168.1.107/model/room/ID_33.gltf', multiplier: 2 })
  setTimeout(() => dualMapRef.value?.stopFlyTour(), 10000)
}
</script>

<style scoped>
.map-page {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.demo-panel {
  position: absolute;
  bottom: 100px;
  left: 20px;
  z-index: 1001;
  background: rgba(255, 255, 255, 0.95);
  padding: 12px;
  border-radius: 8px;
  max-width: 550px;
  max-height: 85%;
  overflow-y: auto;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  font-size: 12px;
}

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.api-list {
  border-top: 1px solid #ddd;
  padding-top: 12px;
  margin-top: 8px;
}

.api-list ul {
  margin: 8px 0;
  padding-left: 20px;
}

.api-list li {
  margin: 4px 0;
}

code {
  background: #f4f4f4;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 11px;
}

.wms-layer-list {
  margin: 12px 0;
  padding: 8px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.list-header {
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 12px;
  color: #495057;
}

.layer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  margin-bottom: 4px;
  background: white;
  border-radius: 4px;
  border: 1px solid #dee2e6;
}

.layer-item span {
  font-size: 11px;
  font-family: monospace;
  color: #006E55;
}

.el-divider {
  margin: 12px 0;
}

.el-divider__text {
  font-weight: bold;
  color: #006E55;
}

/* WMS 信息展示面板 */
.wms-info-panel {
  position: absolute;
  bottom: 100px;
  right: 20px;
  width: 320px;
  max-height: 400px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  z-index: 1002;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.panel-header {
  padding: 8px 12px;
  background: #006E55;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.close-btn {
  cursor: pointer;
  font-size: 16px;
}
.close-btn:hover {
  color: #ff6b6b;
}

.panel-content {
  padding: 12px;
  overflow-y: auto;
  font-size: 12px;
}

.info-item {
  margin-bottom: 16px;
  border-bottom: 1px solid #eee;
}
.info-item:last-child {
  border-bottom: none;
}

.info-item h4 {
  margin: 0 0 8px 0;
  color: #006E55;
  font-size: 13px;
}

.info-item ul {
  margin: 0 0 8px 0;
  padding-left: 16px;
}

.empty-tip {
  text-align: center;
  color: #999;
  padding: 20px;
}
</style>
```

### MapPage.vue效果

![alt text](image.png)