feat: 地图居中点调整

罗广辉

2025-04-03 7635213630830c4cbb9ff6ada69ba9b5c8a35d42

feat: 地图居中点调整

 src/views/Home/useMapAggregation/useMapAggregation.js

@@ -50,7 +50,7 @@

  // 确定缩放比例
  const determineScaling = () => {
    console.log('确定缩放比例');
    // console.log('确定缩放比例');
    if (!viewer) return;
    let height = viewer.camera.positionCartographic.height;
    // 根据高度展示对应的 gJson
@@ -61,9 +61,9 @@
        active = item.name;
        removeEntities();
        removeLabel();
        renderOutline(item);
        if (!item.gJson && !item.splashedList?.length) return;
        item.gJson ? aggregation(item) : splashed(item);
        renderOutline(item);
        break;
      }
    }
@@ -169,14 +169,10 @@
    scalingJudgment[0].gJson = null;
    scalingJudgment[0].splashedList = splashedList;
    active = null;
    // 轮廓
    const outlineGJson = await getOutLine(jsonPathPre, hierarchy);
    scalingJudgment.forEach(item => item.show && (item.outline = outlineGJson));
    // 省
    if (hierarchy.length === 1) {
      const gJson1 = await getFiler(`${defaultDir}${jsonPath}/indexDistrict.json`);
      const gJson2 = await getFiler(`${defaultDir}${jsonPath}/index.json`);

      scalingJudgment[1].gJson = {
        ...gJson1,
        features: gJson1.features.map(item => {
@@ -184,10 +180,7 @@
          return { ...item, data: {...findData,type: type + 'Aggregation'} }
        }),
      };
      console.log(injectData(gJson2, list));
      scalingJudgment[2].gJson = injectData(gJson2, list);
      const { lng, lat } = getCenterPoint(gJson2.features.map(item => item.properties.center));
      flyTo({ longitude: lng, latitude: lat }, 0, scalingJudgment[2].height);
    }
    // 市
    if (hierarchy.length === 2) {
@@ -195,8 +188,6 @@
      scalingJudgment[2].show = false;
      const gJson1 = await getFiler(`${defaultDir}${jsonPath}/index.json`);
      scalingJudgment[1].gJson = injectData(gJson1, list);
      const center = getCenterPoint(gJson1.features.map(item => item.properties.center));
      flyTo({ longitude: center.lng, latitude: center.lat }, 0, scalingJudgment[1].height);
    }
    // 区县
    if (hierarchy.length === 3) {
@@ -204,11 +195,12 @@
      scalingJudgment[1].show = false;
      scalingJudgment[2].gJson = null;
      scalingJudgment[2].show = false;
      const outlineGJson = await getOutLine(jsonPathPre, hierarchy);
      const center = outlineGJson.features[0].properties.center;
      flyTo({ longitude: center[0], latitude: center[1] }, 0, scalingJudgment[0].height);
    }
    determineScaling()
    // 轮廓
    const outlineGJson = await getOutLine(jsonPathPre, hierarchy);
    scalingJudgment.forEach(item => item.show && (item.outline = outlineGJson));
    const [longitude,latitude] = outlineGJson.features[0].properties.centroid
    flyTo({ longitude, latitude }, 0, scalingJudgment[(hierarchy.length-3) * (-1)].height);
  };

  watch(
@@ -287,7 +279,7 @@
      // const {lng,lat} = getCenterPoint(item1.geometry.coordinates[0][0])
      return {
        name: item1.properties.name,
        position: item1.properties.center,
        position: item1.properties.centroid,
        data: item1.data,
        id: item1.region_code,
      }

 src/views/SignMachineNest/components/MachineRight/MachineStatus.vue

@@ -66,7 +66,7 @@
      </div>
    </div>
  </div>
  <!-- <MachineTableDetails :dialogVisible="isShowDetails" /> -->
   <MachineTableDetails v-model:show="isShowDetails"/>
</template>

<script setup>
@@ -75,6 +75,7 @@
import { EModeCode, EDockModeText, EModeText } from '@/utils/staticData/device';
import { getLnglatAltitude } from '@/utils/cesium/mapUtil.js';
import { useStore } from 'vuex';
import MachineTableDetails from '@/views/SignMachineNest/components/MachineRight/components/MachineTableDetails.vue';

const store = useStore();
// 获取机巢信息
@@ -269,7 +270,7 @@
    );
    opacity: 0.85;
    margin: 2px 0 13 0;
    

    padding: 8px 0px 20px 18px;
    .info {
      display: flex;
@@ -323,16 +324,16 @@
            color: #FFB26A;
            margin-right: 10px;
          }
          .wb {    
          .wb {
            width: 60px;
            height: 20px;       
            height: 20px;
            background: rgba(255,106,106,0.2);
            border-radius: 4px 4px 4px 4px;
            border: 1px solid #FF6A6A;
            color: #FF6A6A;
          }
        }
      

      }
    }
    .status {
@@ -341,7 +342,7 @@
      gap: 10px 20px;
      margin-top: 18px;
      .card {
        width: calc(33.33% - 14px); 
        width: calc(33.33% - 14px);
      }
      img {
        width: 16px;
@@ -370,4 +371,4 @@
      }
    }
 }
</style>
</style>

 src/views/SignMachineNest/components/MachineRight/components/MachineTableDetails.vue

@@ -4,7 +4,7 @@

  </div>
  <el-dialog
    v-model="props.dialogVisible"
    v-model="isShowDetails"
    title="机巢详情"
    width="800px"
    :close-on-click-modal="false"
@@ -27,6 +27,8 @@
  },
});

const isShowDetails = defineModel('show')

// const dialogVisible = ref(false);
const tableData = ref([
  {