界面视图切换

Src/command_center/web-command-center/frontend/src/components/SharedMap.vue

@@ -100,8 +100,12 @@ export default {
           version: '2.0',
           plugins: [
             'AMap.Scale', 
+<<<<<<< HEAD
             'AMap.ToolBar',
             'AMap.ControlBar',
+=======
+            'AMap.ToolBar', 
+>>>>>>> 999104f0d0174d3a3870682fb7163d95bc623970
             'AMap.InfoWindow',
             'AMap.Marker',
             'AMap.Polyline',
@@ -115,7 +119,11 @@ export default {
             'AMap.TileLayer.Satellite',
             'AMap.TileLayer.Traffic',
             'AMap.TileLayer.RoadNet',
+<<<<<<< HEAD
             'AMap.Buildings',
+=======
+            'AMap.BuildingLayer',
+>>>>>>> 999104f0d0174d3a3870682fb7163d95bc623970
             'AMap.DistrictLayer',
             'AMap.Weather',
             'AMap.Driving'
@@ -128,8 +136,13 @@ export default {
         mapInstance.value = new AMap.Map('sharedMap', {
           zoom: 11,
           center: [116.397428, 39.90923],
+<<<<<<< HEAD
           viewMode: viewMode.value,
           pitch: viewMode.value === '3D' ? 45 : 0,
+=======
+          viewMode: '3D',
+          pitch: 0,
+>>>>>>> 999104f0d0174d3a3870682fb7163d95bc623970
           rotation: 0,
           mapStyle: 'amap://styles/normal',
           features: ['bg', 'road', 'building', 'point'],
@@ -159,6 +172,7 @@ export default {
             right: '10px'
           }
         })
+<<<<<<< HEAD
         
         // 添加3D控制条，用于控制3D视图的旋转、倾斜等
         const controlBar = new AMap.ControlBar({
@@ -173,6 +187,11 @@ export default {
         mapInstance.value.addControl(toolbar)
         mapInstance.value.addControl(scale)
         mapInstance.value.addControl(controlBar)
+=======
+
+        mapInstance.value.addControl(toolbar)
+        mapInstance.value.addControl(scale)
+>>>>>>> 999104f0d0174d3a3870682fb7163d95bc623970
 
         // 添加地图事件监听
         mapInstance.value.on('click', (e) => {
@@ -198,7 +217,11 @@ export default {
             });
 
             // 预初始化建筑图层
+<<<<<<< HEAD
             layerInstances.value.buildings = new window.AMap.Buildings({
+=======
+            layerInstances.value.buildings = new window.AMap.BuildingLayer({
+>>>>>>> 999104f0d0174d3a3870682fb7163d95bc623970
               zIndex: 11,
               heightFactor: viewMode.value === '3D' ? 1 : 0.6
             });
@@ -333,6 +356,7 @@ export default {
     const changeMapStyle = (style) => {
       if (!mapInstance.value) return
       
+<<<<<<< HEAD
       try {
         currentMapStyle.value = style
         
@@ -383,11 +407,60 @@ export default {
       }
     }
     
+=======
+      switch (style) {
+        case 'satellite':
+          // 使用卫星图层
+          if (!layerInstances.value.satellite) {
+            layerInstances.value.satellite = new window.AMap.TileLayer.Satellite()
+          }
+          mapInstance.value.setLayers([
+            layerInstances.value.satellite, 
+            ...getActiveOverlayLayers()
+          ])
+          break
+        case 'dark':
+          // 使用暗黑样式
+          mapInstance.value.setLayers([new window.AMap.TileLayer()])
+          mapInstance.value.setMapStyle('amap://styles/dark')
+          updateOverlayLayers() // 再次应用叠加图层
+          break
+        default:
+          // 使用标准样式
+          mapInstance.value.setLayers([new window.AMap.TileLayer()])
+          mapInstance.value.setMapStyle('amap://styles/normal')
+          updateOverlayLayers() // 再次应用叠加图层
+      }
+    }
+    
+    // 获取当前启用的图层（辅助函数）
+    const getActiveOverlayLayers = () => {
+      const layers = []
+      
+      if (!window.AMap) return layers
+      
+      if (overlayLayers.value.includes('buildings') && layerInstances.value.buildings) {
+        layers.push(layerInstances.value.buildings)
+      }
+      
+      if (overlayLayers.value.includes('traffic') && layerInstances.value.traffic) {
+        layers.push(layerInstances.value.traffic)
+      }
+      
+      if (overlayLayers.value.includes('terrain') && layerInstances.value.terrain) {
+        layers.push(layerInstances.value.terrain)
+      }
+      
+      return layers
+    }
+    
+>>>>>>> 999104f0d0174d3a3870682fb7163d95bc623970
     // 切换视图模式
     const changeViewMode = (mode) => {
       if (!mapInstance.value) return
       
       try {
+<<<<<<< HEAD
         // 设置视图模式 - 使用正确的API方法
         if (mode === '3D') {
           // 设置为3D视图
@@ -399,6 +472,21 @@ export default {
           mapInstance.value.setViewMode('2D');
           mapInstance.value.setPitch(0); // 平面视图
           console.log('已切换到2D视图模式');
+=======
+        // 设置视图模式
+        mapInstance.value.setViewMode(mode)
+        
+        // 根据模式设置俯仰角
+        if (mode === '3D') {
+          // 在设置3D模式后，添加一个短暂延迟再设置俯仰角，以确保模式切换完成
+          setTimeout(() => {
+            if (mapInstance.value) {
+              mapInstance.value.setPitch(45)  // 设置俯仰角(3D效果)
+            }
+          }, 100)
+        } else {
+          mapInstance.value.setPitch(0)  // 平面视图
+>>>>>>> 999104f0d0174d3a3870682fb7163d95bc623970
         }
         
         // 重新加载建筑层以确保它在视图模式变化后正常显示
@@ -406,7 +494,11 @@ export default {
           if (layerInstances.value.buildings) {
             mapInstance.value.remove(layerInstances.value.buildings)
           }
+<<<<<<< HEAD
           layerInstances.value.buildings = new window.AMap.Buildings({
+=======
+          layerInstances.value.buildings = new window.AMap.BuildingLayer({
+>>>>>>> 999104f0d0174d3a3870682fb7163d95bc623970
             zIndex: 10,
             // 在3D模式下加强建筑物外观
             heightFactor: mode === '3D' ? 1 : 0.6
@@ -418,6 +510,11 @@ export default {
         if (currentMapStyle.value === 'satellite') {
           changeMapStyle('satellite')
         }
+<<<<<<< HEAD
+=======
+        
+        console.log(`已切换到${mode}视图模式`)
+>>>>>>> 999104f0d0174d3a3870682fb7163d95bc623970
       } catch (error) {
         console.error('切换视图模式失败:', error)
         ElMessage.error(`切换到${mode}视图失败: ${error.message}`)
@@ -428,6 +525,7 @@ export default {
     const updateOverlayLayers = () => {
       if (!mapInstance.value || !window.AMap) return
       
+<<<<<<< HEAD
       try {
         console.log('更新图层状态:', overlayLayers.value)
         
@@ -618,6 +716,102 @@ export default {
       return '<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="#64B5F6"><circle cx="12" cy="12" r="10" fill-opacity="0.7"/><text x="12" y="16" text-anchor="middle" fill="white" font-size="10">天气</text></svg>'
     }
 
+=======
+      // 交通流量图层
+      if (overlayLayers.value.includes('traffic')) {
+        if (!layerInstances.value.traffic) {
+          layerInstances.value.traffic = new window.AMap.TileLayer.Traffic()
+          mapInstance.value.add(layerInstances.value.traffic)
+        } else if (!mapInstance.value.getLayers().includes(layerInstances.value.traffic)) {
+          mapInstance.value.add(layerInstances.value.traffic)
+        }
+      } else if (layerInstances.value.traffic) {
+        mapInstance.value.remove(layerInstances.value.traffic)
+      }
+      
+      // 建筑物图层
+      if (overlayLayers.value.includes('buildings')) {
+        if (!layerInstances.value.buildings) {
+          layerInstances.value.buildings = new window.AMap.BuildingLayer()
+          mapInstance.value.add(layerInstances.value.buildings)
+        } else if (!mapInstance.value.getLayers().includes(layerInstances.value.buildings)) {
+          mapInstance.value.add(layerInstances.value.buildings)
+        }
+      } else if (layerInstances.value.buildings) {
+        mapInstance.value.remove(layerInstances.value.buildings)
+      }
+      
+      // 地形等高线图层
+      if (overlayLayers.value.includes('terrain')) {
+        if (!layerInstances.value.terrain) {
+          // 创建地形图层
+          layerInstances.value.terrain = new window.AMap.TileLayer({
+            zIndex: 10,
+            getTileUrl: function(x, y, z) {
+              // 使用高德的地形瓦片服务
+              return 'https://webst0' + (x % 4 + 1) + '.is.autonavi.com/appmaptile?style=6&x=' + x + '&y=' + y + '&z=' + z;
+            }
+          });
+          mapInstance.value.add(layerInstances.value.terrain)
+        } else if (!mapInstance.value.getLayers().includes(layerInstances.value.terrain)) {
+          mapInstance.value.add(layerInstances.value.terrain)
+        }
+      } else if (layerInstances.value.terrain) {
+        mapInstance.value.remove(layerInstances.value.terrain)
+      }
+      
+      // 天气信息图层
+      if (overlayLayers.value.includes('weather')) {
+        // 天气图层是一个动态图层，需要使用第三方服务或自定义实现
+        // 这里使用一个模拟的天气图层进行演示
+        if (!layerInstances.value.weather) {
+          try {
+            // 创建自定义天气图层 - 这里使用彩云天气API的实例
+            const weatherLayer = new window.AMap.TileLayer({
+              zIndex: 12,
+              opacity: 0.6,
+              getTileUrl: function(x, y, z) {
+                // 这是一个示例URL，实际使用需要替换为有效的天气服务API
+                return `https://api.caiyunapp.com/v1/weatherMap/radar/${z}/${x}/${y}.png`;
+              }
+            });
+            
+            layerInstances.value.weather = weatherLayer;
+            
+            // 添加一个天气信息标记，作为示范
+            const weatherInfo = new window.AMap.Marker({
+              position: mapInstance.value.getCenter(),
+              content: `<div class="weather-info" style="padding: 5px 10px; background: rgba(255,255,255,0.8); border-radius: 4px;">
+                          <div>气温: 26°C</div>
+                          <div>天气: 晴</div>
+                          <div>风力: 3级</div>
+                        </div>`,
+              offset: new window.AMap.Pixel(-60, -40)
+            });
+            
+            layerInstances.value.weatherInfo = weatherInfo;
+            mapInstance.value.add([weatherLayer, weatherInfo]);
+          } catch (error) {
+            console.error('天气图层创建失败:', error);
+            ElMessage.warning('天气信息图层加载失败，请稍后再试');
+          }
+        } else if (!mapInstance.value.getLayers().includes(layerInstances.value.weather)) {
+          if (layerInstances.value.weatherInfo) {
+            mapInstance.value.add([layerInstances.value.weather, layerInstances.value.weatherInfo]);
+          } else {
+            mapInstance.value.add(layerInstances.value.weather);
+          }
+        }
+      } else if (layerInstances.value.weather) {
+        if (layerInstances.value.weatherInfo) {
+          mapInstance.value.remove([layerInstances.value.weather, layerInstances.value.weatherInfo]);
+        } else {
+          mapInstance.value.remove(layerInstances.value.weather);
+        }
+      }
+    }
+    
+>>>>>>> 999104f0d0174d3a3870682fb7163d95bc623970
     // 提供地图实例给子组件
     provide('mapInstance', mapInstance)