diff --git a/src/views/sponeScreen/chengguanweiScreen/index.vue b/src/views/sponeScreen/chengguanweiScreen/index.vue
index 2b01d57..4436d78 100644
--- a/src/views/sponeScreen/chengguanweiScreen/index.vue
+++ b/src/views/sponeScreen/chengguanweiScreen/index.vue
@@ -6,12 +6,14 @@
     <el-button type="primary" @click="zxt">跳转子系统</el-button>
     <!-- 地图 -->
     <!-- <GisMapMF></GisMapMF> -->
+    <legend></legend>
   </div>
 </template>
 
 <script setup>
 import bus from '@/bus';
-import GisMapMF from '@/views/sponeScreen/gisMF/map.vue';
+import GisMapMF from '@/views/sponeScreen/gisMF/cesiumMap.vue';
+import legend from '@/views/sponeScreen/gisMF/legend.vue';
 const router = useRouter();
 function zxt() {
   router.push({ path: '/index' });

diff --git a/src/views/sponeScreen/chengguanweiScreen/index.vue b/src/views/sponeScreen/chengguanweiScreen/index.vue
index 2b01d57..4436d78 100644
--- a/src/views/sponeScreen/chengguanweiScreen/index.vue
+++ b/src/views/sponeScreen/chengguanweiScreen/index.vue
@@ -6,12 +6,14 @@
     <el-button type="primary" @click="zxt">跳转子系统</el-button>
     <!-- 地图 -->
     <!-- <GisMapMF></GisMapMF> -->
+    <legend></legend>
   </div>
 </template>
 
 <script setup>
 import bus from '@/bus';
-import GisMapMF from '@/views/sponeScreen/gisMF/map.vue';
+import GisMapMF from '@/views/sponeScreen/gisMF/cesiumMap.vue';
+import legend from '@/views/sponeScreen/gisMF/legend.vue';
 const router = useRouter();
 function zxt() {
   router.push({ path: '/index' });
diff --git a/src/views/sponeScreen/gisMF/cesiumMap.vue b/src/views/sponeScreen/gisMF/cesiumMap.vue
new file mode 100644
index 0000000..0c72c08
--- /dev/null
+++ b/src/views/sponeScreen/gisMF/cesiumMap.vue
@@ -0,0 +1,41 @@
+<template>
+  <!-- 海绵综合一张图地图cesium -->
+  <div class="mapContainerMF" id="mapContainerMF"></div>
+</template>
+
+<script setup>
+import blue_vector from './mapStyle.js';
+const { proxy } = getCurrentInstance();
+//创建地图实例
+const createIniteMap = () => {
+  window.newfiberMap = new NewFiberMap('mapContainerMF', {
+    terrain: false,
+    selectionIndicator: false, //单击是否出现绿色边框
+  });
+  var layer = new NewFiberMap.Layer.MVTImageryProvider({
+    style: blue_vector,
+    tileSize: 1024,
+  });
+  newfiberMap.getMap().scene.globe.baseColor = Cesium.Color.fromCssColorString(blue_vector.layers[0]['paint']['background-color']);
+  newfiberMap.getMap().imageryLayers.addImageryProvider(layer);
+  // //设置视窗位置
+  newfiberMap.setView({
+    lng: 114.312,
+    lat: 34.702,
+    heading: 2.281299097855777,
+    zoom: 5358.12942752382,
+    pitch: -25.2508969308367,
+    roll: 0.005453465256790101,
+  });
+};
+onMounted(() => {
+  createIniteMap();
+});
+</script>
+
+<style lang="scss" scoped>
+.mapContainerMF {
+  width: 100%;
+  height: 100%;
+}
+</style>

diff --git a/src/views/sponeScreen/chengguanweiScreen/index.vue b/src/views/sponeScreen/chengguanweiScreen/index.vue
index 2b01d57..4436d78 100644
--- a/src/views/sponeScreen/chengguanweiScreen/index.vue
+++ b/src/views/sponeScreen/chengguanweiScreen/index.vue
@@ -6,12 +6,14 @@
     <el-button type="primary" @click="zxt">跳转子系统</el-button>
     <!-- 地图 -->
     <!-- <GisMapMF></GisMapMF> -->
+    <legend></legend>
   </div>
 </template>
 
 <script setup>
 import bus from '@/bus';
-import GisMapMF from '@/views/sponeScreen/gisMF/map.vue';
+import GisMapMF from '@/views/sponeScreen/gisMF/cesiumMap.vue';
+import legend from '@/views/sponeScreen/gisMF/legend.vue';
 const router = useRouter();
 function zxt() {
   router.push({ path: '/index' });
diff --git a/src/views/sponeScreen/gisMF/cesiumMap.vue b/src/views/sponeScreen/gisMF/cesiumMap.vue
new file mode 100644
index 0000000..0c72c08
--- /dev/null
+++ b/src/views/sponeScreen/gisMF/cesiumMap.vue
@@ -0,0 +1,41 @@
+<template>
+  <!-- 海绵综合一张图地图cesium -->
+  <div class="mapContainerMF" id="mapContainerMF"></div>
+</template>
+
+<script setup>
+import blue_vector from './mapStyle.js';
+const { proxy } = getCurrentInstance();
+//创建地图实例
+const createIniteMap = () => {
+  window.newfiberMap = new NewFiberMap('mapContainerMF', {
+    terrain: false,
+    selectionIndicator: false, //单击是否出现绿色边框
+  });
+  var layer = new NewFiberMap.Layer.MVTImageryProvider({
+    style: blue_vector,
+    tileSize: 1024,
+  });
+  newfiberMap.getMap().scene.globe.baseColor = Cesium.Color.fromCssColorString(blue_vector.layers[0]['paint']['background-color']);
+  newfiberMap.getMap().imageryLayers.addImageryProvider(layer);
+  // //设置视窗位置
+  newfiberMap.setView({
+    lng: 114.312,
+    lat: 34.702,
+    heading: 2.281299097855777,
+    zoom: 5358.12942752382,
+    pitch: -25.2508969308367,
+    roll: 0.005453465256790101,
+  });
+};
+onMounted(() => {
+  createIniteMap();
+});
+</script>
+
+<style lang="scss" scoped>
+.mapContainerMF {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/sponeScreen/gisMF/cesiumMapLegend.js b/src/views/sponeScreen/gisMF/cesiumMapLegend.js
new file mode 100644
index 0000000..2dabe8d
--- /dev/null
+++ b/src/views/sponeScreen/gisMF/cesiumMapLegend.js
@@ -0,0 +1,212 @@
+let cesiumMapLegend = [
+  {
+    title: '基础信息',
+    noAllCheck: true,
+    children: [
+      {
+        isCheck: false,
+        name: '影像图',
+        url: 'ysMap.png',
+        layername: 'imageTiler',
+        type: 'background',
+      },
+      {
+        isCheck: false,
+        name: '三维建筑',
+        url: 'rainAreas.png',
+        layername: 'kaifengBuilding',
+        type: 'background',
+      },
+    ],
+  },
+  {
+    title: '雨水系统',
+    isCheck: false,
+    children: [
+      {
+        isCheck: false,
+        name: '雨水分区',
+        layername: 'YSFQ1',
+        url: 'rainAreas.png', //图层+标注+json √
+        type: 'mapServer',
+      },
+      {
+        isCheck: false,
+        name: '排涝泵站',
+        layername: 'PLBZ',
+        url: 'waiPaiBengs.png', //图层+json √
+        mapUrl: 'waiPaiBeng.png',
+        type: 'point',
+        //data: PLBZ,
+      },
+      {
+        isCheck: false,
+        name: '雨水泵站',
+        layername: 'YSBZ',
+        url: 'paiLaoBengs.png', //图层+json √
+        mapUrl: 'paiLaoBeng.png',
+        type: 'point',
+        //data: YSBZ,
+        //data: ysBengZhan,
+      },
+      {
+        isCheck: false,
+        name: '雨水管网',
+        layername: 'ysLine1',
+        url: 'xiufu.png', //图层+json √
+        type: 'mapServer',
+      },
+      {
+        isCheck: false,
+        name: '管网流向',
+        layername: 'pipeline_info_flow_ys',
+        url: 'natureWaters1.png',
+        type: 'dynamicWater',
+      },
+      // {
+      //   isCheck: false,
+      //   name: '雨水排口',
+      //   layername: 'paiKou',
+      //   url: 'paiKous.png', //图层+json √
+      //   mapUrl: 'paiKou.png',
+      //   type: 'point',
+      //   data: RainPort,
+      // },
+    ],
+  },
+  {
+    title: '污水系统',
+    isCheck: false,
+    children: [
+      {
+        isCheck: false, //  √
+        name: '污水分区',
+        layername: 'WSFQ',
+        url: 'wsAreas.png',
+        type: 'mapServer',
+      },
+      {
+        isCheck: false,
+        name: '污水处理厂',
+        layername: 'WSCLC', //图层+json   √
+        url: 'WSCs.png',
+        mapUrl: 'WSC.png',
+        type: 'point',
+        //data: WSCLC,
+        //data: wuShuiChang,
+      },
+      {
+        isCheck: false,
+        name: '污水泵站', //图层+json   √
+        layername: 'WSBZ',
+        url: 'wsBengs.png',
+        mapUrl: 'wsBeng.png',
+        type: 'point',
+        //data: WSBZ,
+        //data: wsBengZhan,
+      },
+      {
+        isCheck: false,
+        name: '污水管网',
+        layername: 'wsLine1',
+        url: 'qingyu.png', //服务  √
+        type: 'mapServer',
+      },
+      {
+        isCheck: false,
+        name: '管网流向',
+        layername: 'pipeline_info_flow_ws1',
+        url: 'natureWaters.png',
+        type: 'dynamicWater',
+      },
+      // {
+      //   isCheck: false,
+      //   name: '溢流口',
+      //   layername: 'drainOutlet', //图层+json  √
+      //   url: 'DFHZ1.png',
+      //   mapUrl: 'DFHZ2.png',
+      //   type: 'point',
+      //   data: drainOutlet,
+      // },
+    ],
+  },
+  {
+    title: '感知监测',
+    isCheck: false,
+    children: [
+      {
+        isCheck: false,
+        name: '雨量站',
+        layername: 'rainStation', //图层+json  √
+        url: 'rains.png',
+        mapUrl: 'rain.png',
+        type: 'point',
+        //data: rainStation,
+      },
+      {
+        isCheck: false,
+        name: '河道水位',
+        layername: 'riverLake',
+        url: 'KDJZWMX s.png', //图层+json  √
+        mapUrl: 'KDJZWMX.png',
+        type: 'point',
+        //data: riverLake,
+      },
+      {
+        isCheck: false,
+        name: '河道水质',
+        layername: 'waterSectionInfo',
+        url: 'yuanTous.png', //图层+json  √
+        mapUrl: 'yuanTou.png',
+        type: 'point',
+        //data: waterSectionInfo,
+      },
+      {
+        isCheck: false,
+        name: '管网',
+        layername: 'pipeSupervise', //图层+json  √
+        url: 'rainSupervises.png',
+        mapUrl: 'rainSupervise.png',
+        type: 'point',
+        //data: pipeSupervise,
+      },
+      // {
+      //   isCheck: false,
+      //   name: '排口',
+      //   layername: 'PKsupervise',
+      //   url: 'YQGXMX s.png', //图层+json  √
+      //   mapUrl: 'YQGXMX.png',
+      //   type: 'point',
+      //   data: PKsupervise,
+      // },
+      {
+        isCheck: false,
+        name: '内涝积水点',
+        layername: 'waterlog',
+        url: 'yiLaos.png', //图层+json  √
+        mapUrl: 'yiLao.png',
+        type: 'point',
+        //data: waterlog,
+      },
+      {
+        isCheck: false,
+        name: '源头地块',
+        layername: 'orinign', //图层+json  √
+        url: 'orinigns.png',
+        mapUrl: 'orinign.png',
+        type: 'point',
+        //data: orinign,
+      },
+      // {
+      //   isCheck: false,
+      //   name: '河道水质',
+      //   layername: 'waterSectionInfo',
+      //   url: 'yuanTous.png', //图层+json  √
+      //   mapUrl: 'yuanTou.png',
+      //   type: 'point',
+      //   data: waterSectionInfo,
+      // },
+    ],
+  },
+];
+export default cesiumMapLegend;

diff --git a/src/views/sponeScreen/chengguanweiScreen/index.vue b/src/views/sponeScreen/chengguanweiScreen/index.vue
index 2b01d57..4436d78 100644
--- a/src/views/sponeScreen/chengguanweiScreen/index.vue
+++ b/src/views/sponeScreen/chengguanweiScreen/index.vue
@@ -6,12 +6,14 @@
     <el-button type="primary" @click="zxt">跳转子系统</el-button>
     <!-- 地图 -->
     <!-- <GisMapMF></GisMapMF> -->
+    <legend></legend>
   </div>
 </template>
 
 <script setup>
 import bus from '@/bus';
-import GisMapMF from '@/views/sponeScreen/gisMF/map.vue';
+import GisMapMF from '@/views/sponeScreen/gisMF/cesiumMap.vue';
+import legend from '@/views/sponeScreen/gisMF/legend.vue';
 const router = useRouter();
 function zxt() {
   router.push({ path: '/index' });
diff --git a/src/views/sponeScreen/gisMF/cesiumMap.vue b/src/views/sponeScreen/gisMF/cesiumMap.vue
new file mode 100644
index 0000000..0c72c08
--- /dev/null
+++ b/src/views/sponeScreen/gisMF/cesiumMap.vue
@@ -0,0 +1,41 @@
+<template>
+  <!-- 海绵综合一张图地图cesium -->
+  <div class="mapContainerMF" id="mapContainerMF"></div>
+</template>
+
+<script setup>
+import blue_vector from './mapStyle.js';
+const { proxy } = getCurrentInstance();
+//创建地图实例
+const createIniteMap = () => {
+  window.newfiberMap = new NewFiberMap('mapContainerMF', {
+    terrain: false,
+    selectionIndicator: false, //单击是否出现绿色边框
+  });
+  var layer = new NewFiberMap.Layer.MVTImageryProvider({
+    style: blue_vector,
+    tileSize: 1024,
+  });
+  newfiberMap.getMap().scene.globe.baseColor = Cesium.Color.fromCssColorString(blue_vector.layers[0]['paint']['background-color']);
+  newfiberMap.getMap().imageryLayers.addImageryProvider(layer);
+  // //设置视窗位置
+  newfiberMap.setView({
+    lng: 114.312,
+    lat: 34.702,
+    heading: 2.281299097855777,
+    zoom: 5358.12942752382,
+    pitch: -25.2508969308367,
+    roll: 0.005453465256790101,
+  });
+};
+onMounted(() => {
+  createIniteMap();
+});
+</script>
+
+<style lang="scss" scoped>
+.mapContainerMF {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/sponeScreen/gisMF/cesiumMapLegend.js b/src/views/sponeScreen/gisMF/cesiumMapLegend.js
new file mode 100644
index 0000000..2dabe8d
--- /dev/null
+++ b/src/views/sponeScreen/gisMF/cesiumMapLegend.js
@@ -0,0 +1,212 @@
+let cesiumMapLegend = [
+  {
+    title: '基础信息',
+    noAllCheck: true,
+    children: [
+      {
+        isCheck: false,
+        name: '影像图',
+        url: 'ysMap.png',
+        layername: 'imageTiler',
+        type: 'background',
+      },
+      {
+        isCheck: false,
+        name: '三维建筑',
+        url: 'rainAreas.png',
+        layername: 'kaifengBuilding',
+        type: 'background',
+      },
+    ],
+  },
+  {
+    title: '雨水系统',
+    isCheck: false,
+    children: [
+      {
+        isCheck: false,
+        name: '雨水分区',
+        layername: 'YSFQ1',
+        url: 'rainAreas.png', //图层+标注+json √
+        type: 'mapServer',
+      },
+      {
+        isCheck: false,
+        name: '排涝泵站',
+        layername: 'PLBZ',
+        url: 'waiPaiBengs.png', //图层+json √
+        mapUrl: 'waiPaiBeng.png',
+        type: 'point',
+        //data: PLBZ,
+      },
+      {
+        isCheck: false,
+        name: '雨水泵站',
+        layername: 'YSBZ',
+        url: 'paiLaoBengs.png', //图层+json √
+        mapUrl: 'paiLaoBeng.png',
+        type: 'point',
+        //data: YSBZ,
+        //data: ysBengZhan,
+      },
+      {
+        isCheck: false,
+        name: '雨水管网',
+        layername: 'ysLine1',
+        url: 'xiufu.png', //图层+json √
+        type: 'mapServer',
+      },
+      {
+        isCheck: false,
+        name: '管网流向',
+        layername: 'pipeline_info_flow_ys',
+        url: 'natureWaters1.png',
+        type: 'dynamicWater',
+      },
+      // {
+      //   isCheck: false,
+      //   name: '雨水排口',
+      //   layername: 'paiKou',
+      //   url: 'paiKous.png', //图层+json √
+      //   mapUrl: 'paiKou.png',
+      //   type: 'point',
+      //   data: RainPort,
+      // },
+    ],
+  },
+  {
+    title: '污水系统',
+    isCheck: false,
+    children: [
+      {
+        isCheck: false, //  √
+        name: '污水分区',
+        layername: 'WSFQ',
+        url: 'wsAreas.png',
+        type: 'mapServer',
+      },
+      {
+        isCheck: false,
+        name: '污水处理厂',
+        layername: 'WSCLC', //图层+json   √
+        url: 'WSCs.png',
+        mapUrl: 'WSC.png',
+        type: 'point',
+        //data: WSCLC,
+        //data: wuShuiChang,
+      },
+      {
+        isCheck: false,
+        name: '污水泵站', //图层+json   √
+        layername: 'WSBZ',
+        url: 'wsBengs.png',
+        mapUrl: 'wsBeng.png',
+        type: 'point',
+        //data: WSBZ,
+        //data: wsBengZhan,
+      },
+      {
+        isCheck: false,
+        name: '污水管网',
+        layername: 'wsLine1',
+        url: 'qingyu.png', //服务  √
+        type: 'mapServer',
+      },
+      {
+        isCheck: false,
+        name: '管网流向',
+        layername: 'pipeline_info_flow_ws1',
+        url: 'natureWaters.png',
+        type: 'dynamicWater',
+      },
+      // {
+      //   isCheck: false,
+      //   name: '溢流口',
+      //   layername: 'drainOutlet', //图层+json  √
+      //   url: 'DFHZ1.png',
+      //   mapUrl: 'DFHZ2.png',
+      //   type: 'point',
+      //   data: drainOutlet,
+      // },
+    ],
+  },
+  {
+    title: '感知监测',
+    isCheck: false,
+    children: [
+      {
+        isCheck: false,
+        name: '雨量站',
+        layername: 'rainStation', //图层+json  √
+        url: 'rains.png',
+        mapUrl: 'rain.png',
+        type: 'point',
+        //data: rainStation,
+      },
+      {
+        isCheck: false,
+        name: '河道水位',
+        layername: 'riverLake',
+        url: 'KDJZWMX s.png', //图层+json  √
+        mapUrl: 'KDJZWMX.png',
+        type: 'point',
+        //data: riverLake,
+      },
+      {
+        isCheck: false,
+        name: '河道水质',
+        layername: 'waterSectionInfo',
+        url: 'yuanTous.png', //图层+json  √
+        mapUrl: 'yuanTou.png',
+        type: 'point',
+        //data: waterSectionInfo,
+      },
+      {
+        isCheck: false,
+        name: '管网',
+        layername: 'pipeSupervise', //图层+json  √
+        url: 'rainSupervises.png',
+        mapUrl: 'rainSupervise.png',
+        type: 'point',
+        //data: pipeSupervise,
+      },
+      // {
+      //   isCheck: false,
+      //   name: '排口',
+      //   layername: 'PKsupervise',
+      //   url: 'YQGXMX s.png', //图层+json  √
+      //   mapUrl: 'YQGXMX.png',
+      //   type: 'point',
+      //   data: PKsupervise,
+      // },
+      {
+        isCheck: false,
+        name: '内涝积水点',
+        layername: 'waterlog',
+        url: 'yiLaos.png', //图层+json  √
+        mapUrl: 'yiLao.png',
+        type: 'point',
+        //data: waterlog,
+      },
+      {
+        isCheck: false,
+        name: '源头地块',
+        layername: 'orinign', //图层+json  √
+        url: 'orinigns.png',
+        mapUrl: 'orinign.png',
+        type: 'point',
+        //data: orinign,
+      },
+      // {
+      //   isCheck: false,
+      //   name: '河道水质',
+      //   layername: 'waterSectionInfo',
+      //   url: 'yuanTous.png', //图层+json  √
+      //   mapUrl: 'yuanTou.png',
+      //   type: 'point',
+      //   data: waterSectionInfo,
+      // },
+    ],
+  },
+];
+export default cesiumMapLegend;
diff --git a/src/views/sponeScreen/gisMF/legend.vue b/src/views/sponeScreen/gisMF/legend.vue
index e69de29..c65cd3e 100644
--- a/src/views/sponeScreen/gisMF/legend.vue
+++ b/src/views/sponeScreen/gisMF/legend.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="lengendPage">
+    <!-- 展开收起 -->
+    <div :class="['zksqImg', 'animate__animated', ifExpand ? 'animate__fadeInLeft' : 'goLeft']" title="展开收起" @click="changeZhan"></div>
+    <!-- 图例框 -->
+    <div :class="['publicLegend', 'animate__animated', ifExpand ? 'animate__fadeInLeft' : 'animate__fadeOutLeft']">
+      <div v-for="item in legendList" :key="item.layername">
+        <div class="titleB" @click="changeAllLegend(item)">
+          {{ item.title }}
+          <div class="iconImg">
+            <el-icon v-if="item.isCheck" size="22">
+              <Check />
+            </el-icon>
+          </div>
+        </div>
+        <div class="part" v-for="item2 in item.children" @click="changeLegend(item2)" :key="item2.layername">
+          <img :src="getImageUrl(item2.url, 'newImgs/layerIcon')" class="img" />
+          <p class="title">{{ item2.name }}</p>
+          <div class="iconImg">
+            <el-icon v-if="item2.isCheck" size="22">
+              <Check />
+            </el-icon>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { getImageUrl } from '@/utils/ruoyi';
+import cesiumMapLegend from './cesiumMapLegend.js';
+const { proxy } = getCurrentInstance();
+const legendList = ref([]);
+const ifExpand = ref(true);
+// 展开收起
+const changeZhan = () => {
+  ifExpand.value = !ifExpand.value;
+};
+
+onMounted(() => {
+  console.log('1111111111');
+  legendList.value = cesiumMapLegend;
+  console.log('legendList.value---', legendList.value);
+});
+</script>
+
+<style lang="scss">
+.lengendPage {
+  .zksqImg {
+    width: 13px;
+    height: 130px;
+    background: url('@/assets/newImgs/down.png');
+    background-size: 100% 100%;
+    border-radius: 10px 10px 0px 0px;
+    position: absolute;
+    top: 40%;
+    left: 243px;
+    z-index: 115;
+    cursor: pointer;
+  }
+  .goLeft {
+    left: 2px;
+  }
+  .publicLegend {
+    background: #00314e;
+    border: 1px solid #094065;
+    box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.68);
+    opacity: 0.7;
+    border-radius: 10px;
+    position: absolute;
+    top: 10%;
+    left: 5px;
+    z-index: 110;
+    height: 750px;
+    width: 240px;
+    overflow: auto;
+    .titleB {
+      display: flex;
+      height: 35px;
+      line-height: 35px;
+      background: #094065;
+      font-size: 16px;
+      padding-left: 10px;
+      .iconImg {
+        margin-left: 125px;
+        margin-top: 5px;
+        height: 20px;
+        .el-icon {
+          font-weight: bold;
+          &.active {
+            color: #00ee6f;
+          }
+        }
+      }
+    }
+    .part {
+      display: flex;
+      height: 40px;
+      align-items: center;
+      cursor: pointer;
+      &:hover {
+        background: #08596a;
+      }
+      .img {
+        width: 12px;
+        height: 12px;
+        margin-left: 15px;
+        margin-right: 5px;
+      }
+      .title {
+        margin-left: 5px;
+        font-size: 14px;
+        height: 30px;
+        line-height: 30px;
+        width: 155px;
+      }
+      .iconImg {
+        width: 20px;
+        height: 20px;
+        .el-icon {
+          font-weight: bold;
+          &.active {
+            color: #00ee6f;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

diff --git a/src/views/sponeScreen/chengguanweiScreen/index.vue b/src/views/sponeScreen/chengguanweiScreen/index.vue
index 2b01d57..4436d78 100644
--- a/src/views/sponeScreen/chengguanweiScreen/index.vue
+++ b/src/views/sponeScreen/chengguanweiScreen/index.vue
@@ -6,12 +6,14 @@
     <el-button type="primary" @click="zxt">跳转子系统</el-button>
     <!-- 地图 -->
     <!-- <GisMapMF></GisMapMF> -->
+    <legend></legend>
   </div>
 </template>
 
 <script setup>
 import bus from '@/bus';
-import GisMapMF from '@/views/sponeScreen/gisMF/map.vue';
+import GisMapMF from '@/views/sponeScreen/gisMF/cesiumMap.vue';
+import legend from '@/views/sponeScreen/gisMF/legend.vue';
 const router = useRouter();
 function zxt() {
   router.push({ path: '/index' });
diff --git a/src/views/sponeScreen/gisMF/cesiumMap.vue b/src/views/sponeScreen/gisMF/cesiumMap.vue
new file mode 100644
index 0000000..0c72c08
--- /dev/null
+++ b/src/views/sponeScreen/gisMF/cesiumMap.vue
@@ -0,0 +1,41 @@
+<template>
+  <!-- 海绵综合一张图地图cesium -->
+  <div class="mapContainerMF" id="mapContainerMF"></div>
+</template>
+
+<script setup>
+import blue_vector from './mapStyle.js';
+const { proxy } = getCurrentInstance();
+//创建地图实例
+const createIniteMap = () => {
+  window.newfiberMap = new NewFiberMap('mapContainerMF', {
+    terrain: false,
+    selectionIndicator: false, //单击是否出现绿色边框
+  });
+  var layer = new NewFiberMap.Layer.MVTImageryProvider({
+    style: blue_vector,
+    tileSize: 1024,
+  });
+  newfiberMap.getMap().scene.globe.baseColor = Cesium.Color.fromCssColorString(blue_vector.layers[0]['paint']['background-color']);
+  newfiberMap.getMap().imageryLayers.addImageryProvider(layer);
+  // //设置视窗位置
+  newfiberMap.setView({
+    lng: 114.312,
+    lat: 34.702,
+    heading: 2.281299097855777,
+    zoom: 5358.12942752382,
+    pitch: -25.2508969308367,
+    roll: 0.005453465256790101,
+  });
+};
+onMounted(() => {
+  createIniteMap();
+});
+</script>
+
+<style lang="scss" scoped>
+.mapContainerMF {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/views/sponeScreen/gisMF/cesiumMapLegend.js b/src/views/sponeScreen/gisMF/cesiumMapLegend.js
new file mode 100644
index 0000000..2dabe8d
--- /dev/null
+++ b/src/views/sponeScreen/gisMF/cesiumMapLegend.js
@@ -0,0 +1,212 @@
+let cesiumMapLegend = [
+  {
+    title: '基础信息',
+    noAllCheck: true,
+    children: [
+      {
+        isCheck: false,
+        name: '影像图',
+        url: 'ysMap.png',
+        layername: 'imageTiler',
+        type: 'background',
+      },
+      {
+        isCheck: false,
+        name: '三维建筑',
+        url: 'rainAreas.png',
+        layername: 'kaifengBuilding',
+        type: 'background',
+      },
+    ],
+  },
+  {
+    title: '雨水系统',
+    isCheck: false,
+    children: [
+      {
+        isCheck: false,
+        name: '雨水分区',
+        layername: 'YSFQ1',
+        url: 'rainAreas.png', //图层+标注+json √
+        type: 'mapServer',
+      },
+      {
+        isCheck: false,
+        name: '排涝泵站',
+        layername: 'PLBZ',
+        url: 'waiPaiBengs.png', //图层+json √
+        mapUrl: 'waiPaiBeng.png',
+        type: 'point',
+        //data: PLBZ,
+      },
+      {
+        isCheck: false,
+        name: '雨水泵站',
+        layername: 'YSBZ',
+        url: 'paiLaoBengs.png', //图层+json √
+        mapUrl: 'paiLaoBeng.png',
+        type: 'point',
+        //data: YSBZ,
+        //data: ysBengZhan,
+      },
+      {
+        isCheck: false,
+        name: '雨水管网',
+        layername: 'ysLine1',
+        url: 'xiufu.png', //图层+json √
+        type: 'mapServer',
+      },
+      {
+        isCheck: false,
+        name: '管网流向',
+        layername: 'pipeline_info_flow_ys',
+        url: 'natureWaters1.png',
+        type: 'dynamicWater',
+      },
+      // {
+      //   isCheck: false,
+      //   name: '雨水排口',
+      //   layername: 'paiKou',
+      //   url: 'paiKous.png', //图层+json √
+      //   mapUrl: 'paiKou.png',
+      //   type: 'point',
+      //   data: RainPort,
+      // },
+    ],
+  },
+  {
+    title: '污水系统',
+    isCheck: false,
+    children: [
+      {
+        isCheck: false, //  √
+        name: '污水分区',
+        layername: 'WSFQ',
+        url: 'wsAreas.png',
+        type: 'mapServer',
+      },
+      {
+        isCheck: false,
+        name: '污水处理厂',
+        layername: 'WSCLC', //图层+json   √
+        url: 'WSCs.png',
+        mapUrl: 'WSC.png',
+        type: 'point',
+        //data: WSCLC,
+        //data: wuShuiChang,
+      },
+      {
+        isCheck: false,
+        name: '污水泵站', //图层+json   √
+        layername: 'WSBZ',
+        url: 'wsBengs.png',
+        mapUrl: 'wsBeng.png',
+        type: 'point',
+        //data: WSBZ,
+        //data: wsBengZhan,
+      },
+      {
+        isCheck: false,
+        name: '污水管网',
+        layername: 'wsLine1',
+        url: 'qingyu.png', //服务  √
+        type: 'mapServer',
+      },
+      {
+        isCheck: false,
+        name: '管网流向',
+        layername: 'pipeline_info_flow_ws1',
+        url: 'natureWaters.png',
+        type: 'dynamicWater',
+      },
+      // {
+      //   isCheck: false,
+      //   name: '溢流口',
+      //   layername: 'drainOutlet', //图层+json  √
+      //   url: 'DFHZ1.png',
+      //   mapUrl: 'DFHZ2.png',
+      //   type: 'point',
+      //   data: drainOutlet,
+      // },
+    ],
+  },
+  {
+    title: '感知监测',
+    isCheck: false,
+    children: [
+      {
+        isCheck: false,
+        name: '雨量站',
+        layername: 'rainStation', //图层+json  √
+        url: 'rains.png',
+        mapUrl: 'rain.png',
+        type: 'point',
+        //data: rainStation,
+      },
+      {
+        isCheck: false,
+        name: '河道水位',
+        layername: 'riverLake',
+        url: 'KDJZWMX s.png', //图层+json  √
+        mapUrl: 'KDJZWMX.png',
+        type: 'point',
+        //data: riverLake,
+      },
+      {
+        isCheck: false,
+        name: '河道水质',
+        layername: 'waterSectionInfo',
+        url: 'yuanTous.png', //图层+json  √
+        mapUrl: 'yuanTou.png',
+        type: 'point',
+        //data: waterSectionInfo,
+      },
+      {
+        isCheck: false,
+        name: '管网',
+        layername: 'pipeSupervise', //图层+json  √
+        url: 'rainSupervises.png',
+        mapUrl: 'rainSupervise.png',
+        type: 'point',
+        //data: pipeSupervise,
+      },
+      // {
+      //   isCheck: false,
+      //   name: '排口',
+      //   layername: 'PKsupervise',
+      //   url: 'YQGXMX s.png', //图层+json  √
+      //   mapUrl: 'YQGXMX.png',
+      //   type: 'point',
+      //   data: PKsupervise,
+      // },
+      {
+        isCheck: false,
+        name: '内涝积水点',
+        layername: 'waterlog',
+        url: 'yiLaos.png', //图层+json  √
+        mapUrl: 'yiLao.png',
+        type: 'point',
+        //data: waterlog,
+      },
+      {
+        isCheck: false,
+        name: '源头地块',
+        layername: 'orinign', //图层+json  √
+        url: 'orinigns.png',
+        mapUrl: 'orinign.png',
+        type: 'point',
+        //data: orinign,
+      },
+      // {
+      //   isCheck: false,
+      //   name: '河道水质',
+      //   layername: 'waterSectionInfo',
+      //   url: 'yuanTous.png', //图层+json  √
+      //   mapUrl: 'yuanTou.png',
+      //   type: 'point',
+      //   data: waterSectionInfo,
+      // },
+    ],
+  },
+];
+export default cesiumMapLegend;
diff --git a/src/views/sponeScreen/gisMF/legend.vue b/src/views/sponeScreen/gisMF/legend.vue
index e69de29..c65cd3e 100644
--- a/src/views/sponeScreen/gisMF/legend.vue
+++ b/src/views/sponeScreen/gisMF/legend.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="lengendPage">
+    <!-- 展开收起 -->
+    <div :class="['zksqImg', 'animate__animated', ifExpand ? 'animate__fadeInLeft' : 'goLeft']" title="展开收起" @click="changeZhan"></div>
+    <!-- 图例框 -->
+    <div :class="['publicLegend', 'animate__animated', ifExpand ? 'animate__fadeInLeft' : 'animate__fadeOutLeft']">
+      <div v-for="item in legendList" :key="item.layername">
+        <div class="titleB" @click="changeAllLegend(item)">
+          {{ item.title }}
+          <div class="iconImg">
+            <el-icon v-if="item.isCheck" size="22">
+              <Check />
+            </el-icon>
+          </div>
+        </div>
+        <div class="part" v-for="item2 in item.children" @click="changeLegend(item2)" :key="item2.layername">
+          <img :src="getImageUrl(item2.url, 'newImgs/layerIcon')" class="img" />
+          <p class="title">{{ item2.name }}</p>
+          <div class="iconImg">
+            <el-icon v-if="item2.isCheck" size="22">
+              <Check />
+            </el-icon>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { getImageUrl } from '@/utils/ruoyi';
+import cesiumMapLegend from './cesiumMapLegend.js';
+const { proxy } = getCurrentInstance();
+const legendList = ref([]);
+const ifExpand = ref(true);
+// 展开收起
+const changeZhan = () => {
+  ifExpand.value = !ifExpand.value;
+};
+
+onMounted(() => {
+  console.log('1111111111');
+  legendList.value = cesiumMapLegend;
+  console.log('legendList.value---', legendList.value);
+});
+</script>
+
+<style lang="scss">
+.lengendPage {
+  .zksqImg {
+    width: 13px;
+    height: 130px;
+    background: url('@/assets/newImgs/down.png');
+    background-size: 100% 100%;
+    border-radius: 10px 10px 0px 0px;
+    position: absolute;
+    top: 40%;
+    left: 243px;
+    z-index: 115;
+    cursor: pointer;
+  }
+  .goLeft {
+    left: 2px;
+  }
+  .publicLegend {
+    background: #00314e;
+    border: 1px solid #094065;
+    box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.68);
+    opacity: 0.7;
+    border-radius: 10px;
+    position: absolute;
+    top: 10%;
+    left: 5px;
+    z-index: 110;
+    height: 750px;
+    width: 240px;
+    overflow: auto;
+    .titleB {
+      display: flex;
+      height: 35px;
+      line-height: 35px;
+      background: #094065;
+      font-size: 16px;
+      padding-left: 10px;
+      .iconImg {
+        margin-left: 125px;
+        margin-top: 5px;
+        height: 20px;
+        .el-icon {
+          font-weight: bold;
+          &.active {
+            color: #00ee6f;
+          }
+        }
+      }
+    }
+    .part {
+      display: flex;
+      height: 40px;
+      align-items: center;
+      cursor: pointer;
+      &:hover {
+        background: #08596a;
+      }
+      .img {
+        width: 12px;
+        height: 12px;
+        margin-left: 15px;
+        margin-right: 5px;
+      }
+      .title {
+        margin-left: 5px;
+        font-size: 14px;
+        height: 30px;
+        line-height: 30px;
+        width: 155px;
+      }
+      .iconImg {
+        width: 20px;
+        height: 20px;
+        .el-icon {
+          font-weight: bold;
+          &.active {
+            color: #00ee6f;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/sponeScreen/gisMF/map.vue b/src/views/sponeScreen/gisMF/map.vue
deleted file mode 100644
index 082bee8..0000000
--- a/src/views/sponeScreen/gisMF/map.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-  <!-- 海绵综合一张图地图cesium -->
-  <div class="mapContainerMF" id="mapContainerMF"></div>
-</template>
-
-<script setup>
-import blue_vector from './mapStyle.js';
-const { proxy } = getCurrentInstance();
-//创建地图实例
-const createIniteMap = () => {
-  window.newfiberMap = new NewFiberMap('mapContainerMF', {
-    terrain: false,
-    selectionIndicator: false, //单击是否出现绿色边框
-  });
-  var layer = new NewFiberMap.Layer.MVTImageryProvider({
-    style: blue_vector,
-    tileSize: 1024,
-  });
-  newfiberMap.getMap().scene.globe.baseColor = Cesium.Color.fromCssColorString(blue_vector.layers[0]['paint']['background-color']);
-  newfiberMap.getMap().imageryLayers.addImageryProvider(layer);
-};
-//添加3Dtiles
-const loadCesium3DTileSet = async (e = {}) => {
-  let { url: o, id: a = _.uniqueId(), style: l = {}, show: i = !0, customShader: s = void 0 } = e;
-
-  const tileset = await Cesium.Cesium3DTileset.fromUrl(o, {
-    url: o,
-    show: i,
-    customShader: s,
-    shadows: !1,
-    skipLevelOfDetail: !0,
-    baseScreenSpaceError: 1024,
-    maximumScreenSpaceError: 64,
-    skipScreenSpaceErrorFactor: 16,
-    skipLevels: 1,
-    immediatelyLoadDesiredLevelOfDetail: !1,
-    loadSiblings: !1,
-    cullWithChildrenBounds: !0,
-    cullRequestsWhileMoving: !0,
-    cullRequestsWhileMovingMultiplier: 10,
-    preloadWhenHidden: !0,
-    preloadFlightDestinations: !0,
-    preferLeaves: !0,
-    maximumMemoryUsage: 1024,
-    progressiveResolutionHeightFraction: 0.5,
-    dynamicScreenSpaceErrorDensity: 1,
-    dynamicScreenSpaceErrorFactor: 4,
-    dynamicScreenSpaceErrorHeightFalloff: 0.25,
-    foveatedScreenSpaceError: !0,
-    foveatedConeSize: 0.1,
-    foveatedMinimumScreenSpaceErrorRelaxation: 0,
-    foveatedTimeDelay: 0,
-    luminanceAtZenith: 0,
-    backFaceCulling: !0,
-    debugFreezeFrame: !1,
-    debugColorizeTiles: !1,
-    debugWireframe: !1,
-    debugShowBoundingVolume: !1,
-    debugShowContentBoundingVolume: !1,
-    debugShowViewerRequestVolume: !1,
-    debugShowGeometricError: !1,
-    debugShowRenderingStatistics: !1,
-    debugShowMemoryUsage: !1,
-    debugShowUrl: !1,
-    dynamicScreenSpaceError: !0,
-  });
-  newfiberMap.getMap().scene.primitives.add(tileset);
-  var boundingSphere = tileset.boundingSphere;
-  var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
-  var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
-  var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 20);
-  var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
-  tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
-};
-onMounted(() => {
-  createIniteMap();
-});
-</script>
-
-<style lang="scss" scoped>
-.mapContainerMF {
-  width: 100%;
-  height: 100%;
-}
-</style>