diff --git a/src/assets/geojson/kaifeng/track.json b/src/assets/geojson/kaifeng/track.json
new file mode 100644
index 0000000..0b513ca
--- /dev/null
+++ b/src/assets/geojson/kaifeng/track.json
@@ -0,0 +1,87 @@
+{
+    "type": "FeatureCollection",
+    "features": [
+        {
+            "type": "Feature",
+            "properties": {
+                "fillcolor": "rgba(82, 214, 108,1)"
+            },
+            "geometry": {
+                "type": "LineString",
+                "coordinates": [
+                    [
+                        114.35720775300125,
+                        34.794029555366635
+                    ],
+                    [
+                        114.35723116921616,
+                        34.79331536081194
+                    ],
+                    [
+                        114.35741459623294,
+                        34.792367004108165
+                    ],
+                    [
+                        114.35757070433233,
+                        34.79176598792552
+                    ],
+                    [
+                        114.3567355260006,
+                        34.79178940414043
+                    ],
+                    [
+                        114.35661063952115,
+                        34.79070640420094
+                    ],
+                    [
+                        114.35428658019148,
+                        34.790817631221735
+                    ],
+                    [
+                        114.3540290018275,
+                        34.78942826913719
+                    ],
+                    [
+                        114.35312357485105,
+                        34.783878626203986
+                    ],
+                    [
+                        114.35297527215664,
+                        34.782598539789014
+                    ],
+                    [
+                        114.35307674242124,
+                        34.78218485332564
+                    ]
+                ]
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "fillcolor": "rgba(82, 214, 108,1)"
+            },
+            "geometry": {
+                "type": "LineString",
+                "coordinates": [
+                    [
+                        114.31333162031727,
+                        34.77774357789805
+                    ],
+                    [
+                        114.3249928953415,
+                        34.77688498335142
+                    ],
+                    [
+                        114.33248608411208,
+                        34.77629177257375
+                    ],
+                    [
+                        114.33371933809724,
+                        34.784003512683476
+                    ]
+                ]
+            }
+        }
+    ]
+}
\ No newline at end of file

diff --git a/src/assets/geojson/kaifeng/track.json b/src/assets/geojson/kaifeng/track.json
new file mode 100644
index 0000000..0b513ca
--- /dev/null
+++ b/src/assets/geojson/kaifeng/track.json
@@ -0,0 +1,87 @@
+{
+    "type": "FeatureCollection",
+    "features": [
+        {
+            "type": "Feature",
+            "properties": {
+                "fillcolor": "rgba(82, 214, 108,1)"
+            },
+            "geometry": {
+                "type": "LineString",
+                "coordinates": [
+                    [
+                        114.35720775300125,
+                        34.794029555366635
+                    ],
+                    [
+                        114.35723116921616,
+                        34.79331536081194
+                    ],
+                    [
+                        114.35741459623294,
+                        34.792367004108165
+                    ],
+                    [
+                        114.35757070433233,
+                        34.79176598792552
+                    ],
+                    [
+                        114.3567355260006,
+                        34.79178940414043
+                    ],
+                    [
+                        114.35661063952115,
+                        34.79070640420094
+                    ],
+                    [
+                        114.35428658019148,
+                        34.790817631221735
+                    ],
+                    [
+                        114.3540290018275,
+                        34.78942826913719
+                    ],
+                    [
+                        114.35312357485105,
+                        34.783878626203986
+                    ],
+                    [
+                        114.35297527215664,
+                        34.782598539789014
+                    ],
+                    [
+                        114.35307674242124,
+                        34.78218485332564
+                    ]
+                ]
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "fillcolor": "rgba(82, 214, 108,1)"
+            },
+            "geometry": {
+                "type": "LineString",
+                "coordinates": [
+                    [
+                        114.31333162031727,
+                        34.77774357789805
+                    ],
+                    [
+                        114.3249928953415,
+                        34.77688498335142
+                    ],
+                    [
+                        114.33248608411208,
+                        34.77629177257375
+                    ],
+                    [
+                        114.33371933809724,
+                        34.784003512683476
+                    ]
+                ]
+            }
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/assets/newImgs/car.png b/src/assets/newImgs/car.png
new file mode 100644
index 0000000..e9eb325
--- /dev/null
+++ b/src/assets/newImgs/car.png
Binary files differ

diff --git a/src/assets/geojson/kaifeng/track.json b/src/assets/geojson/kaifeng/track.json
new file mode 100644
index 0000000..0b513ca
--- /dev/null
+++ b/src/assets/geojson/kaifeng/track.json
@@ -0,0 +1,87 @@
+{
+    "type": "FeatureCollection",
+    "features": [
+        {
+            "type": "Feature",
+            "properties": {
+                "fillcolor": "rgba(82, 214, 108,1)"
+            },
+            "geometry": {
+                "type": "LineString",
+                "coordinates": [
+                    [
+                        114.35720775300125,
+                        34.794029555366635
+                    ],
+                    [
+                        114.35723116921616,
+                        34.79331536081194
+                    ],
+                    [
+                        114.35741459623294,
+                        34.792367004108165
+                    ],
+                    [
+                        114.35757070433233,
+                        34.79176598792552
+                    ],
+                    [
+                        114.3567355260006,
+                        34.79178940414043
+                    ],
+                    [
+                        114.35661063952115,
+                        34.79070640420094
+                    ],
+                    [
+                        114.35428658019148,
+                        34.790817631221735
+                    ],
+                    [
+                        114.3540290018275,
+                        34.78942826913719
+                    ],
+                    [
+                        114.35312357485105,
+                        34.783878626203986
+                    ],
+                    [
+                        114.35297527215664,
+                        34.782598539789014
+                    ],
+                    [
+                        114.35307674242124,
+                        34.78218485332564
+                    ]
+                ]
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "fillcolor": "rgba(82, 214, 108,1)"
+            },
+            "geometry": {
+                "type": "LineString",
+                "coordinates": [
+                    [
+                        114.31333162031727,
+                        34.77774357789805
+                    ],
+                    [
+                        114.3249928953415,
+                        34.77688498335142
+                    ],
+                    [
+                        114.33248608411208,
+                        34.77629177257375
+                    ],
+                    [
+                        114.33371933809724,
+                        34.784003512683476
+                    ]
+                ]
+            }
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/assets/newImgs/car.png b/src/assets/newImgs/car.png
new file mode 100644
index 0000000..e9eb325
--- /dev/null
+++ b/src/assets/newImgs/car.png
Binary files differ
diff --git a/src/views/floodSys/floodYP/riskGisMap.vue b/src/views/floodSys/floodYP/riskGisMap.vue
index 48da94c..8033af8 100644
--- a/src/views/floodSys/floodYP/riskGisMap.vue
+++ b/src/views/floodSys/floodYP/riskGisMap.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script setup name="riskMapGis">
-import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
+import MapBox from '@/views/gisMapPage/gisMapBox'; //gis地图
 const { proxy } = getCurrentInstance();
 const allData = reactive({});
 const emits = defineEmits();

diff --git a/src/assets/geojson/kaifeng/track.json b/src/assets/geojson/kaifeng/track.json
new file mode 100644
index 0000000..0b513ca
--- /dev/null
+++ b/src/assets/geojson/kaifeng/track.json
@@ -0,0 +1,87 @@
+{
+    "type": "FeatureCollection",
+    "features": [
+        {
+            "type": "Feature",
+            "properties": {
+                "fillcolor": "rgba(82, 214, 108,1)"
+            },
+            "geometry": {
+                "type": "LineString",
+                "coordinates": [
+                    [
+                        114.35720775300125,
+                        34.794029555366635
+                    ],
+                    [
+                        114.35723116921616,
+                        34.79331536081194
+                    ],
+                    [
+                        114.35741459623294,
+                        34.792367004108165
+                    ],
+                    [
+                        114.35757070433233,
+                        34.79176598792552
+                    ],
+                    [
+                        114.3567355260006,
+                        34.79178940414043
+                    ],
+                    [
+                        114.35661063952115,
+                        34.79070640420094
+                    ],
+                    [
+                        114.35428658019148,
+                        34.790817631221735
+                    ],
+                    [
+                        114.3540290018275,
+                        34.78942826913719
+                    ],
+                    [
+                        114.35312357485105,
+                        34.783878626203986
+                    ],
+                    [
+                        114.35297527215664,
+                        34.782598539789014
+                    ],
+                    [
+                        114.35307674242124,
+                        34.78218485332564
+                    ]
+                ]
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "fillcolor": "rgba(82, 214, 108,1)"
+            },
+            "geometry": {
+                "type": "LineString",
+                "coordinates": [
+                    [
+                        114.31333162031727,
+                        34.77774357789805
+                    ],
+                    [
+                        114.3249928953415,
+                        34.77688498335142
+                    ],
+                    [
+                        114.33248608411208,
+                        34.77629177257375
+                    ],
+                    [
+                        114.33371933809724,
+                        34.784003512683476
+                    ]
+                ]
+            }
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/assets/newImgs/car.png b/src/assets/newImgs/car.png
new file mode 100644
index 0000000..e9eb325
--- /dev/null
+++ b/src/assets/newImgs/car.png
Binary files differ
diff --git a/src/views/floodSys/floodYP/riskGisMap.vue b/src/views/floodSys/floodYP/riskGisMap.vue
index 48da94c..8033af8 100644
--- a/src/views/floodSys/floodYP/riskGisMap.vue
+++ b/src/views/floodSys/floodYP/riskGisMap.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script setup name="riskMapGis">
-import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
+import MapBox from '@/views/gisMapPage/gisMapBox'; //gis地图
 const { proxy } = getCurrentInstance();
 const allData = reactive({});
 const emits = defineEmits();
diff --git a/src/views/gisMapPage/gisMapBox.vue b/src/views/gisMapPage/gisMapBox.vue
index e67005e..4cb6ef1 100644
--- a/src/views/gisMapPage/gisMapBox.vue
+++ b/src/views/gisMapPage/gisMapBox.vue
@@ -1,37 +1,501 @@
 <template>
-  <div class="mapPage">
-    <div id="cesiumContainer"></div>
+  <div class="mapPage_risk">
+    <div id="mapboxContainer_risk"></div>
   </div>
 </template>
 <script>
-import { reactive, toRefs, onBeforeMount, onMounted, nextTick, onBeforeUnmount } from 'vue';
-import NewFiberMapOperate from './gisMapFunction';
-import axios from 'axios';
 import bus from '@/bus';
+import axios from 'axios';
+import kaifengWaterLabel1 from '@/assets/geojson/kaifeng/kaifengWaterLabel1.json';
+import kaifengWater from '@/assets/geojson/kaifeng/kaifengWater.json';
+import kaifengAllBoundary from '@/assets/geojson/kaifeng/kaifengAllBoundary.json';
+import kaiFengCenteralBoundary from '@/assets/geojson/kaifeng/kaiFengCenteralBoundary.json';
+import riverFlow from '@/assets/geojson/kaifeng/riverFlow.json';
+
 export default {
   components: {},
-  props: {},
-  setup(props) {
+  props: {
+    initJson: {
+      type: String,
+      default: () => '/static/libs/mapbox/style/floodOneMap.json',
+    },
+    loadCallback: {
+      type: Function,
+      default: () => function () {},
+    },
+  },
+  setup(props, event) {
     const allData = reactive({
-      movePosition: '113.934113,30.872118',
+      layerIds: [],
     });
+    let geojson = {
+      point: { type: 'FeatureCollection', features: [] },
+      polygon: { type: 'FeatureCollection', features: [] },
+      linestring: { type: 'FeatureCollection', features: [] },
+    };
+    let map = null;
+    let config = null;
+    let highlightLayers = {
+      highlight_point: 1,
+      //highlight_point1: 1,
+      highlight_polygon: 1,
+      highlight_linestring: 1,
+    };
     const initeMap = async () => {
-      window.newfiberMap = new NewFiberMapOperate('cesiumContainer', {
-        pitch: 55,
-        lng: 113.953,
-        lat: 30.906,
+      config = (await axios.get(props.initJson)).data;
+      let { sprites, l7 } = config.params;
+
+      window.newfiberMap_risk = new mapboxL7.Scene({
+        id: 'mapboxContainer_risk',
+        map: new mapboxL7.Mapbox({
+          style: config.params.init.style,
+          center: config.params.init.center,
+          zoom: config.params.init.zoom,
+        }),
       });
-      newfiberMap.map.on('mousemove', function (e) {
-        let movePosition = gcoord.transform(turf.point([e.lngLat.lng, e.lngLat.lat]), gcoord.GCJ02, gcoord.WGS84);
-        allData.movePosition = `${movePosition.geometry.coordinates[0].toFixed(6)},${movePosition.geometry.coordinates[1].toFixed(6)}`;
+      newfiberMap_risk.map.load = false;
+      map = newfiberMap_risk.map;
+      map.ogcLayers = [];
+      newfiberMap_risk.unLoadLayers = [];
+      (sprites || []).forEach(url => {
+        map.style._loadSprite(url.includes('http') ? url : window.location.href.split('#')[0] + url);
+      });
+      ((l7 || []).images || []).forEach(item =>
+        newfiberMap_risk.addImage(item.name, item.url.includes('http') ? item.url : window.location.href.split('#')[0] + item.url)
+      );
+      setTimeout(() => {
+        map.on('load', async () => {
+          const mouseLocation = new mapboxL7.MouseLocation({
+            transform: position => {
+              return [position[0].toFixed(6), position[1].toFixed(6)];
+            },
+          });
+          newfiberMap_risk.addControl(mouseLocation);
+          // !!!map.getSource('kaifengWater') && map.addSource('kaifengWater', { type: 'geojson', data: kaifengWater });
+          // !!!map.getLayer('kaifengWater') &&
+          //   map.addLayer({
+          //     id: 'kaifengWater',
+          //     type: 'fill',
+          //     source: 'kaifengWater',
+          //     paint: {
+          //       'fill-color': 'rgba(117, 207, 240,1)',
+          //     },
+          //   });
+          //addRiverFlow();
+          addWaterLabel();
+          //addAreaBoundary();
+          await loadData();
+
+          props.loadCallback && props.loadCallback();
+          // getLayerIdByClick();
+          (config.orders || []).forEach(item => setLayerOrder(...item));
+          newfiberMap_risk.getLayers().filter(i => highlightLayers[i.newfiberId] && (highlightLayers[i.newfiberId] = i));
+          // let timeout = setTimeout(() => {
+          let { pitch, center } = config.params.init;
+          pitch && newfiberMap_risk.map.setPitch(pitch);
+          center && newfiberMap_risk.map.setCenter(center);
+          //clearTimeout(timeout);
+          //}, 1000);
+          newfiberMap_risk.map.load = true;
+        });
+      }, 200);
+
+      let layerIds = (config.mapbox || []).map(i => i.id);
+      map.on('click', e => {
+        Object.values(highlightLayers).forEach(layer => {
+          if (layer.setData) layer.setData({ type: 'FeatureCollection', features: [] });
+        });
+        const feature = (
+          map.queryRenderedFeatures([
+            [e.point.x - 10 / 2, e.point.y - 10 / 2],
+            [e.point.x + 10 / 2, e.point.y + 10 / 2],
+          ]) || []
+        ).filter(i => layerIds.includes(i.layer.id) || i.layer.id == 'rainStation')[0];
+        if (feature) event.emit('map-click', Object.values(e.lngLat), feature.properties);
+        setHighlight(feature);
+      });
+      map.on('mouseenter', 'point', e => {
+        Object.values(highlightLayers).forEach(layer => {
+          if (layer.setData) layer.setData({ type: 'FeatureCollection', features: [] });
+        });
+        const feature = (
+          map.queryRenderedFeatures([
+            [e.point.x - 10 / 2, e.point.y - 10 / 2],
+            [e.point.x + 10 / 2, e.point.y + 10 / 2],
+          ]) || []
+        ).filter(i => layerIds.includes(i.layer.id))[0];
+        if (feature) event.emit('map-moveOn', Object.values(e.lngLat), feature.properties);
+        setHighlight(feature);
+      });
+      map.on('mouseleave', 'point', e => {
+        Object.values(highlightLayers).forEach(layer => {
+          if (layer.setData) layer.setData({ type: 'FeatureCollection', features: [] });
+        });
+        const feature = (
+          map.queryRenderedFeatures([
+            [e.point.x - 10 / 2, e.point.y - 10 / 2],
+            [e.point.x + 10 / 2, e.point.y + 10 / 2],
+          ]) || []
+        ).filter(i => layerIds.includes(i.layer.id))[0];
+        if (feature) event.emit('map-moveLeave', Object.values(e.lngLat), feature.properties);
       });
     };
-    onMounted(() => {
-      nextTick(() => {
-        initeMap();
+
+    const loadData = async () => {
+      let { mapbox, l7, ogc } = config;
+      if (mapbox)
+        //用mapbox添加水系
+        //axios.get(config.params.mvt + `/v1/geojson/hubei_xiaogan_water1`).then(({ data: geojson }) => {
+
+        // });
+        mapbox.forEach(item => {
+          let { mType, columns } = item;
+          let params = '';
+          if (columns) params = `?columns=${columns}`;
+          if (!!!map.getSource(item.id)) {
+            let flag = mType == 'geojson';
+            flag
+              ? map.addSource(item.id, {
+                  type: mType,
+                  data: geojson[item.id],
+                })
+              : map.addSource(item.id, {
+                  type: 'vector',
+                  tiles: [config.params.mvt + `/v1/${mType}/${item.key}/{z}/{x}/{y}` + params],
+                  tileSize: 512,
+                  scheme: 'xyz',
+                  maxzoom: 14,
+                  minzoom: 1,
+                });
+          }
+          map.addLayer({ ...item, source: item.id });
+          map.moveLayer(item.id, undefined);
+          allData.layerIds.push(item.id);
+        });
+      if (l7) {
+        if (!!!l7.length) return;
+        l7.forEach(item => {
+          let { id, columns, filter } = item;
+          let params = '';
+          if (columns) params += `columns=${columns}&`;
+          if (filter) params += `filter=${filter}&`;
+          id
+            ? axios.get(config.params.mvt + `/v1/geojson/${id}?` + params).then(({ data: geojson }) => initMapBoxL7Class(item, geojson))
+            : initMapBoxL7Class(item, geojson[item.key] || turf.featureCollection([]));
+        });
+      }
+      if (ogc)
+        ogc.forEach(item => {
+          let { id, type, params, methods } = item;
+          Object.keys(params).forEach(
+            i => (params[i] = typeof params[i] == 'string' ? (params[i].includes('||') ? eval(params[i]) : params[i]) : params[i])
+          );
+          let layer = new mapboxgl1[type](params);
+          layer.newfiberId = id;
+          methods.forEach(method => {
+            let ms = method.params.map(i => (typeof i == 'string' ? (i.includes('||') ? eval(i) : i) : i));
+            layer[method.name](...ms);
+          });
+          map.ogcLayers.push(layer);
+        });
+
+      function initMapBoxL7Class({ type, params, methods, id, show, key }, geojson) {
+        let layer = new mapboxL7[type](params).source(geojson);
+        methods.forEach(method => {
+          let ms = method.params.map(i => (typeof i == 'string' ? (i.includes('||') ? eval(i) : i) : i));
+          layer[method.name](...ms);
+        });
+        layer.newfiberId = key;
+        if (!show) return newfiberMap_risk.unLoadLayers.push(layer);
+        newfiberMap_risk.addLayer(layer);
+        allData.layerIds.push(key);
+      }
+    };
+
+    const setLayerVisible = ({ layername, isCheck }) => {
+      if (!!!window.newfiberMap_risk) return;
+      console.log('layername---', layername);
+      if (((config || {}).filter || {})[layername]) {
+        config.filter[layername].layerName.forEach((name, index) => {
+          let filter = map.getFilter(name);
+          let fValues = config.filter[layername].filter[index];
+          isCheck ? filter.push(...fValues) : (filter = filter.filter(i => !fValues.includes(i)));
+          map.setFilter(name, filter);
+        });
+        return config.filter[layername].easeTo && isCheck && map.easeTo(config.filter[layername].easeTo);
+      }
+      let features = Object.values(geojson)
+        .map(i => i.features)
+        .flat(Infinity)
+        .filter(i => i.properties.type == layername);
+      if (features.length) {
+        let types = Array.from(new Set(features.map(i => i.geometry.type.toLocaleLowerCase())));
+        types.forEach(type1 => {
+          if (map.getLayer(type1)) {
+            let filter = map.getFilter(type1);
+            if (!!!filter) return;
+            isCheck ? filter.push(layername) : (filter = filter.filter(i => i != layername));
+
+            map.setFilter(type1, filter);
+          }
+        });
+      }
+      let layer = newfiberMap_risk.getLayers().filter(i => i.newfiberId == layername)[0];
+      if (!!!layer) {
+        layer = newfiberMap_risk.unLoadLayers.filter(i => i.newfiberId == layername)[0];
+        isCheck && layer && newfiberMap_risk.addLayer(layer);
+      }
+      layer && layer[['hide', 'show'][Number(isCheck)]]();
+
+      layer = map.getLayer(layername);
+      layer && map.setLayoutProperty(layername, 'visibility', isCheck ? 'visible' : 'none');
+
+      layer = map.getLayer(layername + '_text');
+      layer && map.setLayoutProperty(layername, 'visibility', isCheck ? 'visible' : 'none');
+
+      layer = map.ogcLayers.filter(i => i.id == layername)[0];
+      layer && (layer.map ? layer[isCheck ? 'show' : 'hide']() : layer.addTo(map));
+    };
+
+    const getGeojsonByType = ({ type, callback }) => {
+      let geojs = turf.featureCollection(
+        Object.values(geojson)
+          .map(i => i.features)
+          .flat(Infinity)
+          .filter(i => i.properties.type == type)
+      );
+      callback && callback(geojs);
+    };
+
+    const removeLayers = ids => {
+      let { getLayers, removeAllLayer, removeLayer: removeLayerL7 } = newfiberMap_risk;
+      let { getLayer, removeLayer } = map;
+
+      if (!!!ids) {
+        allData.layerIds.forEach(id => getLayer(id) && removeLayer(id));
+        return removeAllLayer();
+      }
+
+      ids.forEach(id => {
+        getLayer(id) && removeLayer(id);
+        getLayers().forEach(layer => layer.newfiberId == id && removeLayerL7(layer));
       });
+    };
+
+    const removeMapDatas = types => {
+      !!!types
+        ? Object.keys(geojson).forEach(key => (geojson[key].features.length = 0))
+        : Object.keys(geojson).forEach(
+            key => (geojson[key].features = geojson[key].features.filter(feature => !types.includes(feature.properties.type)))
+          );
+      return refreshGeoJSON();
+    };
+
+    const setLegendData = list => {
+      list.forEach(i => {
+        i.data &&
+          i.data.features &&
+          i.data.features.forEach(a => {
+            if (!!!a || !!!a.properties) return;
+            a.properties.type = a.properties.type || i.layername;
+            a.properties.name =
+              a.properties.name ||
+              a.properties.Name ||
+              a.properties.stName ||
+              a.properties.roadName ||
+              a.properties.sewageName ||
+              a.properties.sectionName ||
+              a.properties.pumpName ||
+              a.properties.projectName;
+          });
+      });
+
+      let types = {};
+      list
+        .map(i => i.data && i.data.features)
+        .filter(Boolean)
+        .flat(Infinity)
+        .forEach(feature => {
+          if (!!!feature || !!!feature.properties) return;
+          feature.properties.geometry = Terraformer.WKT.convert(feature.geometry);
+          let type = feature.geometry.type.toLocaleLowerCase();
+          let flag = type.includes('multi');
+          type = type.replaceAll('multi', '');
+          let features = null;
+          if (flag) features = turf.flatten(feature).features;
+          !!!types[type] && (types[type] = []);
+          types[type].push(...(features ? features : [feature]));
+        });
+      Object.keys(types).forEach(key => geojson[key].features.push(...types[key]));
+      refreshGeoJSON();
+    };
+
+    const refreshGeoJSON = () => {
+      Object.keys(geojson).forEach(key => map.getSource(key) && map.getSource(key).setData(geojson[key]));
+    };
+
+    const setGeoJSON = ({ json, key }) => {
+      // geojson[key] = json;
+      let layer = newfiberMap_risk.getLayers().filter(i => i.newfiberId == key)[0];
+      if (!!!layer) {
+        layer = newfiberMap_risk.unLoadLayers.filter(i => i.newfiberId == key)[0];
+        layer && newfiberMap_risk.addLayer(layer);
+      }
+      if (layer) layer.setData(json);
+      setLegendData([{ data: json, layername: key, type: 'point' }]);
+    };
+
+    const setLayerOrder = (sourceLayer, targetLayer) => {
+      map.moveLayer(sourceLayer, targetLayer);
+    };
+
+    const setHighlight = (features = {}) => {
+      let array = {};
+      features = features.forEach ? features : [features];
+      Object.values(highlightLayers).forEach(layer => layer.setData && layer.setData({ type: 'FeatureCollection', features: [] }));
+      features.forEach(feature => {
+        if (!!!feature || !Boolean(Object.keys(feature).length) || !feature.properties.geometry) return;
+        let geometry = Terraformer.WKT.parse(feature.properties.geometry);
+        let geoFeature = turf.feature(geometry, feature.properties);
+        let type = geometry.type.toLocaleLowerCase().replaceAll('multi', '');
+        let key = Object.keys(highlightLayers).filter(key => key.lastIndexOf(type) > -1)[0];
+        if (!array[key]) array[key] = [];
+        array[key].push(geoFeature);
+      });
+      Object.keys(array).forEach(
+        key => highlightLayers[key] && highlightLayers[key].setData({ type: 'FeatureCollection', features: array[key] })
+      );
+    };
+
+    const getLayerIdByClick = () => {
+      map.getStyle().layers.forEach(i =>
+        map.on('click', i.id, (a, b, c, d) => {
+          console.log('layer-id', a.features[0].layer.id);
+        })
+      );
+    };
+
+    //添加政区边界
+    const addAreaBoundary = () => {
+      !!!map.getSource('kaifengAllBoundary') && map.addSource('kaifengAllBoundary', { type: 'geojson', data: kaifengAllBoundary });
+      !!!map.getLayer('kaifengAllBoundary') &&
+        map.addLayer({
+          id: 'kaifengAllBoundary',
+          type: 'line',
+          source: 'kaifengAllBoundary',
+
+          paint: {
+            'line-color': 'rgba(255,208,76,1)',
+            'line-width': 6,
+          },
+        });
+      !!!map.getSource('kaiFengCenteralBoundary') &&
+        map.addSource('kaiFengCenteralBoundary', { type: 'geojson', data: kaiFengCenteralBoundary });
+      !!!map.getLayer('kaiFengCenteralBoundary') &&
+        map.addLayer({
+          id: 'kaiFengCenteralBoundary',
+          type: 'line',
+          source: 'kaiFengCenteralBoundary',
+
+          paint: {
+            'line-color': 'rgba(228,64,50,1)',
+            'line-width': 6,
+          },
+        });
+    };
+    //添加河流标注
+    const addWaterLabel = () => {
+      !!!map.getSource('kaifengWaterLabel1') && map.addSource('kaifengWaterLabel1', { type: 'geojson', data: kaifengWaterLabel1 });
+      !!!map.getLayer('kaifengWaterLabel1') &&
+        map.addLayer({
+          id: 'kaifengWaterLabel1',
+          type: 'symbol',
+          source: 'kaifengWaterLabel1',
+          layout: {
+            'text-field': ['get', 'name'],
+            'text-font': ['KlokanTech Noto Sans Regular'],
+            'text-transform': 'uppercase',
+          },
+          paint: {
+            'text-halo-color': 'rgba(238, 251, 255,1)',
+            'text-color': 'rgba(30, 30, 30,1)',
+            'icon-opacity': 1,
+            'text-halo-width': 1,
+          },
+        });
+      !!!map.getSource('kaifengWaterLabel2') && map.addSource('kaifengWaterLabel2', { type: 'geojson', data: kaifengWater });
+      !!!map.getLayer('kaifengWaterLabel2') &&
+        map.addLayer({
+          id: 'kaifengWaterLabel2',
+          type: 'symbol',
+          source: 'kaifengWaterLabel2',
+          layout: {
+            'symbol-placement': 'line',
+            'text-field': ['get', 'name'],
+            'text-font': ['KlokanTech Noto Sans Regular'],
+            'text-letter-spacing': 0.1,
+            'text-rotation-alignment': 'map',
+            'text-size': {
+              base: 1.4,
+              stops: [
+                [10, 16],
+                [20, 22],
+              ],
+            },
+            'text-transform': 'uppercase',
+          },
+          paint: {
+            'text-halo-color': 'rgba(238, 251, 255,1)',
+            'text-color': 'rgba(30, 30, 30,1)',
+            'icon-opacity': 1,
+            'text-halo-width': 1,
+          },
+        });
+    };
+    //添加河道流向
+    const addRiverFlow = () => {
+      let layer = new mapboxL7.LineLayer({})
+        .source(riverFlow)
+        .size(6)
+        .shape('line')
+        .texture('arrow')
+        .color('rgb(117, 207, 240)')
+        .animate({
+          interval: 1, // 间隔
+          duration: 1.5, // 持续时间，延时
+          trailLength: 2, // 流线长度
+        })
+        .style({
+          opacity: 0.6,
+          lineTexture: true, // 开启线的贴图功能
+          iconStep: 200, // 设置贴图纹理的间距
+          borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
+          borderColor: '#fff', // 默认为 #ccc
+        });
+      newfiberMap_risk.addLayer(layer);
+    };
+    onMounted(() => {
+      initeMap();
+      bus.on('setLayerVisible', setLayerVisible);
+      bus.on('setLegendData', setLegendData);
+      bus.on('setGeoJSON', setGeoJSON);
+      bus.on('getGeojsonByType', getGeojsonByType);
+      bus.on('removeLayers', removeLayers);
+      bus.on('removeMapDatas', removeMapDatas);
+      bus.on('setHighlight', setHighlight);
     });
-    onBeforeUnmount(() => {});
+
+    onBeforeUnmount(() => {
+      bus.off('setLayerVisible');
+      bus.off('setLegendData');
+      bus.off('setGeoJSON');
+      bus.off('getGeojsonByType');
+      bus.off('removeMapDatas');
+      bus.off('setHighlight');
+      newfiberMap_risk.destroy();
+      newfiberMap_risk = null;
+    });
+
     return {
       ...toRefs(allData),
       initeMap,
@@ -40,7 +504,7 @@
 };
 </script>
 <style lang="scss">
-.mapPage {
+.mapPage_risk {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -48,15 +512,16 @@
   top: 0px;
   z-index: 10;
   background: lavender;
-  #cesiumContainer {
+  #mapboxContainer_risk {
     width: 100%;
     height: 100%;
     position: absolute;
   }
-  .coordinateContainer {
-    position: absolute;
-    left: 20px;
-    bottom: 30px;
+  .l7-control-mouse-location {
+    background: none;
+  }
+  .l7-control-mouse-location {
+    color: #ffffff;
   }
 }
 </style>

diff --git a/src/assets/geojson/kaifeng/track.json b/src/assets/geojson/kaifeng/track.json
new file mode 100644
index 0000000..0b513ca
--- /dev/null
+++ b/src/assets/geojson/kaifeng/track.json
@@ -0,0 +1,87 @@
+{
+    "type": "FeatureCollection",
+    "features": [
+        {
+            "type": "Feature",
+            "properties": {
+                "fillcolor": "rgba(82, 214, 108,1)"
+            },
+            "geometry": {
+                "type": "LineString",
+                "coordinates": [
+                    [
+                        114.35720775300125,
+                        34.794029555366635
+                    ],
+                    [
+                        114.35723116921616,
+                        34.79331536081194
+                    ],
+                    [
+                        114.35741459623294,
+                        34.792367004108165
+                    ],
+                    [
+                        114.35757070433233,
+                        34.79176598792552
+                    ],
+                    [
+                        114.3567355260006,
+                        34.79178940414043
+                    ],
+                    [
+                        114.35661063952115,
+                        34.79070640420094
+                    ],
+                    [
+                        114.35428658019148,
+                        34.790817631221735
+                    ],
+                    [
+                        114.3540290018275,
+                        34.78942826913719
+                    ],
+                    [
+                        114.35312357485105,
+                        34.783878626203986
+                    ],
+                    [
+                        114.35297527215664,
+                        34.782598539789014
+                    ],
+                    [
+                        114.35307674242124,
+                        34.78218485332564
+                    ]
+                ]
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "fillcolor": "rgba(82, 214, 108,1)"
+            },
+            "geometry": {
+                "type": "LineString",
+                "coordinates": [
+                    [
+                        114.31333162031727,
+                        34.77774357789805
+                    ],
+                    [
+                        114.3249928953415,
+                        34.77688498335142
+                    ],
+                    [
+                        114.33248608411208,
+                        34.77629177257375
+                    ],
+                    [
+                        114.33371933809724,
+                        34.784003512683476
+                    ]
+                ]
+            }
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/assets/newImgs/car.png b/src/assets/newImgs/car.png
new file mode 100644
index 0000000..e9eb325
--- /dev/null
+++ b/src/assets/newImgs/car.png
Binary files differ
diff --git a/src/views/floodSys/floodYP/riskGisMap.vue b/src/views/floodSys/floodYP/riskGisMap.vue
index 48da94c..8033af8 100644
--- a/src/views/floodSys/floodYP/riskGisMap.vue
+++ b/src/views/floodSys/floodYP/riskGisMap.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script setup name="riskMapGis">
-import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
+import MapBox from '@/views/gisMapPage/gisMapBox'; //gis地图
 const { proxy } = getCurrentInstance();
 const allData = reactive({});
 const emits = defineEmits();
diff --git a/src/views/gisMapPage/gisMapBox.vue b/src/views/gisMapPage/gisMapBox.vue
index e67005e..4cb6ef1 100644
--- a/src/views/gisMapPage/gisMapBox.vue
+++ b/src/views/gisMapPage/gisMapBox.vue
@@ -1,37 +1,501 @@
 <template>
-  <div class="mapPage">
-    <div id="cesiumContainer"></div>
+  <div class="mapPage_risk">
+    <div id="mapboxContainer_risk"></div>
   </div>
 </template>
 <script>
-import { reactive, toRefs, onBeforeMount, onMounted, nextTick, onBeforeUnmount } from 'vue';
-import NewFiberMapOperate from './gisMapFunction';
-import axios from 'axios';
 import bus from '@/bus';
+import axios from 'axios';
+import kaifengWaterLabel1 from '@/assets/geojson/kaifeng/kaifengWaterLabel1.json';
+import kaifengWater from '@/assets/geojson/kaifeng/kaifengWater.json';
+import kaifengAllBoundary from '@/assets/geojson/kaifeng/kaifengAllBoundary.json';
+import kaiFengCenteralBoundary from '@/assets/geojson/kaifeng/kaiFengCenteralBoundary.json';
+import riverFlow from '@/assets/geojson/kaifeng/riverFlow.json';
+
 export default {
   components: {},
-  props: {},
-  setup(props) {
+  props: {
+    initJson: {
+      type: String,
+      default: () => '/static/libs/mapbox/style/floodOneMap.json',
+    },
+    loadCallback: {
+      type: Function,
+      default: () => function () {},
+    },
+  },
+  setup(props, event) {
     const allData = reactive({
-      movePosition: '113.934113,30.872118',
+      layerIds: [],
     });
+    let geojson = {
+      point: { type: 'FeatureCollection', features: [] },
+      polygon: { type: 'FeatureCollection', features: [] },
+      linestring: { type: 'FeatureCollection', features: [] },
+    };
+    let map = null;
+    let config = null;
+    let highlightLayers = {
+      highlight_point: 1,
+      //highlight_point1: 1,
+      highlight_polygon: 1,
+      highlight_linestring: 1,
+    };
     const initeMap = async () => {
-      window.newfiberMap = new NewFiberMapOperate('cesiumContainer', {
-        pitch: 55,
-        lng: 113.953,
-        lat: 30.906,
+      config = (await axios.get(props.initJson)).data;
+      let { sprites, l7 } = config.params;
+
+      window.newfiberMap_risk = new mapboxL7.Scene({
+        id: 'mapboxContainer_risk',
+        map: new mapboxL7.Mapbox({
+          style: config.params.init.style,
+          center: config.params.init.center,
+          zoom: config.params.init.zoom,
+        }),
       });
-      newfiberMap.map.on('mousemove', function (e) {
-        let movePosition = gcoord.transform(turf.point([e.lngLat.lng, e.lngLat.lat]), gcoord.GCJ02, gcoord.WGS84);
-        allData.movePosition = `${movePosition.geometry.coordinates[0].toFixed(6)},${movePosition.geometry.coordinates[1].toFixed(6)}`;
+      newfiberMap_risk.map.load = false;
+      map = newfiberMap_risk.map;
+      map.ogcLayers = [];
+      newfiberMap_risk.unLoadLayers = [];
+      (sprites || []).forEach(url => {
+        map.style._loadSprite(url.includes('http') ? url : window.location.href.split('#')[0] + url);
+      });
+      ((l7 || []).images || []).forEach(item =>
+        newfiberMap_risk.addImage(item.name, item.url.includes('http') ? item.url : window.location.href.split('#')[0] + item.url)
+      );
+      setTimeout(() => {
+        map.on('load', async () => {
+          const mouseLocation = new mapboxL7.MouseLocation({
+            transform: position => {
+              return [position[0].toFixed(6), position[1].toFixed(6)];
+            },
+          });
+          newfiberMap_risk.addControl(mouseLocation);
+          // !!!map.getSource('kaifengWater') && map.addSource('kaifengWater', { type: 'geojson', data: kaifengWater });
+          // !!!map.getLayer('kaifengWater') &&
+          //   map.addLayer({
+          //     id: 'kaifengWater',
+          //     type: 'fill',
+          //     source: 'kaifengWater',
+          //     paint: {
+          //       'fill-color': 'rgba(117, 207, 240,1)',
+          //     },
+          //   });
+          //addRiverFlow();
+          addWaterLabel();
+          //addAreaBoundary();
+          await loadData();
+
+          props.loadCallback && props.loadCallback();
+          // getLayerIdByClick();
+          (config.orders || []).forEach(item => setLayerOrder(...item));
+          newfiberMap_risk.getLayers().filter(i => highlightLayers[i.newfiberId] && (highlightLayers[i.newfiberId] = i));
+          // let timeout = setTimeout(() => {
+          let { pitch, center } = config.params.init;
+          pitch && newfiberMap_risk.map.setPitch(pitch);
+          center && newfiberMap_risk.map.setCenter(center);
+          //clearTimeout(timeout);
+          //}, 1000);
+          newfiberMap_risk.map.load = true;
+        });
+      }, 200);
+
+      let layerIds = (config.mapbox || []).map(i => i.id);
+      map.on('click', e => {
+        Object.values(highlightLayers).forEach(layer => {
+          if (layer.setData) layer.setData({ type: 'FeatureCollection', features: [] });
+        });
+        const feature = (
+          map.queryRenderedFeatures([
+            [e.point.x - 10 / 2, e.point.y - 10 / 2],
+            [e.point.x + 10 / 2, e.point.y + 10 / 2],
+          ]) || []
+        ).filter(i => layerIds.includes(i.layer.id) || i.layer.id == 'rainStation')[0];
+        if (feature) event.emit('map-click', Object.values(e.lngLat), feature.properties);
+        setHighlight(feature);
+      });
+      map.on('mouseenter', 'point', e => {
+        Object.values(highlightLayers).forEach(layer => {
+          if (layer.setData) layer.setData({ type: 'FeatureCollection', features: [] });
+        });
+        const feature = (
+          map.queryRenderedFeatures([
+            [e.point.x - 10 / 2, e.point.y - 10 / 2],
+            [e.point.x + 10 / 2, e.point.y + 10 / 2],
+          ]) || []
+        ).filter(i => layerIds.includes(i.layer.id))[0];
+        if (feature) event.emit('map-moveOn', Object.values(e.lngLat), feature.properties);
+        setHighlight(feature);
+      });
+      map.on('mouseleave', 'point', e => {
+        Object.values(highlightLayers).forEach(layer => {
+          if (layer.setData) layer.setData({ type: 'FeatureCollection', features: [] });
+        });
+        const feature = (
+          map.queryRenderedFeatures([
+            [e.point.x - 10 / 2, e.point.y - 10 / 2],
+            [e.point.x + 10 / 2, e.point.y + 10 / 2],
+          ]) || []
+        ).filter(i => layerIds.includes(i.layer.id))[0];
+        if (feature) event.emit('map-moveLeave', Object.values(e.lngLat), feature.properties);
       });
     };
-    onMounted(() => {
-      nextTick(() => {
-        initeMap();
+
+    const loadData = async () => {
+      let { mapbox, l7, ogc } = config;
+      if (mapbox)
+        //用mapbox添加水系
+        //axios.get(config.params.mvt + `/v1/geojson/hubei_xiaogan_water1`).then(({ data: geojson }) => {
+
+        // });
+        mapbox.forEach(item => {
+          let { mType, columns } = item;
+          let params = '';
+          if (columns) params = `?columns=${columns}`;
+          if (!!!map.getSource(item.id)) {
+            let flag = mType == 'geojson';
+            flag
+              ? map.addSource(item.id, {
+                  type: mType,
+                  data: geojson[item.id],
+                })
+              : map.addSource(item.id, {
+                  type: 'vector',
+                  tiles: [config.params.mvt + `/v1/${mType}/${item.key}/{z}/{x}/{y}` + params],
+                  tileSize: 512,
+                  scheme: 'xyz',
+                  maxzoom: 14,
+                  minzoom: 1,
+                });
+          }
+          map.addLayer({ ...item, source: item.id });
+          map.moveLayer(item.id, undefined);
+          allData.layerIds.push(item.id);
+        });
+      if (l7) {
+        if (!!!l7.length) return;
+        l7.forEach(item => {
+          let { id, columns, filter } = item;
+          let params = '';
+          if (columns) params += `columns=${columns}&`;
+          if (filter) params += `filter=${filter}&`;
+          id
+            ? axios.get(config.params.mvt + `/v1/geojson/${id}?` + params).then(({ data: geojson }) => initMapBoxL7Class(item, geojson))
+            : initMapBoxL7Class(item, geojson[item.key] || turf.featureCollection([]));
+        });
+      }
+      if (ogc)
+        ogc.forEach(item => {
+          let { id, type, params, methods } = item;
+          Object.keys(params).forEach(
+            i => (params[i] = typeof params[i] == 'string' ? (params[i].includes('||') ? eval(params[i]) : params[i]) : params[i])
+          );
+          let layer = new mapboxgl1[type](params);
+          layer.newfiberId = id;
+          methods.forEach(method => {
+            let ms = method.params.map(i => (typeof i == 'string' ? (i.includes('||') ? eval(i) : i) : i));
+            layer[method.name](...ms);
+          });
+          map.ogcLayers.push(layer);
+        });
+
+      function initMapBoxL7Class({ type, params, methods, id, show, key }, geojson) {
+        let layer = new mapboxL7[type](params).source(geojson);
+        methods.forEach(method => {
+          let ms = method.params.map(i => (typeof i == 'string' ? (i.includes('||') ? eval(i) : i) : i));
+          layer[method.name](...ms);
+        });
+        layer.newfiberId = key;
+        if (!show) return newfiberMap_risk.unLoadLayers.push(layer);
+        newfiberMap_risk.addLayer(layer);
+        allData.layerIds.push(key);
+      }
+    };
+
+    const setLayerVisible = ({ layername, isCheck }) => {
+      if (!!!window.newfiberMap_risk) return;
+      console.log('layername---', layername);
+      if (((config || {}).filter || {})[layername]) {
+        config.filter[layername].layerName.forEach((name, index) => {
+          let filter = map.getFilter(name);
+          let fValues = config.filter[layername].filter[index];
+          isCheck ? filter.push(...fValues) : (filter = filter.filter(i => !fValues.includes(i)));
+          map.setFilter(name, filter);
+        });
+        return config.filter[layername].easeTo && isCheck && map.easeTo(config.filter[layername].easeTo);
+      }
+      let features = Object.values(geojson)
+        .map(i => i.features)
+        .flat(Infinity)
+        .filter(i => i.properties.type == layername);
+      if (features.length) {
+        let types = Array.from(new Set(features.map(i => i.geometry.type.toLocaleLowerCase())));
+        types.forEach(type1 => {
+          if (map.getLayer(type1)) {
+            let filter = map.getFilter(type1);
+            if (!!!filter) return;
+            isCheck ? filter.push(layername) : (filter = filter.filter(i => i != layername));
+
+            map.setFilter(type1, filter);
+          }
+        });
+      }
+      let layer = newfiberMap_risk.getLayers().filter(i => i.newfiberId == layername)[0];
+      if (!!!layer) {
+        layer = newfiberMap_risk.unLoadLayers.filter(i => i.newfiberId == layername)[0];
+        isCheck && layer && newfiberMap_risk.addLayer(layer);
+      }
+      layer && layer[['hide', 'show'][Number(isCheck)]]();
+
+      layer = map.getLayer(layername);
+      layer && map.setLayoutProperty(layername, 'visibility', isCheck ? 'visible' : 'none');
+
+      layer = map.getLayer(layername + '_text');
+      layer && map.setLayoutProperty(layername, 'visibility', isCheck ? 'visible' : 'none');
+
+      layer = map.ogcLayers.filter(i => i.id == layername)[0];
+      layer && (layer.map ? layer[isCheck ? 'show' : 'hide']() : layer.addTo(map));
+    };
+
+    const getGeojsonByType = ({ type, callback }) => {
+      let geojs = turf.featureCollection(
+        Object.values(geojson)
+          .map(i => i.features)
+          .flat(Infinity)
+          .filter(i => i.properties.type == type)
+      );
+      callback && callback(geojs);
+    };
+
+    const removeLayers = ids => {
+      let { getLayers, removeAllLayer, removeLayer: removeLayerL7 } = newfiberMap_risk;
+      let { getLayer, removeLayer } = map;
+
+      if (!!!ids) {
+        allData.layerIds.forEach(id => getLayer(id) && removeLayer(id));
+        return removeAllLayer();
+      }
+
+      ids.forEach(id => {
+        getLayer(id) && removeLayer(id);
+        getLayers().forEach(layer => layer.newfiberId == id && removeLayerL7(layer));
       });
+    };
+
+    const removeMapDatas = types => {
+      !!!types
+        ? Object.keys(geojson).forEach(key => (geojson[key].features.length = 0))
+        : Object.keys(geojson).forEach(
+            key => (geojson[key].features = geojson[key].features.filter(feature => !types.includes(feature.properties.type)))
+          );
+      return refreshGeoJSON();
+    };
+
+    const setLegendData = list => {
+      list.forEach(i => {
+        i.data &&
+          i.data.features &&
+          i.data.features.forEach(a => {
+            if (!!!a || !!!a.properties) return;
+            a.properties.type = a.properties.type || i.layername;
+            a.properties.name =
+              a.properties.name ||
+              a.properties.Name ||
+              a.properties.stName ||
+              a.properties.roadName ||
+              a.properties.sewageName ||
+              a.properties.sectionName ||
+              a.properties.pumpName ||
+              a.properties.projectName;
+          });
+      });
+
+      let types = {};
+      list
+        .map(i => i.data && i.data.features)
+        .filter(Boolean)
+        .flat(Infinity)
+        .forEach(feature => {
+          if (!!!feature || !!!feature.properties) return;
+          feature.properties.geometry = Terraformer.WKT.convert(feature.geometry);
+          let type = feature.geometry.type.toLocaleLowerCase();
+          let flag = type.includes('multi');
+          type = type.replaceAll('multi', '');
+          let features = null;
+          if (flag) features = turf.flatten(feature).features;
+          !!!types[type] && (types[type] = []);
+          types[type].push(...(features ? features : [feature]));
+        });
+      Object.keys(types).forEach(key => geojson[key].features.push(...types[key]));
+      refreshGeoJSON();
+    };
+
+    const refreshGeoJSON = () => {
+      Object.keys(geojson).forEach(key => map.getSource(key) && map.getSource(key).setData(geojson[key]));
+    };
+
+    const setGeoJSON = ({ json, key }) => {
+      // geojson[key] = json;
+      let layer = newfiberMap_risk.getLayers().filter(i => i.newfiberId == key)[0];
+      if (!!!layer) {
+        layer = newfiberMap_risk.unLoadLayers.filter(i => i.newfiberId == key)[0];
+        layer && newfiberMap_risk.addLayer(layer);
+      }
+      if (layer) layer.setData(json);
+      setLegendData([{ data: json, layername: key, type: 'point' }]);
+    };
+
+    const setLayerOrder = (sourceLayer, targetLayer) => {
+      map.moveLayer(sourceLayer, targetLayer);
+    };
+
+    const setHighlight = (features = {}) => {
+      let array = {};
+      features = features.forEach ? features : [features];
+      Object.values(highlightLayers).forEach(layer => layer.setData && layer.setData({ type: 'FeatureCollection', features: [] }));
+      features.forEach(feature => {
+        if (!!!feature || !Boolean(Object.keys(feature).length) || !feature.properties.geometry) return;
+        let geometry = Terraformer.WKT.parse(feature.properties.geometry);
+        let geoFeature = turf.feature(geometry, feature.properties);
+        let type = geometry.type.toLocaleLowerCase().replaceAll('multi', '');
+        let key = Object.keys(highlightLayers).filter(key => key.lastIndexOf(type) > -1)[0];
+        if (!array[key]) array[key] = [];
+        array[key].push(geoFeature);
+      });
+      Object.keys(array).forEach(
+        key => highlightLayers[key] && highlightLayers[key].setData({ type: 'FeatureCollection', features: array[key] })
+      );
+    };
+
+    const getLayerIdByClick = () => {
+      map.getStyle().layers.forEach(i =>
+        map.on('click', i.id, (a, b, c, d) => {
+          console.log('layer-id', a.features[0].layer.id);
+        })
+      );
+    };
+
+    //添加政区边界
+    const addAreaBoundary = () => {
+      !!!map.getSource('kaifengAllBoundary') && map.addSource('kaifengAllBoundary', { type: 'geojson', data: kaifengAllBoundary });
+      !!!map.getLayer('kaifengAllBoundary') &&
+        map.addLayer({
+          id: 'kaifengAllBoundary',
+          type: 'line',
+          source: 'kaifengAllBoundary',
+
+          paint: {
+            'line-color': 'rgba(255,208,76,1)',
+            'line-width': 6,
+          },
+        });
+      !!!map.getSource('kaiFengCenteralBoundary') &&
+        map.addSource('kaiFengCenteralBoundary', { type: 'geojson', data: kaiFengCenteralBoundary });
+      !!!map.getLayer('kaiFengCenteralBoundary') &&
+        map.addLayer({
+          id: 'kaiFengCenteralBoundary',
+          type: 'line',
+          source: 'kaiFengCenteralBoundary',
+
+          paint: {
+            'line-color': 'rgba(228,64,50,1)',
+            'line-width': 6,
+          },
+        });
+    };
+    //添加河流标注
+    const addWaterLabel = () => {
+      !!!map.getSource('kaifengWaterLabel1') && map.addSource('kaifengWaterLabel1', { type: 'geojson', data: kaifengWaterLabel1 });
+      !!!map.getLayer('kaifengWaterLabel1') &&
+        map.addLayer({
+          id: 'kaifengWaterLabel1',
+          type: 'symbol',
+          source: 'kaifengWaterLabel1',
+          layout: {
+            'text-field': ['get', 'name'],
+            'text-font': ['KlokanTech Noto Sans Regular'],
+            'text-transform': 'uppercase',
+          },
+          paint: {
+            'text-halo-color': 'rgba(238, 251, 255,1)',
+            'text-color': 'rgba(30, 30, 30,1)',
+            'icon-opacity': 1,
+            'text-halo-width': 1,
+          },
+        });
+      !!!map.getSource('kaifengWaterLabel2') && map.addSource('kaifengWaterLabel2', { type: 'geojson', data: kaifengWater });
+      !!!map.getLayer('kaifengWaterLabel2') &&
+        map.addLayer({
+          id: 'kaifengWaterLabel2',
+          type: 'symbol',
+          source: 'kaifengWaterLabel2',
+          layout: {
+            'symbol-placement': 'line',
+            'text-field': ['get', 'name'],
+            'text-font': ['KlokanTech Noto Sans Regular'],
+            'text-letter-spacing': 0.1,
+            'text-rotation-alignment': 'map',
+            'text-size': {
+              base: 1.4,
+              stops: [
+                [10, 16],
+                [20, 22],
+              ],
+            },
+            'text-transform': 'uppercase',
+          },
+          paint: {
+            'text-halo-color': 'rgba(238, 251, 255,1)',
+            'text-color': 'rgba(30, 30, 30,1)',
+            'icon-opacity': 1,
+            'text-halo-width': 1,
+          },
+        });
+    };
+    //添加河道流向
+    const addRiverFlow = () => {
+      let layer = new mapboxL7.LineLayer({})
+        .source(riverFlow)
+        .size(6)
+        .shape('line')
+        .texture('arrow')
+        .color('rgb(117, 207, 240)')
+        .animate({
+          interval: 1, // 间隔
+          duration: 1.5, // 持续时间，延时
+          trailLength: 2, // 流线长度
+        })
+        .style({
+          opacity: 0.6,
+          lineTexture: true, // 开启线的贴图功能
+          iconStep: 200, // 设置贴图纹理的间距
+          borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
+          borderColor: '#fff', // 默认为 #ccc
+        });
+      newfiberMap_risk.addLayer(layer);
+    };
+    onMounted(() => {
+      initeMap();
+      bus.on('setLayerVisible', setLayerVisible);
+      bus.on('setLegendData', setLegendData);
+      bus.on('setGeoJSON', setGeoJSON);
+      bus.on('getGeojsonByType', getGeojsonByType);
+      bus.on('removeLayers', removeLayers);
+      bus.on('removeMapDatas', removeMapDatas);
+      bus.on('setHighlight', setHighlight);
     });
-    onBeforeUnmount(() => {});
+
+    onBeforeUnmount(() => {
+      bus.off('setLayerVisible');
+      bus.off('setLegendData');
+      bus.off('setGeoJSON');
+      bus.off('getGeojsonByType');
+      bus.off('removeMapDatas');
+      bus.off('setHighlight');
+      newfiberMap_risk.destroy();
+      newfiberMap_risk = null;
+    });
+
     return {
       ...toRefs(allData),
       initeMap,
@@ -40,7 +504,7 @@
 };
 </script>
 <style lang="scss">
-.mapPage {
+.mapPage_risk {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -48,15 +512,16 @@
   top: 0px;
   z-index: 10;
   background: lavender;
-  #cesiumContainer {
+  #mapboxContainer_risk {
     width: 100%;
     height: 100%;
     position: absolute;
   }
-  .coordinateContainer {
-    position: absolute;
-    left: 20px;
-    bottom: 30px;
+  .l7-control-mouse-location {
+    background: none;
+  }
+  .l7-control-mouse-location {
+    color: #ffffff;
   }
 }
 </style>
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index e6c4170..1474319 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -121,7 +121,9 @@
     <img src="@/assets/newImgs/HMScreen/headLight.png" alt="" class="bottomLightDXR" />
 
     <!-- 三维管网弹窗 -->
-    <el-dialog v-model="showPipe" title="三维管网" width="1600px" append-to-body></el-dialog>
+    <el-dialog v-model="showPipe" title="三维管网" style="width: 1600px; height: 700px" @close="closePipe" append-to-body>
+      <GisMapMF style="position: relative"></GisMapMF>
+    </el-dialog>
   </div>
 </template>
 
@@ -176,7 +178,9 @@
   //NewFiberMapUtils.removeByIds(Object.values(NewFiberMapUtils.defaultParams.keys));
   if (id == 4) {
   }
-  if (id == 5) NewFiberMapUtils.defaultPatrolDemo(newfiberMap);
+  if (id == 5) {
+    //  NewFiberMapUtils.defaultPatrolDemo(newfiberMap);
+  }
 }
 // 图例控制
 function controlLegend() {
@@ -232,6 +236,22 @@
   // console.log('point', point);
   // console.log('鼠标移出--', properties);
 };
+//关闭三维管网弹窗
+const closePipe = () => {
+  if (newfiberMap) {
+    let _originalGLContext = newfiberMap.getMap().scene?.context._originalGLContext;
+    newfiberMap.getMap().imageryLayers.removeAll();
+    newfiberMap.getMap().entities.removeAll();
+    newfiberMap.getMap().scene.primitives.removeAll();
+    newfiberMap.getMap().destroy();
+    if (_originalGLContext) {
+      _originalGLContext.getExtension('WEBGL_lose_context').loseContext();
+      _originalGLContext = null;
+    }
+    newfiberMap.baseMap.map = null;
+    newfiberMap = null;
+  }
+};
 onMounted(() => {
   getWeather();
   // 获取项目片区点击
@@ -241,20 +261,20 @@
 });
 onBeforeUnmount(() => {
   bus.off('checkProjectArea');
-  // if (!newfiberMap) return;
-  // if (newfiberMap) {
-  //   let _originalGLContext = newfiberMap.getMap().scene?.context._originalGLContext;
-  //   newfiberMap.getMap().imageryLayers.removeAll();
-  //   newfiberMap.getMap().entities.removeAll();
-  //   newfiberMap.getMap().scene.primitives.removeAll();
-  //   newfiberMap.getMap().destroy();
-  //   if (_originalGLContext) {
-  //     _originalGLContext.getExtension('WEBGL_lose_context').loseContext();
-  //     _originalGLContext = null;
-  //   }
-  //   newfiberMap.baseMap.map = null;
-  //   newfiberMap = null;
-  // }
+  if (!newfiberMap) return;
+  if (newfiberMap) {
+    let _originalGLContext = newfiberMap.getMap().scene?.context._originalGLContext;
+    newfiberMap.getMap().imageryLayers.removeAll();
+    newfiberMap.getMap().entities.removeAll();
+    newfiberMap.getMap().scene.primitives.removeAll();
+    newfiberMap.getMap().destroy();
+    if (_originalGLContext) {
+      _originalGLContext.getExtension('WEBGL_lose_context').loseContext();
+      _originalGLContext = null;
+    }
+    newfiberMap.baseMap.map = null;
+    newfiberMap = null;
+  }
 });
 </script>
 

diff --git a/src/assets/geojson/kaifeng/track.json b/src/assets/geojson/kaifeng/track.json
new file mode 100644
index 0000000..0b513ca
--- /dev/null
+++ b/src/assets/geojson/kaifeng/track.json
@@ -0,0 +1,87 @@
+{
+    "type": "FeatureCollection",
+    "features": [
+        {
+            "type": "Feature",
+            "properties": {
+                "fillcolor": "rgba(82, 214, 108,1)"
+            },
+            "geometry": {
+                "type": "LineString",
+                "coordinates": [
+                    [
+                        114.35720775300125,
+                        34.794029555366635
+                    ],
+                    [
+                        114.35723116921616,
+                        34.79331536081194
+                    ],
+                    [
+                        114.35741459623294,
+                        34.792367004108165
+                    ],
+                    [
+                        114.35757070433233,
+                        34.79176598792552
+                    ],
+                    [
+                        114.3567355260006,
+                        34.79178940414043
+                    ],
+                    [
+                        114.35661063952115,
+                        34.79070640420094
+                    ],
+                    [
+                        114.35428658019148,
+                        34.790817631221735
+                    ],
+                    [
+                        114.3540290018275,
+                        34.78942826913719
+                    ],
+                    [
+                        114.35312357485105,
+                        34.783878626203986
+                    ],
+                    [
+                        114.35297527215664,
+                        34.782598539789014
+                    ],
+                    [
+                        114.35307674242124,
+                        34.78218485332564
+                    ]
+                ]
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "fillcolor": "rgba(82, 214, 108,1)"
+            },
+            "geometry": {
+                "type": "LineString",
+                "coordinates": [
+                    [
+                        114.31333162031727,
+                        34.77774357789805
+                    ],
+                    [
+                        114.3249928953415,
+                        34.77688498335142
+                    ],
+                    [
+                        114.33248608411208,
+                        34.77629177257375
+                    ],
+                    [
+                        114.33371933809724,
+                        34.784003512683476
+                    ]
+                ]
+            }
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/assets/newImgs/car.png b/src/assets/newImgs/car.png
new file mode 100644
index 0000000..e9eb325
--- /dev/null
+++ b/src/assets/newImgs/car.png
Binary files differ
diff --git a/src/views/floodSys/floodYP/riskGisMap.vue b/src/views/floodSys/floodYP/riskGisMap.vue
index 48da94c..8033af8 100644
--- a/src/views/floodSys/floodYP/riskGisMap.vue
+++ b/src/views/floodSys/floodYP/riskGisMap.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script setup name="riskMapGis">
-import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
+import MapBox from '@/views/gisMapPage/gisMapBox'; //gis地图
 const { proxy } = getCurrentInstance();
 const allData = reactive({});
 const emits = defineEmits();
diff --git a/src/views/gisMapPage/gisMapBox.vue b/src/views/gisMapPage/gisMapBox.vue
index e67005e..4cb6ef1 100644
--- a/src/views/gisMapPage/gisMapBox.vue
+++ b/src/views/gisMapPage/gisMapBox.vue
@@ -1,37 +1,501 @@
 <template>
-  <div class="mapPage">
-    <div id="cesiumContainer"></div>
+  <div class="mapPage_risk">
+    <div id="mapboxContainer_risk"></div>
   </div>
 </template>
 <script>
-import { reactive, toRefs, onBeforeMount, onMounted, nextTick, onBeforeUnmount } from 'vue';
-import NewFiberMapOperate from './gisMapFunction';
-import axios from 'axios';
 import bus from '@/bus';
+import axios from 'axios';
+import kaifengWaterLabel1 from '@/assets/geojson/kaifeng/kaifengWaterLabel1.json';
+import kaifengWater from '@/assets/geojson/kaifeng/kaifengWater.json';
+import kaifengAllBoundary from '@/assets/geojson/kaifeng/kaifengAllBoundary.json';
+import kaiFengCenteralBoundary from '@/assets/geojson/kaifeng/kaiFengCenteralBoundary.json';
+import riverFlow from '@/assets/geojson/kaifeng/riverFlow.json';
+
 export default {
   components: {},
-  props: {},
-  setup(props) {
+  props: {
+    initJson: {
+      type: String,
+      default: () => '/static/libs/mapbox/style/floodOneMap.json',
+    },
+    loadCallback: {
+      type: Function,
+      default: () => function () {},
+    },
+  },
+  setup(props, event) {
     const allData = reactive({
-      movePosition: '113.934113,30.872118',
+      layerIds: [],
     });
+    let geojson = {
+      point: { type: 'FeatureCollection', features: [] },
+      polygon: { type: 'FeatureCollection', features: [] },
+      linestring: { type: 'FeatureCollection', features: [] },
+    };
+    let map = null;
+    let config = null;
+    let highlightLayers = {
+      highlight_point: 1,
+      //highlight_point1: 1,
+      highlight_polygon: 1,
+      highlight_linestring: 1,
+    };
     const initeMap = async () => {
-      window.newfiberMap = new NewFiberMapOperate('cesiumContainer', {
-        pitch: 55,
-        lng: 113.953,
-        lat: 30.906,
+      config = (await axios.get(props.initJson)).data;
+      let { sprites, l7 } = config.params;
+
+      window.newfiberMap_risk = new mapboxL7.Scene({
+        id: 'mapboxContainer_risk',
+        map: new mapboxL7.Mapbox({
+          style: config.params.init.style,
+          center: config.params.init.center,
+          zoom: config.params.init.zoom,
+        }),
       });
-      newfiberMap.map.on('mousemove', function (e) {
-        let movePosition = gcoord.transform(turf.point([e.lngLat.lng, e.lngLat.lat]), gcoord.GCJ02, gcoord.WGS84);
-        allData.movePosition = `${movePosition.geometry.coordinates[0].toFixed(6)},${movePosition.geometry.coordinates[1].toFixed(6)}`;
+      newfiberMap_risk.map.load = false;
+      map = newfiberMap_risk.map;
+      map.ogcLayers = [];
+      newfiberMap_risk.unLoadLayers = [];
+      (sprites || []).forEach(url => {
+        map.style._loadSprite(url.includes('http') ? url : window.location.href.split('#')[0] + url);
+      });
+      ((l7 || []).images || []).forEach(item =>
+        newfiberMap_risk.addImage(item.name, item.url.includes('http') ? item.url : window.location.href.split('#')[0] + item.url)
+      );
+      setTimeout(() => {
+        map.on('load', async () => {
+          const mouseLocation = new mapboxL7.MouseLocation({
+            transform: position => {
+              return [position[0].toFixed(6), position[1].toFixed(6)];
+            },
+          });
+          newfiberMap_risk.addControl(mouseLocation);
+          // !!!map.getSource('kaifengWater') && map.addSource('kaifengWater', { type: 'geojson', data: kaifengWater });
+          // !!!map.getLayer('kaifengWater') &&
+          //   map.addLayer({
+          //     id: 'kaifengWater',
+          //     type: 'fill',
+          //     source: 'kaifengWater',
+          //     paint: {
+          //       'fill-color': 'rgba(117, 207, 240,1)',
+          //     },
+          //   });
+          //addRiverFlow();
+          addWaterLabel();
+          //addAreaBoundary();
+          await loadData();
+
+          props.loadCallback && props.loadCallback();
+          // getLayerIdByClick();
+          (config.orders || []).forEach(item => setLayerOrder(...item));
+          newfiberMap_risk.getLayers().filter(i => highlightLayers[i.newfiberId] && (highlightLayers[i.newfiberId] = i));
+          // let timeout = setTimeout(() => {
+          let { pitch, center } = config.params.init;
+          pitch && newfiberMap_risk.map.setPitch(pitch);
+          center && newfiberMap_risk.map.setCenter(center);
+          //clearTimeout(timeout);
+          //}, 1000);
+          newfiberMap_risk.map.load = true;
+        });
+      }, 200);
+
+      let layerIds = (config.mapbox || []).map(i => i.id);
+      map.on('click', e => {
+        Object.values(highlightLayers).forEach(layer => {
+          if (layer.setData) layer.setData({ type: 'FeatureCollection', features: [] });
+        });
+        const feature = (
+          map.queryRenderedFeatures([
+            [e.point.x - 10 / 2, e.point.y - 10 / 2],
+            [e.point.x + 10 / 2, e.point.y + 10 / 2],
+          ]) || []
+        ).filter(i => layerIds.includes(i.layer.id) || i.layer.id == 'rainStation')[0];
+        if (feature) event.emit('map-click', Object.values(e.lngLat), feature.properties);
+        setHighlight(feature);
+      });
+      map.on('mouseenter', 'point', e => {
+        Object.values(highlightLayers).forEach(layer => {
+          if (layer.setData) layer.setData({ type: 'FeatureCollection', features: [] });
+        });
+        const feature = (
+          map.queryRenderedFeatures([
+            [e.point.x - 10 / 2, e.point.y - 10 / 2],
+            [e.point.x + 10 / 2, e.point.y + 10 / 2],
+          ]) || []
+        ).filter(i => layerIds.includes(i.layer.id))[0];
+        if (feature) event.emit('map-moveOn', Object.values(e.lngLat), feature.properties);
+        setHighlight(feature);
+      });
+      map.on('mouseleave', 'point', e => {
+        Object.values(highlightLayers).forEach(layer => {
+          if (layer.setData) layer.setData({ type: 'FeatureCollection', features: [] });
+        });
+        const feature = (
+          map.queryRenderedFeatures([
+            [e.point.x - 10 / 2, e.point.y - 10 / 2],
+            [e.point.x + 10 / 2, e.point.y + 10 / 2],
+          ]) || []
+        ).filter(i => layerIds.includes(i.layer.id))[0];
+        if (feature) event.emit('map-moveLeave', Object.values(e.lngLat), feature.properties);
       });
     };
-    onMounted(() => {
-      nextTick(() => {
-        initeMap();
+
+    const loadData = async () => {
+      let { mapbox, l7, ogc } = config;
+      if (mapbox)
+        //用mapbox添加水系
+        //axios.get(config.params.mvt + `/v1/geojson/hubei_xiaogan_water1`).then(({ data: geojson }) => {
+
+        // });
+        mapbox.forEach(item => {
+          let { mType, columns } = item;
+          let params = '';
+          if (columns) params = `?columns=${columns}`;
+          if (!!!map.getSource(item.id)) {
+            let flag = mType == 'geojson';
+            flag
+              ? map.addSource(item.id, {
+                  type: mType,
+                  data: geojson[item.id],
+                })
+              : map.addSource(item.id, {
+                  type: 'vector',
+                  tiles: [config.params.mvt + `/v1/${mType}/${item.key}/{z}/{x}/{y}` + params],
+                  tileSize: 512,
+                  scheme: 'xyz',
+                  maxzoom: 14,
+                  minzoom: 1,
+                });
+          }
+          map.addLayer({ ...item, source: item.id });
+          map.moveLayer(item.id, undefined);
+          allData.layerIds.push(item.id);
+        });
+      if (l7) {
+        if (!!!l7.length) return;
+        l7.forEach(item => {
+          let { id, columns, filter } = item;
+          let params = '';
+          if (columns) params += `columns=${columns}&`;
+          if (filter) params += `filter=${filter}&`;
+          id
+            ? axios.get(config.params.mvt + `/v1/geojson/${id}?` + params).then(({ data: geojson }) => initMapBoxL7Class(item, geojson))
+            : initMapBoxL7Class(item, geojson[item.key] || turf.featureCollection([]));
+        });
+      }
+      if (ogc)
+        ogc.forEach(item => {
+          let { id, type, params, methods } = item;
+          Object.keys(params).forEach(
+            i => (params[i] = typeof params[i] == 'string' ? (params[i].includes('||') ? eval(params[i]) : params[i]) : params[i])
+          );
+          let layer = new mapboxgl1[type](params);
+          layer.newfiberId = id;
+          methods.forEach(method => {
+            let ms = method.params.map(i => (typeof i == 'string' ? (i.includes('||') ? eval(i) : i) : i));
+            layer[method.name](...ms);
+          });
+          map.ogcLayers.push(layer);
+        });
+
+      function initMapBoxL7Class({ type, params, methods, id, show, key }, geojson) {
+        let layer = new mapboxL7[type](params).source(geojson);
+        methods.forEach(method => {
+          let ms = method.params.map(i => (typeof i == 'string' ? (i.includes('||') ? eval(i) : i) : i));
+          layer[method.name](...ms);
+        });
+        layer.newfiberId = key;
+        if (!show) return newfiberMap_risk.unLoadLayers.push(layer);
+        newfiberMap_risk.addLayer(layer);
+        allData.layerIds.push(key);
+      }
+    };
+
+    const setLayerVisible = ({ layername, isCheck }) => {
+      if (!!!window.newfiberMap_risk) return;
+      console.log('layername---', layername);
+      if (((config || {}).filter || {})[layername]) {
+        config.filter[layername].layerName.forEach((name, index) => {
+          let filter = map.getFilter(name);
+          let fValues = config.filter[layername].filter[index];
+          isCheck ? filter.push(...fValues) : (filter = filter.filter(i => !fValues.includes(i)));
+          map.setFilter(name, filter);
+        });
+        return config.filter[layername].easeTo && isCheck && map.easeTo(config.filter[layername].easeTo);
+      }
+      let features = Object.values(geojson)
+        .map(i => i.features)
+        .flat(Infinity)
+        .filter(i => i.properties.type == layername);
+      if (features.length) {
+        let types = Array.from(new Set(features.map(i => i.geometry.type.toLocaleLowerCase())));
+        types.forEach(type1 => {
+          if (map.getLayer(type1)) {
+            let filter = map.getFilter(type1);
+            if (!!!filter) return;
+            isCheck ? filter.push(layername) : (filter = filter.filter(i => i != layername));
+
+            map.setFilter(type1, filter);
+          }
+        });
+      }
+      let layer = newfiberMap_risk.getLayers().filter(i => i.newfiberId == layername)[0];
+      if (!!!layer) {
+        layer = newfiberMap_risk.unLoadLayers.filter(i => i.newfiberId == layername)[0];
+        isCheck && layer && newfiberMap_risk.addLayer(layer);
+      }
+      layer && layer[['hide', 'show'][Number(isCheck)]]();
+
+      layer = map.getLayer(layername);
+      layer && map.setLayoutProperty(layername, 'visibility', isCheck ? 'visible' : 'none');
+
+      layer = map.getLayer(layername + '_text');
+      layer && map.setLayoutProperty(layername, 'visibility', isCheck ? 'visible' : 'none');
+
+      layer = map.ogcLayers.filter(i => i.id == layername)[0];
+      layer && (layer.map ? layer[isCheck ? 'show' : 'hide']() : layer.addTo(map));
+    };
+
+    const getGeojsonByType = ({ type, callback }) => {
+      let geojs = turf.featureCollection(
+        Object.values(geojson)
+          .map(i => i.features)
+          .flat(Infinity)
+          .filter(i => i.properties.type == type)
+      );
+      callback && callback(geojs);
+    };
+
+    const removeLayers = ids => {
+      let { getLayers, removeAllLayer, removeLayer: removeLayerL7 } = newfiberMap_risk;
+      let { getLayer, removeLayer } = map;
+
+      if (!!!ids) {
+        allData.layerIds.forEach(id => getLayer(id) && removeLayer(id));
+        return removeAllLayer();
+      }
+
+      ids.forEach(id => {
+        getLayer(id) && removeLayer(id);
+        getLayers().forEach(layer => layer.newfiberId == id && removeLayerL7(layer));
       });
+    };
+
+    const removeMapDatas = types => {
+      !!!types
+        ? Object.keys(geojson).forEach(key => (geojson[key].features.length = 0))
+        : Object.keys(geojson).forEach(
+            key => (geojson[key].features = geojson[key].features.filter(feature => !types.includes(feature.properties.type)))
+          );
+      return refreshGeoJSON();
+    };
+
+    const setLegendData = list => {
+      list.forEach(i => {
+        i.data &&
+          i.data.features &&
+          i.data.features.forEach(a => {
+            if (!!!a || !!!a.properties) return;
+            a.properties.type = a.properties.type || i.layername;
+            a.properties.name =
+              a.properties.name ||
+              a.properties.Name ||
+              a.properties.stName ||
+              a.properties.roadName ||
+              a.properties.sewageName ||
+              a.properties.sectionName ||
+              a.properties.pumpName ||
+              a.properties.projectName;
+          });
+      });
+
+      let types = {};
+      list
+        .map(i => i.data && i.data.features)
+        .filter(Boolean)
+        .flat(Infinity)
+        .forEach(feature => {
+          if (!!!feature || !!!feature.properties) return;
+          feature.properties.geometry = Terraformer.WKT.convert(feature.geometry);
+          let type = feature.geometry.type.toLocaleLowerCase();
+          let flag = type.includes('multi');
+          type = type.replaceAll('multi', '');
+          let features = null;
+          if (flag) features = turf.flatten(feature).features;
+          !!!types[type] && (types[type] = []);
+          types[type].push(...(features ? features : [feature]));
+        });
+      Object.keys(types).forEach(key => geojson[key].features.push(...types[key]));
+      refreshGeoJSON();
+    };
+
+    const refreshGeoJSON = () => {
+      Object.keys(geojson).forEach(key => map.getSource(key) && map.getSource(key).setData(geojson[key]));
+    };
+
+    const setGeoJSON = ({ json, key }) => {
+      // geojson[key] = json;
+      let layer = newfiberMap_risk.getLayers().filter(i => i.newfiberId == key)[0];
+      if (!!!layer) {
+        layer = newfiberMap_risk.unLoadLayers.filter(i => i.newfiberId == key)[0];
+        layer && newfiberMap_risk.addLayer(layer);
+      }
+      if (layer) layer.setData(json);
+      setLegendData([{ data: json, layername: key, type: 'point' }]);
+    };
+
+    const setLayerOrder = (sourceLayer, targetLayer) => {
+      map.moveLayer(sourceLayer, targetLayer);
+    };
+
+    const setHighlight = (features = {}) => {
+      let array = {};
+      features = features.forEach ? features : [features];
+      Object.values(highlightLayers).forEach(layer => layer.setData && layer.setData({ type: 'FeatureCollection', features: [] }));
+      features.forEach(feature => {
+        if (!!!feature || !Boolean(Object.keys(feature).length) || !feature.properties.geometry) return;
+        let geometry = Terraformer.WKT.parse(feature.properties.geometry);
+        let geoFeature = turf.feature(geometry, feature.properties);
+        let type = geometry.type.toLocaleLowerCase().replaceAll('multi', '');
+        let key = Object.keys(highlightLayers).filter(key => key.lastIndexOf(type) > -1)[0];
+        if (!array[key]) array[key] = [];
+        array[key].push(geoFeature);
+      });
+      Object.keys(array).forEach(
+        key => highlightLayers[key] && highlightLayers[key].setData({ type: 'FeatureCollection', features: array[key] })
+      );
+    };
+
+    const getLayerIdByClick = () => {
+      map.getStyle().layers.forEach(i =>
+        map.on('click', i.id, (a, b, c, d) => {
+          console.log('layer-id', a.features[0].layer.id);
+        })
+      );
+    };
+
+    //添加政区边界
+    const addAreaBoundary = () => {
+      !!!map.getSource('kaifengAllBoundary') && map.addSource('kaifengAllBoundary', { type: 'geojson', data: kaifengAllBoundary });
+      !!!map.getLayer('kaifengAllBoundary') &&
+        map.addLayer({
+          id: 'kaifengAllBoundary',
+          type: 'line',
+          source: 'kaifengAllBoundary',
+
+          paint: {
+            'line-color': 'rgba(255,208,76,1)',
+            'line-width': 6,
+          },
+        });
+      !!!map.getSource('kaiFengCenteralBoundary') &&
+        map.addSource('kaiFengCenteralBoundary', { type: 'geojson', data: kaiFengCenteralBoundary });
+      !!!map.getLayer('kaiFengCenteralBoundary') &&
+        map.addLayer({
+          id: 'kaiFengCenteralBoundary',
+          type: 'line',
+          source: 'kaiFengCenteralBoundary',
+
+          paint: {
+            'line-color': 'rgba(228,64,50,1)',
+            'line-width': 6,
+          },
+        });
+    };
+    //添加河流标注
+    const addWaterLabel = () => {
+      !!!map.getSource('kaifengWaterLabel1') && map.addSource('kaifengWaterLabel1', { type: 'geojson', data: kaifengWaterLabel1 });
+      !!!map.getLayer('kaifengWaterLabel1') &&
+        map.addLayer({
+          id: 'kaifengWaterLabel1',
+          type: 'symbol',
+          source: 'kaifengWaterLabel1',
+          layout: {
+            'text-field': ['get', 'name'],
+            'text-font': ['KlokanTech Noto Sans Regular'],
+            'text-transform': 'uppercase',
+          },
+          paint: {
+            'text-halo-color': 'rgba(238, 251, 255,1)',
+            'text-color': 'rgba(30, 30, 30,1)',
+            'icon-opacity': 1,
+            'text-halo-width': 1,
+          },
+        });
+      !!!map.getSource('kaifengWaterLabel2') && map.addSource('kaifengWaterLabel2', { type: 'geojson', data: kaifengWater });
+      !!!map.getLayer('kaifengWaterLabel2') &&
+        map.addLayer({
+          id: 'kaifengWaterLabel2',
+          type: 'symbol',
+          source: 'kaifengWaterLabel2',
+          layout: {
+            'symbol-placement': 'line',
+            'text-field': ['get', 'name'],
+            'text-font': ['KlokanTech Noto Sans Regular'],
+            'text-letter-spacing': 0.1,
+            'text-rotation-alignment': 'map',
+            'text-size': {
+              base: 1.4,
+              stops: [
+                [10, 16],
+                [20, 22],
+              ],
+            },
+            'text-transform': 'uppercase',
+          },
+          paint: {
+            'text-halo-color': 'rgba(238, 251, 255,1)',
+            'text-color': 'rgba(30, 30, 30,1)',
+            'icon-opacity': 1,
+            'text-halo-width': 1,
+          },
+        });
+    };
+    //添加河道流向
+    const addRiverFlow = () => {
+      let layer = new mapboxL7.LineLayer({})
+        .source(riverFlow)
+        .size(6)
+        .shape('line')
+        .texture('arrow')
+        .color('rgb(117, 207, 240)')
+        .animate({
+          interval: 1, // 间隔
+          duration: 1.5, // 持续时间，延时
+          trailLength: 2, // 流线长度
+        })
+        .style({
+          opacity: 0.6,
+          lineTexture: true, // 开启线的贴图功能
+          iconStep: 200, // 设置贴图纹理的间距
+          borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
+          borderColor: '#fff', // 默认为 #ccc
+        });
+      newfiberMap_risk.addLayer(layer);
+    };
+    onMounted(() => {
+      initeMap();
+      bus.on('setLayerVisible', setLayerVisible);
+      bus.on('setLegendData', setLegendData);
+      bus.on('setGeoJSON', setGeoJSON);
+      bus.on('getGeojsonByType', getGeojsonByType);
+      bus.on('removeLayers', removeLayers);
+      bus.on('removeMapDatas', removeMapDatas);
+      bus.on('setHighlight', setHighlight);
     });
-    onBeforeUnmount(() => {});
+
+    onBeforeUnmount(() => {
+      bus.off('setLayerVisible');
+      bus.off('setLegendData');
+      bus.off('setGeoJSON');
+      bus.off('getGeojsonByType');
+      bus.off('removeMapDatas');
+      bus.off('setHighlight');
+      newfiberMap_risk.destroy();
+      newfiberMap_risk = null;
+    });
+
     return {
       ...toRefs(allData),
       initeMap,
@@ -40,7 +504,7 @@
 };
 </script>
 <style lang="scss">
-.mapPage {
+.mapPage_risk {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -48,15 +512,16 @@
   top: 0px;
   z-index: 10;
   background: lavender;
-  #cesiumContainer {
+  #mapboxContainer_risk {
     width: 100%;
     height: 100%;
     position: absolute;
   }
-  .coordinateContainer {
-    position: absolute;
-    left: 20px;
-    bottom: 30px;
+  .l7-control-mouse-location {
+    background: none;
+  }
+  .l7-control-mouse-location {
+    color: #ffffff;
   }
 }
 </style>
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index e6c4170..1474319 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -121,7 +121,9 @@
     <img src="@/assets/newImgs/HMScreen/headLight.png" alt="" class="bottomLightDXR" />
 
     <!-- 三维管网弹窗 -->
-    <el-dialog v-model="showPipe" title="三维管网" width="1600px" append-to-body></el-dialog>
+    <el-dialog v-model="showPipe" title="三维管网" style="width: 1600px; height: 700px" @close="closePipe" append-to-body>
+      <GisMapMF style="position: relative"></GisMapMF>
+    </el-dialog>
   </div>
 </template>
 
@@ -176,7 +178,9 @@
   //NewFiberMapUtils.removeByIds(Object.values(NewFiberMapUtils.defaultParams.keys));
   if (id == 4) {
   }
-  if (id == 5) NewFiberMapUtils.defaultPatrolDemo(newfiberMap);
+  if (id == 5) {
+    //  NewFiberMapUtils.defaultPatrolDemo(newfiberMap);
+  }
 }
 // 图例控制
 function controlLegend() {
@@ -232,6 +236,22 @@
   // console.log('point', point);
   // console.log('鼠标移出--', properties);
 };
+//关闭三维管网弹窗
+const closePipe = () => {
+  if (newfiberMap) {
+    let _originalGLContext = newfiberMap.getMap().scene?.context._originalGLContext;
+    newfiberMap.getMap().imageryLayers.removeAll();
+    newfiberMap.getMap().entities.removeAll();
+    newfiberMap.getMap().scene.primitives.removeAll();
+    newfiberMap.getMap().destroy();
+    if (_originalGLContext) {
+      _originalGLContext.getExtension('WEBGL_lose_context').loseContext();
+      _originalGLContext = null;
+    }
+    newfiberMap.baseMap.map = null;
+    newfiberMap = null;
+  }
+};
 onMounted(() => {
   getWeather();
   // 获取项目片区点击
@@ -241,20 +261,20 @@
 });
 onBeforeUnmount(() => {
   bus.off('checkProjectArea');
-  // if (!newfiberMap) return;
-  // if (newfiberMap) {
-  //   let _originalGLContext = newfiberMap.getMap().scene?.context._originalGLContext;
-  //   newfiberMap.getMap().imageryLayers.removeAll();
-  //   newfiberMap.getMap().entities.removeAll();
-  //   newfiberMap.getMap().scene.primitives.removeAll();
-  //   newfiberMap.getMap().destroy();
-  //   if (_originalGLContext) {
-  //     _originalGLContext.getExtension('WEBGL_lose_context').loseContext();
-  //     _originalGLContext = null;
-  //   }
-  //   newfiberMap.baseMap.map = null;
-  //   newfiberMap = null;
-  // }
+  if (!newfiberMap) return;
+  if (newfiberMap) {
+    let _originalGLContext = newfiberMap.getMap().scene?.context._originalGLContext;
+    newfiberMap.getMap().imageryLayers.removeAll();
+    newfiberMap.getMap().entities.removeAll();
+    newfiberMap.getMap().scene.primitives.removeAll();
+    newfiberMap.getMap().destroy();
+    if (_originalGLContext) {
+      _originalGLContext.getExtension('WEBGL_lose_context').loseContext();
+      _originalGLContext = null;
+    }
+    newfiberMap.baseMap.map = null;
+    newfiberMap = null;
+  }
 });
 </script>
 
diff --git a/src/views/sponeScreen/gisMF/cesiumMap.vue b/src/views/sponeScreen/gisMF/cesiumMap.vue
index eb408d4..c5eae99 100644
--- a/src/views/sponeScreen/gisMF/cesiumMap.vue
+++ b/src/views/sponeScreen/gisMF/cesiumMap.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- 海绵综合一张图地图cesium -->
-  <div class="mapContainerMF" id="mapContainerMF" v-show="popupShow">
+  <div class="mapContainerMF" id="mapContainerMF">
     <cesiumPopup></cesiumPopup>
   </div>
 </template>
@@ -33,22 +33,22 @@
   //newfiberMap.setBaseMapByEnum([NewFiberMap.Enum.BaseMap.AMAP_VECTOR_V1]);
   newfiberMap.setView({
     lng: 114.312,
-    lat: 34.502,
+    lat: 34.802,
     heading: 2.281299097855777,
-    zoom: 16358.12942752382,
+    zoom: 358.12942752382,
     pitch: -25.2508969308367,
     roll: 0.005453465256790101,
   });
-  newfiberMap.loadWmsLayer({
-    url: '/geoserver/henan_kaifeng/wms',
-    layers: 'henan_kaifeng:' + 'henan_kaifeng_lake',
-    visible: true,
-  });
-  newfiberMap.loadWmsLayer({
-    url: '/geoserver/henan_kaifeng/wms',
-    layers: 'henan_kaifeng:' + 'henan_kaifeng_river',
-    visible: true,
-  });
+  // newfiberMap.loadWmsLayer({
+  //   url: '/geoserver/henan_kaifeng/wms',
+  //   layers: 'henan_kaifeng:' + 'henan_kaifeng_lake',
+  //   visible: true,
+  // });
+  // newfiberMap.loadWmsLayer({
+  //   url: '/geoserver/henan_kaifeng/wms',
+  //   layers: 'henan_kaifeng:' + 'henan_kaifeng_river',
+  //   visible: true,
+  // });
   newfiberMap.registerLeftClickEvt(async (position, point, feature) => {
     if (!feature) return;
     if (
@@ -81,20 +81,34 @@
   });
   NewFiberMapUtils.weatherToMap(newfiberMap);
 };
-
+//添加三维管网
+const addCesiumPipe = () => {
+  let dataList = [
+    'https://server1.wh-nf.cn:9000/newfiber-standard-kaifeng/2024/06/24/pipeData/ysline/ysline.scp',
+    'https://server1.wh-nf.cn:9000/newfiber-standard-kaifeng/2024/06/24/pipeData/YS_Point/YS_Point.scp',
+    'https://server1.wh-nf.cn:9000/newfiber-standard-kaifeng/2024/06/24/pipeData/wsLine/wsLine.scp',
+    'https://server1.wh-nf.cn:9000/newfiber-standard-kaifeng/2024/06/24/pipeData/WS_Point/WS_Point.scp',
+    'https://server1.wh-nf.cn:9000/newfiber-standard-kaifeng/2024/06/24/pipeData/hsLine/hsLine.scp',
+    'https://server1.wh-nf.cn:9000/newfiber-standard-kaifeng/2024/06/24/pipeData/hs_Point/hs_Point.scp',
+  ];
+  dataList.forEach((url, index) => {
+    newfiberVectorLayer.add3DModelLayers(newfiberMap, url, 'cesiumPipe' + index);
+  });
+};
 onMounted(() => {
   createIniteMap();
-  window.currentWeatherTimer = null;
-  newfiberVectorLayer.setCurrentWeather();
-  window.currentWeatherTimer = setInterval(() => {
-    newfiberVectorLayer.setCurrentWeather();
-  }, 300000);
+  addCesiumPipe();
+  // window.currentWeatherTimer = null;
+  // newfiberVectorLayer.setCurrentWeather();
+  // window.currentWeatherTimer = setInterval(() => {
+  //   newfiberVectorLayer.setCurrentWeather();
+  // }, 300000);
 
-  bus.on('closeCesiumPopup', () => {
-    popupShow.value = false;
-    window.PopupInfo && window.PopupInfo.hide();
-    window.PopupInfo = null;
-  });
+  // bus.on('closeCesiumPopup', () => {
+  //   popupShow.value = false;
+  //   window.PopupInfo && window.PopupInfo.hide();
+  //   window.PopupInfo = null;
+  // });
 });
 onBeforeUnmount(() => {
   clearInterval(window.currentWeatherTimer);

diff --git a/src/assets/geojson/kaifeng/track.json b/src/assets/geojson/kaifeng/track.json
new file mode 100644
index 0000000..0b513ca
--- /dev/null
+++ b/src/assets/geojson/kaifeng/track.json
@@ -0,0 +1,87 @@
+{
+    "type": "FeatureCollection",
+    "features": [
+        {
+            "type": "Feature",
+            "properties": {
+                "fillcolor": "rgba(82, 214, 108,1)"
+            },
+            "geometry": {
+                "type": "LineString",
+                "coordinates": [
+                    [
+                        114.35720775300125,
+                        34.794029555366635
+                    ],
+                    [
+                        114.35723116921616,
+                        34.79331536081194
+                    ],
+                    [
+                        114.35741459623294,
+                        34.792367004108165
+                    ],
+                    [
+                        114.35757070433233,
+                        34.79176598792552
+                    ],
+                    [
+                        114.3567355260006,
+                        34.79178940414043
+                    ],
+                    [
+                        114.35661063952115,
+                        34.79070640420094
+                    ],
+                    [
+                        114.35428658019148,
+                        34.790817631221735
+                    ],
+                    [
+                        114.3540290018275,
+                        34.78942826913719
+                    ],
+                    [
+                        114.35312357485105,
+                        34.783878626203986
+                    ],
+                    [
+                        114.35297527215664,
+                        34.782598539789014
+                    ],
+                    [
+                        114.35307674242124,
+                        34.78218485332564
+                    ]
+                ]
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "fillcolor": "rgba(82, 214, 108,1)"
+            },
+            "geometry": {
+                "type": "LineString",
+                "coordinates": [
+                    [
+                        114.31333162031727,
+                        34.77774357789805
+                    ],
+                    [
+                        114.3249928953415,
+                        34.77688498335142
+                    ],
+                    [
+                        114.33248608411208,
+                        34.77629177257375
+                    ],
+                    [
+                        114.33371933809724,
+                        34.784003512683476
+                    ]
+                ]
+            }
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/assets/newImgs/car.png b/src/assets/newImgs/car.png
new file mode 100644
index 0000000..e9eb325
--- /dev/null
+++ b/src/assets/newImgs/car.png
Binary files differ
diff --git a/src/views/floodSys/floodYP/riskGisMap.vue b/src/views/floodSys/floodYP/riskGisMap.vue
index 48da94c..8033af8 100644
--- a/src/views/floodSys/floodYP/riskGisMap.vue
+++ b/src/views/floodSys/floodYP/riskGisMap.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script setup name="riskMapGis">
-import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
+import MapBox from '@/views/gisMapPage/gisMapBox'; //gis地图
 const { proxy } = getCurrentInstance();
 const allData = reactive({});
 const emits = defineEmits();
diff --git a/src/views/gisMapPage/gisMapBox.vue b/src/views/gisMapPage/gisMapBox.vue
index e67005e..4cb6ef1 100644
--- a/src/views/gisMapPage/gisMapBox.vue
+++ b/src/views/gisMapPage/gisMapBox.vue
@@ -1,37 +1,501 @@
 <template>
-  <div class="mapPage">
-    <div id="cesiumContainer"></div>
+  <div class="mapPage_risk">
+    <div id="mapboxContainer_risk"></div>
   </div>
 </template>
 <script>
-import { reactive, toRefs, onBeforeMount, onMounted, nextTick, onBeforeUnmount } from 'vue';
-import NewFiberMapOperate from './gisMapFunction';
-import axios from 'axios';
 import bus from '@/bus';
+import axios from 'axios';
+import kaifengWaterLabel1 from '@/assets/geojson/kaifeng/kaifengWaterLabel1.json';
+import kaifengWater from '@/assets/geojson/kaifeng/kaifengWater.json';
+import kaifengAllBoundary from '@/assets/geojson/kaifeng/kaifengAllBoundary.json';
+import kaiFengCenteralBoundary from '@/assets/geojson/kaifeng/kaiFengCenteralBoundary.json';
+import riverFlow from '@/assets/geojson/kaifeng/riverFlow.json';
+
 export default {
   components: {},
-  props: {},
-  setup(props) {
+  props: {
+    initJson: {
+      type: String,
+      default: () => '/static/libs/mapbox/style/floodOneMap.json',
+    },
+    loadCallback: {
+      type: Function,
+      default: () => function () {},
+    },
+  },
+  setup(props, event) {
     const allData = reactive({
-      movePosition: '113.934113,30.872118',
+      layerIds: [],
     });
+    let geojson = {
+      point: { type: 'FeatureCollection', features: [] },
+      polygon: { type: 'FeatureCollection', features: [] },
+      linestring: { type: 'FeatureCollection', features: [] },
+    };
+    let map = null;
+    let config = null;
+    let highlightLayers = {
+      highlight_point: 1,
+      //highlight_point1: 1,
+      highlight_polygon: 1,
+      highlight_linestring: 1,
+    };
     const initeMap = async () => {
-      window.newfiberMap = new NewFiberMapOperate('cesiumContainer', {
-        pitch: 55,
-        lng: 113.953,
-        lat: 30.906,
+      config = (await axios.get(props.initJson)).data;
+      let { sprites, l7 } = config.params;
+
+      window.newfiberMap_risk = new mapboxL7.Scene({
+        id: 'mapboxContainer_risk',
+        map: new mapboxL7.Mapbox({
+          style: config.params.init.style,
+          center: config.params.init.center,
+          zoom: config.params.init.zoom,
+        }),
       });
-      newfiberMap.map.on('mousemove', function (e) {
-        let movePosition = gcoord.transform(turf.point([e.lngLat.lng, e.lngLat.lat]), gcoord.GCJ02, gcoord.WGS84);
-        allData.movePosition = `${movePosition.geometry.coordinates[0].toFixed(6)},${movePosition.geometry.coordinates[1].toFixed(6)}`;
+      newfiberMap_risk.map.load = false;
+      map = newfiberMap_risk.map;
+      map.ogcLayers = [];
+      newfiberMap_risk.unLoadLayers = [];
+      (sprites || []).forEach(url => {
+        map.style._loadSprite(url.includes('http') ? url : window.location.href.split('#')[0] + url);
+      });
+      ((l7 || []).images || []).forEach(item =>
+        newfiberMap_risk.addImage(item.name, item.url.includes('http') ? item.url : window.location.href.split('#')[0] + item.url)
+      );
+      setTimeout(() => {
+        map.on('load', async () => {
+          const mouseLocation = new mapboxL7.MouseLocation({
+            transform: position => {
+              return [position[0].toFixed(6), position[1].toFixed(6)];
+            },
+          });
+          newfiberMap_risk.addControl(mouseLocation);
+          // !!!map.getSource('kaifengWater') && map.addSource('kaifengWater', { type: 'geojson', data: kaifengWater });
+          // !!!map.getLayer('kaifengWater') &&
+          //   map.addLayer({
+          //     id: 'kaifengWater',
+          //     type: 'fill',
+          //     source: 'kaifengWater',
+          //     paint: {
+          //       'fill-color': 'rgba(117, 207, 240,1)',
+          //     },
+          //   });
+          //addRiverFlow();
+          addWaterLabel();
+          //addAreaBoundary();
+          await loadData();
+
+          props.loadCallback && props.loadCallback();
+          // getLayerIdByClick();
+          (config.orders || []).forEach(item => setLayerOrder(...item));
+          newfiberMap_risk.getLayers().filter(i => highlightLayers[i.newfiberId] && (highlightLayers[i.newfiberId] = i));
+          // let timeout = setTimeout(() => {
+          let { pitch, center } = config.params.init;
+          pitch && newfiberMap_risk.map.setPitch(pitch);
+          center && newfiberMap_risk.map.setCenter(center);
+          //clearTimeout(timeout);
+          //}, 1000);
+          newfiberMap_risk.map.load = true;
+        });
+      }, 200);
+
+      let layerIds = (config.mapbox || []).map(i => i.id);
+      map.on('click', e => {
+        Object.values(highlightLayers).forEach(layer => {
+          if (layer.setData) layer.setData({ type: 'FeatureCollection', features: [] });
+        });
+        const feature = (
+          map.queryRenderedFeatures([
+            [e.point.x - 10 / 2, e.point.y - 10 / 2],
+            [e.point.x + 10 / 2, e.point.y + 10 / 2],
+          ]) || []
+        ).filter(i => layerIds.includes(i.layer.id) || i.layer.id == 'rainStation')[0];
+        if (feature) event.emit('map-click', Object.values(e.lngLat), feature.properties);
+        setHighlight(feature);
+      });
+      map.on('mouseenter', 'point', e => {
+        Object.values(highlightLayers).forEach(layer => {
+          if (layer.setData) layer.setData({ type: 'FeatureCollection', features: [] });
+        });
+        const feature = (
+          map.queryRenderedFeatures([
+            [e.point.x - 10 / 2, e.point.y - 10 / 2],
+            [e.point.x + 10 / 2, e.point.y + 10 / 2],
+          ]) || []
+        ).filter(i => layerIds.includes(i.layer.id))[0];
+        if (feature) event.emit('map-moveOn', Object.values(e.lngLat), feature.properties);
+        setHighlight(feature);
+      });
+      map.on('mouseleave', 'point', e => {
+        Object.values(highlightLayers).forEach(layer => {
+          if (layer.setData) layer.setData({ type: 'FeatureCollection', features: [] });
+        });
+        const feature = (
+          map.queryRenderedFeatures([
+            [e.point.x - 10 / 2, e.point.y - 10 / 2],
+            [e.point.x + 10 / 2, e.point.y + 10 / 2],
+          ]) || []
+        ).filter(i => layerIds.includes(i.layer.id))[0];
+        if (feature) event.emit('map-moveLeave', Object.values(e.lngLat), feature.properties);
       });
     };
-    onMounted(() => {
-      nextTick(() => {
-        initeMap();
+
+    const loadData = async () => {
+      let { mapbox, l7, ogc } = config;
+      if (mapbox)
+        //用mapbox添加水系
+        //axios.get(config.params.mvt + `/v1/geojson/hubei_xiaogan_water1`).then(({ data: geojson }) => {
+
+        // });
+        mapbox.forEach(item => {
+          let { mType, columns } = item;
+          let params = '';
+          if (columns) params = `?columns=${columns}`;
+          if (!!!map.getSource(item.id)) {
+            let flag = mType == 'geojson';
+            flag
+              ? map.addSource(item.id, {
+                  type: mType,
+                  data: geojson[item.id],
+                })
+              : map.addSource(item.id, {
+                  type: 'vector',
+                  tiles: [config.params.mvt + `/v1/${mType}/${item.key}/{z}/{x}/{y}` + params],
+                  tileSize: 512,
+                  scheme: 'xyz',
+                  maxzoom: 14,
+                  minzoom: 1,
+                });
+          }
+          map.addLayer({ ...item, source: item.id });
+          map.moveLayer(item.id, undefined);
+          allData.layerIds.push(item.id);
+        });
+      if (l7) {
+        if (!!!l7.length) return;
+        l7.forEach(item => {
+          let { id, columns, filter } = item;
+          let params = '';
+          if (columns) params += `columns=${columns}&`;
+          if (filter) params += `filter=${filter}&`;
+          id
+            ? axios.get(config.params.mvt + `/v1/geojson/${id}?` + params).then(({ data: geojson }) => initMapBoxL7Class(item, geojson))
+            : initMapBoxL7Class(item, geojson[item.key] || turf.featureCollection([]));
+        });
+      }
+      if (ogc)
+        ogc.forEach(item => {
+          let { id, type, params, methods } = item;
+          Object.keys(params).forEach(
+            i => (params[i] = typeof params[i] == 'string' ? (params[i].includes('||') ? eval(params[i]) : params[i]) : params[i])
+          );
+          let layer = new mapboxgl1[type](params);
+          layer.newfiberId = id;
+          methods.forEach(method => {
+            let ms = method.params.map(i => (typeof i == 'string' ? (i.includes('||') ? eval(i) : i) : i));
+            layer[method.name](...ms);
+          });
+          map.ogcLayers.push(layer);
+        });
+
+      function initMapBoxL7Class({ type, params, methods, id, show, key }, geojson) {
+        let layer = new mapboxL7[type](params).source(geojson);
+        methods.forEach(method => {
+          let ms = method.params.map(i => (typeof i == 'string' ? (i.includes('||') ? eval(i) : i) : i));
+          layer[method.name](...ms);
+        });
+        layer.newfiberId = key;
+        if (!show) return newfiberMap_risk.unLoadLayers.push(layer);
+        newfiberMap_risk.addLayer(layer);
+        allData.layerIds.push(key);
+      }
+    };
+
+    const setLayerVisible = ({ layername, isCheck }) => {
+      if (!!!window.newfiberMap_risk) return;
+      console.log('layername---', layername);
+      if (((config || {}).filter || {})[layername]) {
+        config.filter[layername].layerName.forEach((name, index) => {
+          let filter = map.getFilter(name);
+          let fValues = config.filter[layername].filter[index];
+          isCheck ? filter.push(...fValues) : (filter = filter.filter(i => !fValues.includes(i)));
+          map.setFilter(name, filter);
+        });
+        return config.filter[layername].easeTo && isCheck && map.easeTo(config.filter[layername].easeTo);
+      }
+      let features = Object.values(geojson)
+        .map(i => i.features)
+        .flat(Infinity)
+        .filter(i => i.properties.type == layername);
+      if (features.length) {
+        let types = Array.from(new Set(features.map(i => i.geometry.type.toLocaleLowerCase())));
+        types.forEach(type1 => {
+          if (map.getLayer(type1)) {
+            let filter = map.getFilter(type1);
+            if (!!!filter) return;
+            isCheck ? filter.push(layername) : (filter = filter.filter(i => i != layername));
+
+            map.setFilter(type1, filter);
+          }
+        });
+      }
+      let layer = newfiberMap_risk.getLayers().filter(i => i.newfiberId == layername)[0];
+      if (!!!layer) {
+        layer = newfiberMap_risk.unLoadLayers.filter(i => i.newfiberId == layername)[0];
+        isCheck && layer && newfiberMap_risk.addLayer(layer);
+      }
+      layer && layer[['hide', 'show'][Number(isCheck)]]();
+
+      layer = map.getLayer(layername);
+      layer && map.setLayoutProperty(layername, 'visibility', isCheck ? 'visible' : 'none');
+
+      layer = map.getLayer(layername + '_text');
+      layer && map.setLayoutProperty(layername, 'visibility', isCheck ? 'visible' : 'none');
+
+      layer = map.ogcLayers.filter(i => i.id == layername)[0];
+      layer && (layer.map ? layer[isCheck ? 'show' : 'hide']() : layer.addTo(map));
+    };
+
+    const getGeojsonByType = ({ type, callback }) => {
+      let geojs = turf.featureCollection(
+        Object.values(geojson)
+          .map(i => i.features)
+          .flat(Infinity)
+          .filter(i => i.properties.type == type)
+      );
+      callback && callback(geojs);
+    };
+
+    const removeLayers = ids => {
+      let { getLayers, removeAllLayer, removeLayer: removeLayerL7 } = newfiberMap_risk;
+      let { getLayer, removeLayer } = map;
+
+      if (!!!ids) {
+        allData.layerIds.forEach(id => getLayer(id) && removeLayer(id));
+        return removeAllLayer();
+      }
+
+      ids.forEach(id => {
+        getLayer(id) && removeLayer(id);
+        getLayers().forEach(layer => layer.newfiberId == id && removeLayerL7(layer));
       });
+    };
+
+    const removeMapDatas = types => {
+      !!!types
+        ? Object.keys(geojson).forEach(key => (geojson[key].features.length = 0))
+        : Object.keys(geojson).forEach(
+            key => (geojson[key].features = geojson[key].features.filter(feature => !types.includes(feature.properties.type)))
+          );
+      return refreshGeoJSON();
+    };
+
+    const setLegendData = list => {
+      list.forEach(i => {
+        i.data &&
+          i.data.features &&
+          i.data.features.forEach(a => {
+            if (!!!a || !!!a.properties) return;
+            a.properties.type = a.properties.type || i.layername;
+            a.properties.name =
+              a.properties.name ||
+              a.properties.Name ||
+              a.properties.stName ||
+              a.properties.roadName ||
+              a.properties.sewageName ||
+              a.properties.sectionName ||
+              a.properties.pumpName ||
+              a.properties.projectName;
+          });
+      });
+
+      let types = {};
+      list
+        .map(i => i.data && i.data.features)
+        .filter(Boolean)
+        .flat(Infinity)
+        .forEach(feature => {
+          if (!!!feature || !!!feature.properties) return;
+          feature.properties.geometry = Terraformer.WKT.convert(feature.geometry);
+          let type = feature.geometry.type.toLocaleLowerCase();
+          let flag = type.includes('multi');
+          type = type.replaceAll('multi', '');
+          let features = null;
+          if (flag) features = turf.flatten(feature).features;
+          !!!types[type] && (types[type] = []);
+          types[type].push(...(features ? features : [feature]));
+        });
+      Object.keys(types).forEach(key => geojson[key].features.push(...types[key]));
+      refreshGeoJSON();
+    };
+
+    const refreshGeoJSON = () => {
+      Object.keys(geojson).forEach(key => map.getSource(key) && map.getSource(key).setData(geojson[key]));
+    };
+
+    const setGeoJSON = ({ json, key }) => {
+      // geojson[key] = json;
+      let layer = newfiberMap_risk.getLayers().filter(i => i.newfiberId == key)[0];
+      if (!!!layer) {
+        layer = newfiberMap_risk.unLoadLayers.filter(i => i.newfiberId == key)[0];
+        layer && newfiberMap_risk.addLayer(layer);
+      }
+      if (layer) layer.setData(json);
+      setLegendData([{ data: json, layername: key, type: 'point' }]);
+    };
+
+    const setLayerOrder = (sourceLayer, targetLayer) => {
+      map.moveLayer(sourceLayer, targetLayer);
+    };
+
+    const setHighlight = (features = {}) => {
+      let array = {};
+      features = features.forEach ? features : [features];
+      Object.values(highlightLayers).forEach(layer => layer.setData && layer.setData({ type: 'FeatureCollection', features: [] }));
+      features.forEach(feature => {
+        if (!!!feature || !Boolean(Object.keys(feature).length) || !feature.properties.geometry) return;
+        let geometry = Terraformer.WKT.parse(feature.properties.geometry);
+        let geoFeature = turf.feature(geometry, feature.properties);
+        let type = geometry.type.toLocaleLowerCase().replaceAll('multi', '');
+        let key = Object.keys(highlightLayers).filter(key => key.lastIndexOf(type) > -1)[0];
+        if (!array[key]) array[key] = [];
+        array[key].push(geoFeature);
+      });
+      Object.keys(array).forEach(
+        key => highlightLayers[key] && highlightLayers[key].setData({ type: 'FeatureCollection', features: array[key] })
+      );
+    };
+
+    const getLayerIdByClick = () => {
+      map.getStyle().layers.forEach(i =>
+        map.on('click', i.id, (a, b, c, d) => {
+          console.log('layer-id', a.features[0].layer.id);
+        })
+      );
+    };
+
+    //添加政区边界
+    const addAreaBoundary = () => {
+      !!!map.getSource('kaifengAllBoundary') && map.addSource('kaifengAllBoundary', { type: 'geojson', data: kaifengAllBoundary });
+      !!!map.getLayer('kaifengAllBoundary') &&
+        map.addLayer({
+          id: 'kaifengAllBoundary',
+          type: 'line',
+          source: 'kaifengAllBoundary',
+
+          paint: {
+            'line-color': 'rgba(255,208,76,1)',
+            'line-width': 6,
+          },
+        });
+      !!!map.getSource('kaiFengCenteralBoundary') &&
+        map.addSource('kaiFengCenteralBoundary', { type: 'geojson', data: kaiFengCenteralBoundary });
+      !!!map.getLayer('kaiFengCenteralBoundary') &&
+        map.addLayer({
+          id: 'kaiFengCenteralBoundary',
+          type: 'line',
+          source: 'kaiFengCenteralBoundary',
+
+          paint: {
+            'line-color': 'rgba(228,64,50,1)',
+            'line-width': 6,
+          },
+        });
+    };
+    //添加河流标注
+    const addWaterLabel = () => {
+      !!!map.getSource('kaifengWaterLabel1') && map.addSource('kaifengWaterLabel1', { type: 'geojson', data: kaifengWaterLabel1 });
+      !!!map.getLayer('kaifengWaterLabel1') &&
+        map.addLayer({
+          id: 'kaifengWaterLabel1',
+          type: 'symbol',
+          source: 'kaifengWaterLabel1',
+          layout: {
+            'text-field': ['get', 'name'],
+            'text-font': ['KlokanTech Noto Sans Regular'],
+            'text-transform': 'uppercase',
+          },
+          paint: {
+            'text-halo-color': 'rgba(238, 251, 255,1)',
+            'text-color': 'rgba(30, 30, 30,1)',
+            'icon-opacity': 1,
+            'text-halo-width': 1,
+          },
+        });
+      !!!map.getSource('kaifengWaterLabel2') && map.addSource('kaifengWaterLabel2', { type: 'geojson', data: kaifengWater });
+      !!!map.getLayer('kaifengWaterLabel2') &&
+        map.addLayer({
+          id: 'kaifengWaterLabel2',
+          type: 'symbol',
+          source: 'kaifengWaterLabel2',
+          layout: {
+            'symbol-placement': 'line',
+            'text-field': ['get', 'name'],
+            'text-font': ['KlokanTech Noto Sans Regular'],
+            'text-letter-spacing': 0.1,
+            'text-rotation-alignment': 'map',
+            'text-size': {
+              base: 1.4,
+              stops: [
+                [10, 16],
+                [20, 22],
+              ],
+            },
+            'text-transform': 'uppercase',
+          },
+          paint: {
+            'text-halo-color': 'rgba(238, 251, 255,1)',
+            'text-color': 'rgba(30, 30, 30,1)',
+            'icon-opacity': 1,
+            'text-halo-width': 1,
+          },
+        });
+    };
+    //添加河道流向
+    const addRiverFlow = () => {
+      let layer = new mapboxL7.LineLayer({})
+        .source(riverFlow)
+        .size(6)
+        .shape('line')
+        .texture('arrow')
+        .color('rgb(117, 207, 240)')
+        .animate({
+          interval: 1, // 间隔
+          duration: 1.5, // 持续时间，延时
+          trailLength: 2, // 流线长度
+        })
+        .style({
+          opacity: 0.6,
+          lineTexture: true, // 开启线的贴图功能
+          iconStep: 200, // 设置贴图纹理的间距
+          borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
+          borderColor: '#fff', // 默认为 #ccc
+        });
+      newfiberMap_risk.addLayer(layer);
+    };
+    onMounted(() => {
+      initeMap();
+      bus.on('setLayerVisible', setLayerVisible);
+      bus.on('setLegendData', setLegendData);
+      bus.on('setGeoJSON', setGeoJSON);
+      bus.on('getGeojsonByType', getGeojsonByType);
+      bus.on('removeLayers', removeLayers);
+      bus.on('removeMapDatas', removeMapDatas);
+      bus.on('setHighlight', setHighlight);
     });
-    onBeforeUnmount(() => {});
+
+    onBeforeUnmount(() => {
+      bus.off('setLayerVisible');
+      bus.off('setLegendData');
+      bus.off('setGeoJSON');
+      bus.off('getGeojsonByType');
+      bus.off('removeMapDatas');
+      bus.off('setHighlight');
+      newfiberMap_risk.destroy();
+      newfiberMap_risk = null;
+    });
+
     return {
       ...toRefs(allData),
       initeMap,
@@ -40,7 +504,7 @@
 };
 </script>
 <style lang="scss">
-.mapPage {
+.mapPage_risk {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -48,15 +512,16 @@
   top: 0px;
   z-index: 10;
   background: lavender;
-  #cesiumContainer {
+  #mapboxContainer_risk {
     width: 100%;
     height: 100%;
     position: absolute;
   }
-  .coordinateContainer {
-    position: absolute;
-    left: 20px;
-    bottom: 30px;
+  .l7-control-mouse-location {
+    background: none;
+  }
+  .l7-control-mouse-location {
+    color: #ffffff;
   }
 }
 </style>
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index e6c4170..1474319 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -121,7 +121,9 @@
     <img src="@/assets/newImgs/HMScreen/headLight.png" alt="" class="bottomLightDXR" />
 
     <!-- 三维管网弹窗 -->
-    <el-dialog v-model="showPipe" title="三维管网" width="1600px" append-to-body></el-dialog>
+    <el-dialog v-model="showPipe" title="三维管网" style="width: 1600px; height: 700px" @close="closePipe" append-to-body>
+      <GisMapMF style="position: relative"></GisMapMF>
+    </el-dialog>
   </div>
 </template>
 
@@ -176,7 +178,9 @@
   //NewFiberMapUtils.removeByIds(Object.values(NewFiberMapUtils.defaultParams.keys));
   if (id == 4) {
   }
-  if (id == 5) NewFiberMapUtils.defaultPatrolDemo(newfiberMap);
+  if (id == 5) {
+    //  NewFiberMapUtils.defaultPatrolDemo(newfiberMap);
+  }
 }
 // 图例控制
 function controlLegend() {
@@ -232,6 +236,22 @@
   // console.log('point', point);
   // console.log('鼠标移出--', properties);
 };
+//关闭三维管网弹窗
+const closePipe = () => {
+  if (newfiberMap) {
+    let _originalGLContext = newfiberMap.getMap().scene?.context._originalGLContext;
+    newfiberMap.getMap().imageryLayers.removeAll();
+    newfiberMap.getMap().entities.removeAll();
+    newfiberMap.getMap().scene.primitives.removeAll();
+    newfiberMap.getMap().destroy();
+    if (_originalGLContext) {
+      _originalGLContext.getExtension('WEBGL_lose_context').loseContext();
+      _originalGLContext = null;
+    }
+    newfiberMap.baseMap.map = null;
+    newfiberMap = null;
+  }
+};
 onMounted(() => {
   getWeather();
   // 获取项目片区点击
@@ -241,20 +261,20 @@
 });
 onBeforeUnmount(() => {
   bus.off('checkProjectArea');
-  // if (!newfiberMap) return;
-  // if (newfiberMap) {
-  //   let _originalGLContext = newfiberMap.getMap().scene?.context._originalGLContext;
-  //   newfiberMap.getMap().imageryLayers.removeAll();
-  //   newfiberMap.getMap().entities.removeAll();
-  //   newfiberMap.getMap().scene.primitives.removeAll();
-  //   newfiberMap.getMap().destroy();
-  //   if (_originalGLContext) {
-  //     _originalGLContext.getExtension('WEBGL_lose_context').loseContext();
-  //     _originalGLContext = null;
-  //   }
-  //   newfiberMap.baseMap.map = null;
-  //   newfiberMap = null;
-  // }
+  if (!newfiberMap) return;
+  if (newfiberMap) {
+    let _originalGLContext = newfiberMap.getMap().scene?.context._originalGLContext;
+    newfiberMap.getMap().imageryLayers.removeAll();
+    newfiberMap.getMap().entities.removeAll();
+    newfiberMap.getMap().scene.primitives.removeAll();
+    newfiberMap.getMap().destroy();
+    if (_originalGLContext) {
+      _originalGLContext.getExtension('WEBGL_lose_context').loseContext();
+      _originalGLContext = null;
+    }
+    newfiberMap.baseMap.map = null;
+    newfiberMap = null;
+  }
 });
 </script>
 
diff --git a/src/views/sponeScreen/gisMF/cesiumMap.vue b/src/views/sponeScreen/gisMF/cesiumMap.vue
index eb408d4..c5eae99 100644
--- a/src/views/sponeScreen/gisMF/cesiumMap.vue
+++ b/src/views/sponeScreen/gisMF/cesiumMap.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- 海绵综合一张图地图cesium -->
-  <div class="mapContainerMF" id="mapContainerMF" v-show="popupShow">
+  <div class="mapContainerMF" id="mapContainerMF">
     <cesiumPopup></cesiumPopup>
   </div>
 </template>
@@ -33,22 +33,22 @@
   //newfiberMap.setBaseMapByEnum([NewFiberMap.Enum.BaseMap.AMAP_VECTOR_V1]);
   newfiberMap.setView({
     lng: 114.312,
-    lat: 34.502,
+    lat: 34.802,
     heading: 2.281299097855777,
-    zoom: 16358.12942752382,
+    zoom: 358.12942752382,
     pitch: -25.2508969308367,
     roll: 0.005453465256790101,
   });
-  newfiberMap.loadWmsLayer({
-    url: '/geoserver/henan_kaifeng/wms',
-    layers: 'henan_kaifeng:' + 'henan_kaifeng_lake',
-    visible: true,
-  });
-  newfiberMap.loadWmsLayer({
-    url: '/geoserver/henan_kaifeng/wms',
-    layers: 'henan_kaifeng:' + 'henan_kaifeng_river',
-    visible: true,
-  });
+  // newfiberMap.loadWmsLayer({
+  //   url: '/geoserver/henan_kaifeng/wms',
+  //   layers: 'henan_kaifeng:' + 'henan_kaifeng_lake',
+  //   visible: true,
+  // });
+  // newfiberMap.loadWmsLayer({
+  //   url: '/geoserver/henan_kaifeng/wms',
+  //   layers: 'henan_kaifeng:' + 'henan_kaifeng_river',
+  //   visible: true,
+  // });
   newfiberMap.registerLeftClickEvt(async (position, point, feature) => {
     if (!feature) return;
     if (
@@ -81,20 +81,34 @@
   });
   NewFiberMapUtils.weatherToMap(newfiberMap);
 };
-
+//添加三维管网
+const addCesiumPipe = () => {
+  let dataList = [
+    'https://server1.wh-nf.cn:9000/newfiber-standard-kaifeng/2024/06/24/pipeData/ysline/ysline.scp',
+    'https://server1.wh-nf.cn:9000/newfiber-standard-kaifeng/2024/06/24/pipeData/YS_Point/YS_Point.scp',
+    'https://server1.wh-nf.cn:9000/newfiber-standard-kaifeng/2024/06/24/pipeData/wsLine/wsLine.scp',
+    'https://server1.wh-nf.cn:9000/newfiber-standard-kaifeng/2024/06/24/pipeData/WS_Point/WS_Point.scp',
+    'https://server1.wh-nf.cn:9000/newfiber-standard-kaifeng/2024/06/24/pipeData/hsLine/hsLine.scp',
+    'https://server1.wh-nf.cn:9000/newfiber-standard-kaifeng/2024/06/24/pipeData/hs_Point/hs_Point.scp',
+  ];
+  dataList.forEach((url, index) => {
+    newfiberVectorLayer.add3DModelLayers(newfiberMap, url, 'cesiumPipe' + index);
+  });
+};
 onMounted(() => {
   createIniteMap();
-  window.currentWeatherTimer = null;
-  newfiberVectorLayer.setCurrentWeather();
-  window.currentWeatherTimer = setInterval(() => {
-    newfiberVectorLayer.setCurrentWeather();
-  }, 300000);
+  addCesiumPipe();
+  // window.currentWeatherTimer = null;
+  // newfiberVectorLayer.setCurrentWeather();
+  // window.currentWeatherTimer = setInterval(() => {
+  //   newfiberVectorLayer.setCurrentWeather();
+  // }, 300000);
 
-  bus.on('closeCesiumPopup', () => {
-    popupShow.value = false;
-    window.PopupInfo && window.PopupInfo.hide();
-    window.PopupInfo = null;
-  });
+  // bus.on('closeCesiumPopup', () => {
+  //   popupShow.value = false;
+  //   window.PopupInfo && window.PopupInfo.hide();
+  //   window.PopupInfo = null;
+  // });
 });
 onBeforeUnmount(() => {
   clearInterval(window.currentWeatherTimer);
diff --git a/src/views/sponeScreen/gisMF/mapboxVectorLayer.js b/src/views/sponeScreen/gisMF/mapboxVectorLayer.js
index f2a471b..ce517de 100644
--- a/src/views/sponeScreen/gisMF/mapboxVectorLayer.js
+++ b/src/views/sponeScreen/gisMF/mapboxVectorLayer.js
@@ -72,6 +72,7 @@
             'icon-size': 0.8,
             'text-field': '{name}',
             'text-font': ['KlokanTech Noto Sans Regular'],
+            'icon-rotate': ['get', 'bearing'],
             'text-size': 16,
             'text-line-height': 3,
             'text-anchor': 'bottom',
@@ -253,6 +254,88 @@
       });
     }
   }
+  //添加轨迹动态线
+  static addDynamicRoute = (layerId, geojson, icon) => {
+    window.routeTimer = null;
+    window.routeTimer_1 = null;
+    this.addGeojsonLine(layerId, geojson, 10);
+    let symbolGeojson = turf.featureCollection([
+      turf.point(geojson.features[0].geometry.coordinates[0], {
+        bearing: turf.bearing(
+          turf.point(geojson.features[0].geometry.coordinates[0]),
+          turf.point(geojson.features[0].geometry.coordinates[1])
+        ),
+      }),
+    ]);
+    let symbolGeojson_1 = turf.featureCollection([
+      turf.point(geojson.features[1].geometry.coordinates[0], {
+        bearing: turf.bearing(
+          turf.point(geojson.features[1].geometry.coordinates[0]),
+          turf.point(geojson.features[1].geometry.coordinates[1])
+        ),
+      }),
+    ]);
+    this.addGeojsonSymbol(layerId + '_Symbol', symbolGeojson, icon);
+    this.addGeojsonSymbol(layerId + '_Symbol_1', symbolGeojson_1, icon);
+    const lineDistance = turf.length(geojson.features[0]);
+    const lineDistance_1 = turf.length(geojson.features[1]);
+    const arc = [];
+    const arc_1 = [];
+    const steps = 100;
+    for (let i = 0; i < lineDistance; i += lineDistance / steps) {
+      const segment = turf.along(geojson.features[0], i);
+      arc.push(segment.geometry.coordinates);
+    }
+    for (let i = 0; i < lineDistance_1; i += lineDistance_1 / steps) {
+      const segment = turf.along(geojson.features[1], i);
+      arc_1.push(segment.geometry.coordinates);
+    }
+    geojson.features[0].geometry.coordinates = arc;
+    geojson.features[1].geometry.coordinates = arc_1;
+    let counter = 0;
+    let counter_1 = 0;
+
+    const start_1 = geojson.features[1].geometry.coordinates[counter_1 >= steps ? counter_1 - 1 : counter_1];
+    const end_1 = geojson.features[1].geometry.coordinates[counter_1 >= steps ? counter_1 : counter_1 + 1];
+    setTimeout(() => {
+      window.routeTimer = setInterval(() => {
+        const start = geojson.features[0].geometry.coordinates[counter >= steps ? counter - 1 : counter];
+        const end = geojson.features[0].geometry.coordinates[counter >= steps ? counter : counter + 1];
+        if (!start || !end) {
+          return;
+        }
+        symbolGeojson.features[0].geometry.coordinates = geojson.features[0].geometry.coordinates[counter];
+        symbolGeojson.features[0].properties.bearing = turf.bearing(turf.point(start), turf.point(end));
+
+        newfiberMapbox.map.getSource(layerId + '_Symbol').setData(symbolGeojson);
+        counter = counter + 1;
+        if (counter > steps) {
+          clearInterval(window.routeTimer);
+        }
+      }, 100);
+      window.routeTimer_1 = setInterval(() => {
+        const start_1 = geojson.features[1].geometry.coordinates[counter_1 >= steps ? counter_1 - 1 : counter_1];
+        const end_1 = geojson.features[1].geometry.coordinates[counter_1 >= steps ? counter_1 : counter_1 + 1];
+        if (!start_1 || !end_1) {
+          return;
+        }
+        symbolGeojson_1.features[0].geometry.coordinates = geojson.features[1].geometry.coordinates[counter_1];
+        symbolGeojson_1.features[0].properties.bearing = turf.bearing(turf.point(start_1), turf.point(end_1));
+
+        newfiberMapbox.map.getSource(layerId + '_Symbol_1').setData(symbolGeojson_1);
+        counter_1 = counter_1 + 1;
+        if (counter_1 > steps) {
+          clearInterval(window.routeTimer_1);
+        }
+      }, 100);
+    }, 1000);
+    // if (!start || !end || !start_1 || !end_1) {
+    //   return;
+    // }
+
+    // symbolGeojson_1.features[0].geometry.coordinates = geojson.features[1].geometry.coordinates[counter_1];
+    // symbolGeojson_1.features[0].properties.bearing = turf.bearing(turf.point(start_1), turf.point(end_1));
+  };
   //移除图层
   static removeByIds(layernameList) {
     layernameList.forEach(layerName => {

diff --git a/src/assets/geojson/kaifeng/track.json b/src/assets/geojson/kaifeng/track.json
new file mode 100644
index 0000000..0b513ca
--- /dev/null
+++ b/src/assets/geojson/kaifeng/track.json
@@ -0,0 +1,87 @@
+{
+    "type": "FeatureCollection",
+    "features": [
+        {
+            "type": "Feature",
+            "properties": {
+                "fillcolor": "rgba(82, 214, 108,1)"
+            },
+            "geometry": {
+                "type": "LineString",
+                "coordinates": [
+                    [
+                        114.35720775300125,
+                        34.794029555366635
+                    ],
+                    [
+                        114.35723116921616,
+                        34.79331536081194
+                    ],
+                    [
+                        114.35741459623294,
+                        34.792367004108165
+                    ],
+                    [
+                        114.35757070433233,
+                        34.79176598792552
+                    ],
+                    [
+                        114.3567355260006,
+                        34.79178940414043
+                    ],
+                    [
+                        114.35661063952115,
+                        34.79070640420094
+                    ],
+                    [
+                        114.35428658019148,
+                        34.790817631221735
+                    ],
+                    [
+                        114.3540290018275,
+                        34.78942826913719
+                    ],
+                    [
+                        114.35312357485105,
+                        34.783878626203986
+                    ],
+                    [
+                        114.35297527215664,
+                        34.782598539789014
+                    ],
+                    [
+                        114.35307674242124,
+                        34.78218485332564
+                    ]
+                ]
+            }
+        },
+        {
+            "type": "Feature",
+            "properties": {
+                "fillcolor": "rgba(82, 214, 108,1)"
+            },
+            "geometry": {
+                "type": "LineString",
+                "coordinates": [
+                    [
+                        114.31333162031727,
+                        34.77774357789805
+                    ],
+                    [
+                        114.3249928953415,
+                        34.77688498335142
+                    ],
+                    [
+                        114.33248608411208,
+                        34.77629177257375
+                    ],
+                    [
+                        114.33371933809724,
+                        34.784003512683476
+                    ]
+                ]
+            }
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/assets/newImgs/car.png b/src/assets/newImgs/car.png
new file mode 100644
index 0000000..e9eb325
--- /dev/null
+++ b/src/assets/newImgs/car.png
Binary files differ
diff --git a/src/views/floodSys/floodYP/riskGisMap.vue b/src/views/floodSys/floodYP/riskGisMap.vue
index 48da94c..8033af8 100644
--- a/src/views/floodSys/floodYP/riskGisMap.vue
+++ b/src/views/floodSys/floodYP/riskGisMap.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script setup name="riskMapGis">
-import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
+import MapBox from '@/views/gisMapPage/gisMapBox'; //gis地图
 const { proxy } = getCurrentInstance();
 const allData = reactive({});
 const emits = defineEmits();
diff --git a/src/views/gisMapPage/gisMapBox.vue b/src/views/gisMapPage/gisMapBox.vue
index e67005e..4cb6ef1 100644
--- a/src/views/gisMapPage/gisMapBox.vue
+++ b/src/views/gisMapPage/gisMapBox.vue
@@ -1,37 +1,501 @@
 <template>
-  <div class="mapPage">
-    <div id="cesiumContainer"></div>
+  <div class="mapPage_risk">
+    <div id="mapboxContainer_risk"></div>
   </div>
 </template>
 <script>
-import { reactive, toRefs, onBeforeMount, onMounted, nextTick, onBeforeUnmount } from 'vue';
-import NewFiberMapOperate from './gisMapFunction';
-import axios from 'axios';
 import bus from '@/bus';
+import axios from 'axios';
+import kaifengWaterLabel1 from '@/assets/geojson/kaifeng/kaifengWaterLabel1.json';
+import kaifengWater from '@/assets/geojson/kaifeng/kaifengWater.json';
+import kaifengAllBoundary from '@/assets/geojson/kaifeng/kaifengAllBoundary.json';
+import kaiFengCenteralBoundary from '@/assets/geojson/kaifeng/kaiFengCenteralBoundary.json';
+import riverFlow from '@/assets/geojson/kaifeng/riverFlow.json';
+
 export default {
   components: {},
-  props: {},
-  setup(props) {
+  props: {
+    initJson: {
+      type: String,
+      default: () => '/static/libs/mapbox/style/floodOneMap.json',
+    },
+    loadCallback: {
+      type: Function,
+      default: () => function () {},
+    },
+  },
+  setup(props, event) {
     const allData = reactive({
-      movePosition: '113.934113,30.872118',
+      layerIds: [],
     });
+    let geojson = {
+      point: { type: 'FeatureCollection', features: [] },
+      polygon: { type: 'FeatureCollection', features: [] },
+      linestring: { type: 'FeatureCollection', features: [] },
+    };
+    let map = null;
+    let config = null;
+    let highlightLayers = {
+      highlight_point: 1,
+      //highlight_point1: 1,
+      highlight_polygon: 1,
+      highlight_linestring: 1,
+    };
     const initeMap = async () => {
-      window.newfiberMap = new NewFiberMapOperate('cesiumContainer', {
-        pitch: 55,
-        lng: 113.953,
-        lat: 30.906,
+      config = (await axios.get(props.initJson)).data;
+      let { sprites, l7 } = config.params;
+
+      window.newfiberMap_risk = new mapboxL7.Scene({
+        id: 'mapboxContainer_risk',
+        map: new mapboxL7.Mapbox({
+          style: config.params.init.style,
+          center: config.params.init.center,
+          zoom: config.params.init.zoom,
+        }),
       });
-      newfiberMap.map.on('mousemove', function (e) {
-        let movePosition = gcoord.transform(turf.point([e.lngLat.lng, e.lngLat.lat]), gcoord.GCJ02, gcoord.WGS84);
-        allData.movePosition = `${movePosition.geometry.coordinates[0].toFixed(6)},${movePosition.geometry.coordinates[1].toFixed(6)}`;
+      newfiberMap_risk.map.load = false;
+      map = newfiberMap_risk.map;
+      map.ogcLayers = [];
+      newfiberMap_risk.unLoadLayers = [];
+      (sprites || []).forEach(url => {
+        map.style._loadSprite(url.includes('http') ? url : window.location.href.split('#')[0] + url);
+      });
+      ((l7 || []).images || []).forEach(item =>
+        newfiberMap_risk.addImage(item.name, item.url.includes('http') ? item.url : window.location.href.split('#')[0] + item.url)
+      );
+      setTimeout(() => {
+        map.on('load', async () => {
+          const mouseLocation = new mapboxL7.MouseLocation({
+            transform: position => {
+              return [position[0].toFixed(6), position[1].toFixed(6)];
+            },
+          });
+          newfiberMap_risk.addControl(mouseLocation);
+          // !!!map.getSource('kaifengWater') && map.addSource('kaifengWater', { type: 'geojson', data: kaifengWater });
+          // !!!map.getLayer('kaifengWater') &&
+          //   map.addLayer({
+          //     id: 'kaifengWater',
+          //     type: 'fill',
+          //     source: 'kaifengWater',
+          //     paint: {
+          //       'fill-color': 'rgba(117, 207, 240,1)',
+          //     },
+          //   });
+          //addRiverFlow();
+          addWaterLabel();
+          //addAreaBoundary();
+          await loadData();
+
+          props.loadCallback && props.loadCallback();
+          // getLayerIdByClick();
+          (config.orders || []).forEach(item => setLayerOrder(...item));
+          newfiberMap_risk.getLayers().filter(i => highlightLayers[i.newfiberId] && (highlightLayers[i.newfiberId] = i));
+          // let timeout = setTimeout(() => {
+          let { pitch, center } = config.params.init;
+          pitch && newfiberMap_risk.map.setPitch(pitch);
+          center && newfiberMap_risk.map.setCenter(center);
+          //clearTimeout(timeout);
+          //}, 1000);
+          newfiberMap_risk.map.load = true;
+        });
+      }, 200);
+
+      let layerIds = (config.mapbox || []).map(i => i.id);
+      map.on('click', e => {
+        Object.values(highlightLayers).forEach(layer => {
+          if (layer.setData) layer.setData({ type: 'FeatureCollection', features: [] });
+        });
+        const feature = (
+          map.queryRenderedFeatures([
+            [e.point.x - 10 / 2, e.point.y - 10 / 2],
+            [e.point.x + 10 / 2, e.point.y + 10 / 2],
+          ]) || []
+        ).filter(i => layerIds.includes(i.layer.id) || i.layer.id == 'rainStation')[0];
+        if (feature) event.emit('map-click', Object.values(e.lngLat), feature.properties);
+        setHighlight(feature);
+      });
+      map.on('mouseenter', 'point', e => {
+        Object.values(highlightLayers).forEach(layer => {
+          if (layer.setData) layer.setData({ type: 'FeatureCollection', features: [] });
+        });
+        const feature = (
+          map.queryRenderedFeatures([
+            [e.point.x - 10 / 2, e.point.y - 10 / 2],
+            [e.point.x + 10 / 2, e.point.y + 10 / 2],
+          ]) || []
+        ).filter(i => layerIds.includes(i.layer.id))[0];
+        if (feature) event.emit('map-moveOn', Object.values(e.lngLat), feature.properties);
+        setHighlight(feature);
+      });
+      map.on('mouseleave', 'point', e => {
+        Object.values(highlightLayers).forEach(layer => {
+          if (layer.setData) layer.setData({ type: 'FeatureCollection', features: [] });
+        });
+        const feature = (
+          map.queryRenderedFeatures([
+            [e.point.x - 10 / 2, e.point.y - 10 / 2],
+            [e.point.x + 10 / 2, e.point.y + 10 / 2],
+          ]) || []
+        ).filter(i => layerIds.includes(i.layer.id))[0];
+        if (feature) event.emit('map-moveLeave', Object.values(e.lngLat), feature.properties);
       });
     };
-    onMounted(() => {
-      nextTick(() => {
-        initeMap();
+
+    const loadData = async () => {
+      let { mapbox, l7, ogc } = config;
+      if (mapbox)
+        //用mapbox添加水系
+        //axios.get(config.params.mvt + `/v1/geojson/hubei_xiaogan_water1`).then(({ data: geojson }) => {
+
+        // });
+        mapbox.forEach(item => {
+          let { mType, columns } = item;
+          let params = '';
+          if (columns) params = `?columns=${columns}`;
+          if (!!!map.getSource(item.id)) {
+            let flag = mType == 'geojson';
+            flag
+              ? map.addSource(item.id, {
+                  type: mType,
+                  data: geojson[item.id],
+                })
+              : map.addSource(item.id, {
+                  type: 'vector',
+                  tiles: [config.params.mvt + `/v1/${mType}/${item.key}/{z}/{x}/{y}` + params],
+                  tileSize: 512,
+                  scheme: 'xyz',
+                  maxzoom: 14,
+                  minzoom: 1,
+                });
+          }
+          map.addLayer({ ...item, source: item.id });
+          map.moveLayer(item.id, undefined);
+          allData.layerIds.push(item.id);
+        });
+      if (l7) {
+        if (!!!l7.length) return;
+        l7.forEach(item => {
+          let { id, columns, filter } = item;
+          let params = '';
+          if (columns) params += `columns=${columns}&`;
+          if (filter) params += `filter=${filter}&`;
+          id
+            ? axios.get(config.params.mvt + `/v1/geojson/${id}?` + params).then(({ data: geojson }) => initMapBoxL7Class(item, geojson))
+            : initMapBoxL7Class(item, geojson[item.key] || turf.featureCollection([]));
+        });
+      }
+      if (ogc)
+        ogc.forEach(item => {
+          let { id, type, params, methods } = item;
+          Object.keys(params).forEach(
+            i => (params[i] = typeof params[i] == 'string' ? (params[i].includes('||') ? eval(params[i]) : params[i]) : params[i])
+          );
+          let layer = new mapboxgl1[type](params);
+          layer.newfiberId = id;
+          methods.forEach(method => {
+            let ms = method.params.map(i => (typeof i == 'string' ? (i.includes('||') ? eval(i) : i) : i));
+            layer[method.name](...ms);
+          });
+          map.ogcLayers.push(layer);
+        });
+
+      function initMapBoxL7Class({ type, params, methods, id, show, key }, geojson) {
+        let layer = new mapboxL7[type](params).source(geojson);
+        methods.forEach(method => {
+          let ms = method.params.map(i => (typeof i == 'string' ? (i.includes('||') ? eval(i) : i) : i));
+          layer[method.name](...ms);
+        });
+        layer.newfiberId = key;
+        if (!show) return newfiberMap_risk.unLoadLayers.push(layer);
+        newfiberMap_risk.addLayer(layer);
+        allData.layerIds.push(key);
+      }
+    };
+
+    const setLayerVisible = ({ layername, isCheck }) => {
+      if (!!!window.newfiberMap_risk) return;
+      console.log('layername---', layername);
+      if (((config || {}).filter || {})[layername]) {
+        config.filter[layername].layerName.forEach((name, index) => {
+          let filter = map.getFilter(name);
+          let fValues = config.filter[layername].filter[index];
+          isCheck ? filter.push(...fValues) : (filter = filter.filter(i => !fValues.includes(i)));
+          map.setFilter(name, filter);
+        });
+        return config.filter[layername].easeTo && isCheck && map.easeTo(config.filter[layername].easeTo);
+      }
+      let features = Object.values(geojson)
+        .map(i => i.features)
+        .flat(Infinity)
+        .filter(i => i.properties.type == layername);
+      if (features.length) {
+        let types = Array.from(new Set(features.map(i => i.geometry.type.toLocaleLowerCase())));
+        types.forEach(type1 => {
+          if (map.getLayer(type1)) {
+            let filter = map.getFilter(type1);
+            if (!!!filter) return;
+            isCheck ? filter.push(layername) : (filter = filter.filter(i => i != layername));
+
+            map.setFilter(type1, filter);
+          }
+        });
+      }
+      let layer = newfiberMap_risk.getLayers().filter(i => i.newfiberId == layername)[0];
+      if (!!!layer) {
+        layer = newfiberMap_risk.unLoadLayers.filter(i => i.newfiberId == layername)[0];
+        isCheck && layer && newfiberMap_risk.addLayer(layer);
+      }
+      layer && layer[['hide', 'show'][Number(isCheck)]]();
+
+      layer = map.getLayer(layername);
+      layer && map.setLayoutProperty(layername, 'visibility', isCheck ? 'visible' : 'none');
+
+      layer = map.getLayer(layername + '_text');
+      layer && map.setLayoutProperty(layername, 'visibility', isCheck ? 'visible' : 'none');
+
+      layer = map.ogcLayers.filter(i => i.id == layername)[0];
+      layer && (layer.map ? layer[isCheck ? 'show' : 'hide']() : layer.addTo(map));
+    };
+
+    const getGeojsonByType = ({ type, callback }) => {
+      let geojs = turf.featureCollection(
+        Object.values(geojson)
+          .map(i => i.features)
+          .flat(Infinity)
+          .filter(i => i.properties.type == type)
+      );
+      callback && callback(geojs);
+    };
+
+    const removeLayers = ids => {
+      let { getLayers, removeAllLayer, removeLayer: removeLayerL7 } = newfiberMap_risk;
+      let { getLayer, removeLayer } = map;
+
+      if (!!!ids) {
+        allData.layerIds.forEach(id => getLayer(id) && removeLayer(id));
+        return removeAllLayer();
+      }
+
+      ids.forEach(id => {
+        getLayer(id) && removeLayer(id);
+        getLayers().forEach(layer => layer.newfiberId == id && removeLayerL7(layer));
       });
+    };
+
+    const removeMapDatas = types => {
+      !!!types
+        ? Object.keys(geojson).forEach(key => (geojson[key].features.length = 0))
+        : Object.keys(geojson).forEach(
+            key => (geojson[key].features = geojson[key].features.filter(feature => !types.includes(feature.properties.type)))
+          );
+      return refreshGeoJSON();
+    };
+
+    const setLegendData = list => {
+      list.forEach(i => {
+        i.data &&
+          i.data.features &&
+          i.data.features.forEach(a => {
+            if (!!!a || !!!a.properties) return;
+            a.properties.type = a.properties.type || i.layername;
+            a.properties.name =
+              a.properties.name ||
+              a.properties.Name ||
+              a.properties.stName ||
+              a.properties.roadName ||
+              a.properties.sewageName ||
+              a.properties.sectionName ||
+              a.properties.pumpName ||
+              a.properties.projectName;
+          });
+      });
+
+      let types = {};
+      list
+        .map(i => i.data && i.data.features)
+        .filter(Boolean)
+        .flat(Infinity)
+        .forEach(feature => {
+          if (!!!feature || !!!feature.properties) return;
+          feature.properties.geometry = Terraformer.WKT.convert(feature.geometry);
+          let type = feature.geometry.type.toLocaleLowerCase();
+          let flag = type.includes('multi');
+          type = type.replaceAll('multi', '');
+          let features = null;
+          if (flag) features = turf.flatten(feature).features;
+          !!!types[type] && (types[type] = []);
+          types[type].push(...(features ? features : [feature]));
+        });
+      Object.keys(types).forEach(key => geojson[key].features.push(...types[key]));
+      refreshGeoJSON();
+    };
+
+    const refreshGeoJSON = () => {
+      Object.keys(geojson).forEach(key => map.getSource(key) && map.getSource(key).setData(geojson[key]));
+    };
+
+    const setGeoJSON = ({ json, key }) => {
+      // geojson[key] = json;
+      let layer = newfiberMap_risk.getLayers().filter(i => i.newfiberId == key)[0];
+      if (!!!layer) {
+        layer = newfiberMap_risk.unLoadLayers.filter(i => i.newfiberId == key)[0];
+        layer && newfiberMap_risk.addLayer(layer);
+      }
+      if (layer) layer.setData(json);
+      setLegendData([{ data: json, layername: key, type: 'point' }]);
+    };
+
+    const setLayerOrder = (sourceLayer, targetLayer) => {
+      map.moveLayer(sourceLayer, targetLayer);
+    };
+
+    const setHighlight = (features = {}) => {
+      let array = {};
+      features = features.forEach ? features : [features];
+      Object.values(highlightLayers).forEach(layer => layer.setData && layer.setData({ type: 'FeatureCollection', features: [] }));
+      features.forEach(feature => {
+        if (!!!feature || !Boolean(Object.keys(feature).length) || !feature.properties.geometry) return;
+        let geometry = Terraformer.WKT.parse(feature.properties.geometry);
+        let geoFeature = turf.feature(geometry, feature.properties);
+        let type = geometry.type.toLocaleLowerCase().replaceAll('multi', '');
+        let key = Object.keys(highlightLayers).filter(key => key.lastIndexOf(type) > -1)[0];
+        if (!array[key]) array[key] = [];
+        array[key].push(geoFeature);
+      });
+      Object.keys(array).forEach(
+        key => highlightLayers[key] && highlightLayers[key].setData({ type: 'FeatureCollection', features: array[key] })
+      );
+    };
+
+    const getLayerIdByClick = () => {
+      map.getStyle().layers.forEach(i =>
+        map.on('click', i.id, (a, b, c, d) => {
+          console.log('layer-id', a.features[0].layer.id);
+        })
+      );
+    };
+
+    //添加政区边界
+    const addAreaBoundary = () => {
+      !!!map.getSource('kaifengAllBoundary') && map.addSource('kaifengAllBoundary', { type: 'geojson', data: kaifengAllBoundary });
+      !!!map.getLayer('kaifengAllBoundary') &&
+        map.addLayer({
+          id: 'kaifengAllBoundary',
+          type: 'line',
+          source: 'kaifengAllBoundary',
+
+          paint: {
+            'line-color': 'rgba(255,208,76,1)',
+            'line-width': 6,
+          },
+        });
+      !!!map.getSource('kaiFengCenteralBoundary') &&
+        map.addSource('kaiFengCenteralBoundary', { type: 'geojson', data: kaiFengCenteralBoundary });
+      !!!map.getLayer('kaiFengCenteralBoundary') &&
+        map.addLayer({
+          id: 'kaiFengCenteralBoundary',
+          type: 'line',
+          source: 'kaiFengCenteralBoundary',
+
+          paint: {
+            'line-color': 'rgba(228,64,50,1)',
+            'line-width': 6,
+          },
+        });
+    };
+    //添加河流标注
+    const addWaterLabel = () => {
+      !!!map.getSource('kaifengWaterLabel1') && map.addSource('kaifengWaterLabel1', { type: 'geojson', data: kaifengWaterLabel1 });
+      !!!map.getLayer('kaifengWaterLabel1') &&
+        map.addLayer({
+          id: 'kaifengWaterLabel1',
+          type: 'symbol',
+          source: 'kaifengWaterLabel1',
+          layout: {
+            'text-field': ['get', 'name'],
+            'text-font': ['KlokanTech Noto Sans Regular'],
+            'text-transform': 'uppercase',
+          },
+          paint: {
+            'text-halo-color': 'rgba(238, 251, 255,1)',
+            'text-color': 'rgba(30, 30, 30,1)',
+            'icon-opacity': 1,
+            'text-halo-width': 1,
+          },
+        });
+      !!!map.getSource('kaifengWaterLabel2') && map.addSource('kaifengWaterLabel2', { type: 'geojson', data: kaifengWater });
+      !!!map.getLayer('kaifengWaterLabel2') &&
+        map.addLayer({
+          id: 'kaifengWaterLabel2',
+          type: 'symbol',
+          source: 'kaifengWaterLabel2',
+          layout: {
+            'symbol-placement': 'line',
+            'text-field': ['get', 'name'],
+            'text-font': ['KlokanTech Noto Sans Regular'],
+            'text-letter-spacing': 0.1,
+            'text-rotation-alignment': 'map',
+            'text-size': {
+              base: 1.4,
+              stops: [
+                [10, 16],
+                [20, 22],
+              ],
+            },
+            'text-transform': 'uppercase',
+          },
+          paint: {
+            'text-halo-color': 'rgba(238, 251, 255,1)',
+            'text-color': 'rgba(30, 30, 30,1)',
+            'icon-opacity': 1,
+            'text-halo-width': 1,
+          },
+        });
+    };
+    //添加河道流向
+    const addRiverFlow = () => {
+      let layer = new mapboxL7.LineLayer({})
+        .source(riverFlow)
+        .size(6)
+        .shape('line')
+        .texture('arrow')
+        .color('rgb(117, 207, 240)')
+        .animate({
+          interval: 1, // 间隔
+          duration: 1.5, // 持续时间，延时
+          trailLength: 2, // 流线长度
+        })
+        .style({
+          opacity: 0.6,
+          lineTexture: true, // 开启线的贴图功能
+          iconStep: 200, // 设置贴图纹理的间距
+          borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
+          borderColor: '#fff', // 默认为 #ccc
+        });
+      newfiberMap_risk.addLayer(layer);
+    };
+    onMounted(() => {
+      initeMap();
+      bus.on('setLayerVisible', setLayerVisible);
+      bus.on('setLegendData', setLegendData);
+      bus.on('setGeoJSON', setGeoJSON);
+      bus.on('getGeojsonByType', getGeojsonByType);
+      bus.on('removeLayers', removeLayers);
+      bus.on('removeMapDatas', removeMapDatas);
+      bus.on('setHighlight', setHighlight);
     });
-    onBeforeUnmount(() => {});
+
+    onBeforeUnmount(() => {
+      bus.off('setLayerVisible');
+      bus.off('setLegendData');
+      bus.off('setGeoJSON');
+      bus.off('getGeojsonByType');
+      bus.off('removeMapDatas');
+      bus.off('setHighlight');
+      newfiberMap_risk.destroy();
+      newfiberMap_risk = null;
+    });
+
     return {
       ...toRefs(allData),
       initeMap,
@@ -40,7 +504,7 @@
 };
 </script>
 <style lang="scss">
-.mapPage {
+.mapPage_risk {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -48,15 +512,16 @@
   top: 0px;
   z-index: 10;
   background: lavender;
-  #cesiumContainer {
+  #mapboxContainer_risk {
     width: 100%;
     height: 100%;
     position: absolute;
   }
-  .coordinateContainer {
-    position: absolute;
-    left: 20px;
-    bottom: 30px;
+  .l7-control-mouse-location {
+    background: none;
+  }
+  .l7-control-mouse-location {
+    color: #ffffff;
   }
 }
 </style>
diff --git a/src/views/sponeScreen/HaiMianScreen/index.vue b/src/views/sponeScreen/HaiMianScreen/index.vue
index e6c4170..1474319 100644
--- a/src/views/sponeScreen/HaiMianScreen/index.vue
+++ b/src/views/sponeScreen/HaiMianScreen/index.vue
@@ -121,7 +121,9 @@
     <img src="@/assets/newImgs/HMScreen/headLight.png" alt="" class="bottomLightDXR" />
 
     <!-- 三维管网弹窗 -->
-    <el-dialog v-model="showPipe" title="三维管网" width="1600px" append-to-body></el-dialog>
+    <el-dialog v-model="showPipe" title="三维管网" style="width: 1600px; height: 700px" @close="closePipe" append-to-body>
+      <GisMapMF style="position: relative"></GisMapMF>
+    </el-dialog>
   </div>
 </template>
 
@@ -176,7 +178,9 @@
   //NewFiberMapUtils.removeByIds(Object.values(NewFiberMapUtils.defaultParams.keys));
   if (id == 4) {
   }
-  if (id == 5) NewFiberMapUtils.defaultPatrolDemo(newfiberMap);
+  if (id == 5) {
+    //  NewFiberMapUtils.defaultPatrolDemo(newfiberMap);
+  }
 }
 // 图例控制
 function controlLegend() {
@@ -232,6 +236,22 @@
   // console.log('point', point);
   // console.log('鼠标移出--', properties);
 };
+//关闭三维管网弹窗
+const closePipe = () => {
+  if (newfiberMap) {
+    let _originalGLContext = newfiberMap.getMap().scene?.context._originalGLContext;
+    newfiberMap.getMap().imageryLayers.removeAll();
+    newfiberMap.getMap().entities.removeAll();
+    newfiberMap.getMap().scene.primitives.removeAll();
+    newfiberMap.getMap().destroy();
+    if (_originalGLContext) {
+      _originalGLContext.getExtension('WEBGL_lose_context').loseContext();
+      _originalGLContext = null;
+    }
+    newfiberMap.baseMap.map = null;
+    newfiberMap = null;
+  }
+};
 onMounted(() => {
   getWeather();
   // 获取项目片区点击
@@ -241,20 +261,20 @@
 });
 onBeforeUnmount(() => {
   bus.off('checkProjectArea');
-  // if (!newfiberMap) return;
-  // if (newfiberMap) {
-  //   let _originalGLContext = newfiberMap.getMap().scene?.context._originalGLContext;
-  //   newfiberMap.getMap().imageryLayers.removeAll();
-  //   newfiberMap.getMap().entities.removeAll();
-  //   newfiberMap.getMap().scene.primitives.removeAll();
-  //   newfiberMap.getMap().destroy();
-  //   if (_originalGLContext) {
-  //     _originalGLContext.getExtension('WEBGL_lose_context').loseContext();
-  //     _originalGLContext = null;
-  //   }
-  //   newfiberMap.baseMap.map = null;
-  //   newfiberMap = null;
-  // }
+  if (!newfiberMap) return;
+  if (newfiberMap) {
+    let _originalGLContext = newfiberMap.getMap().scene?.context._originalGLContext;
+    newfiberMap.getMap().imageryLayers.removeAll();
+    newfiberMap.getMap().entities.removeAll();
+    newfiberMap.getMap().scene.primitives.removeAll();
+    newfiberMap.getMap().destroy();
+    if (_originalGLContext) {
+      _originalGLContext.getExtension('WEBGL_lose_context').loseContext();
+      _originalGLContext = null;
+    }
+    newfiberMap.baseMap.map = null;
+    newfiberMap = null;
+  }
 });
 </script>
 
diff --git a/src/views/sponeScreen/gisMF/cesiumMap.vue b/src/views/sponeScreen/gisMF/cesiumMap.vue
index eb408d4..c5eae99 100644
--- a/src/views/sponeScreen/gisMF/cesiumMap.vue
+++ b/src/views/sponeScreen/gisMF/cesiumMap.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- 海绵综合一张图地图cesium -->
-  <div class="mapContainerMF" id="mapContainerMF" v-show="popupShow">
+  <div class="mapContainerMF" id="mapContainerMF">
     <cesiumPopup></cesiumPopup>
   </div>
 </template>
@@ -33,22 +33,22 @@
   //newfiberMap.setBaseMapByEnum([NewFiberMap.Enum.BaseMap.AMAP_VECTOR_V1]);
   newfiberMap.setView({
     lng: 114.312,
-    lat: 34.502,
+    lat: 34.802,
     heading: 2.281299097855777,
-    zoom: 16358.12942752382,
+    zoom: 358.12942752382,
     pitch: -25.2508969308367,
     roll: 0.005453465256790101,
   });
-  newfiberMap.loadWmsLayer({
-    url: '/geoserver/henan_kaifeng/wms',
-    layers: 'henan_kaifeng:' + 'henan_kaifeng_lake',
-    visible: true,
-  });
-  newfiberMap.loadWmsLayer({
-    url: '/geoserver/henan_kaifeng/wms',
-    layers: 'henan_kaifeng:' + 'henan_kaifeng_river',
-    visible: true,
-  });
+  // newfiberMap.loadWmsLayer({
+  //   url: '/geoserver/henan_kaifeng/wms',
+  //   layers: 'henan_kaifeng:' + 'henan_kaifeng_lake',
+  //   visible: true,
+  // });
+  // newfiberMap.loadWmsLayer({
+  //   url: '/geoserver/henan_kaifeng/wms',
+  //   layers: 'henan_kaifeng:' + 'henan_kaifeng_river',
+  //   visible: true,
+  // });
   newfiberMap.registerLeftClickEvt(async (position, point, feature) => {
     if (!feature) return;
     if (
@@ -81,20 +81,34 @@
   });
   NewFiberMapUtils.weatherToMap(newfiberMap);
 };
-
+//添加三维管网
+const addCesiumPipe = () => {
+  let dataList = [
+    'https://server1.wh-nf.cn:9000/newfiber-standard-kaifeng/2024/06/24/pipeData/ysline/ysline.scp',
+    'https://server1.wh-nf.cn:9000/newfiber-standard-kaifeng/2024/06/24/pipeData/YS_Point/YS_Point.scp',
+    'https://server1.wh-nf.cn:9000/newfiber-standard-kaifeng/2024/06/24/pipeData/wsLine/wsLine.scp',
+    'https://server1.wh-nf.cn:9000/newfiber-standard-kaifeng/2024/06/24/pipeData/WS_Point/WS_Point.scp',
+    'https://server1.wh-nf.cn:9000/newfiber-standard-kaifeng/2024/06/24/pipeData/hsLine/hsLine.scp',
+    'https://server1.wh-nf.cn:9000/newfiber-standard-kaifeng/2024/06/24/pipeData/hs_Point/hs_Point.scp',
+  ];
+  dataList.forEach((url, index) => {
+    newfiberVectorLayer.add3DModelLayers(newfiberMap, url, 'cesiumPipe' + index);
+  });
+};
 onMounted(() => {
   createIniteMap();
-  window.currentWeatherTimer = null;
-  newfiberVectorLayer.setCurrentWeather();
-  window.currentWeatherTimer = setInterval(() => {
-    newfiberVectorLayer.setCurrentWeather();
-  }, 300000);
+  addCesiumPipe();
+  // window.currentWeatherTimer = null;
+  // newfiberVectorLayer.setCurrentWeather();
+  // window.currentWeatherTimer = setInterval(() => {
+  //   newfiberVectorLayer.setCurrentWeather();
+  // }, 300000);
 
-  bus.on('closeCesiumPopup', () => {
-    popupShow.value = false;
-    window.PopupInfo && window.PopupInfo.hide();
-    window.PopupInfo = null;
-  });
+  // bus.on('closeCesiumPopup', () => {
+  //   popupShow.value = false;
+  //   window.PopupInfo && window.PopupInfo.hide();
+  //   window.PopupInfo = null;
+  // });
 });
 onBeforeUnmount(() => {
   clearInterval(window.currentWeatherTimer);
diff --git a/src/views/sponeScreen/gisMF/mapboxVectorLayer.js b/src/views/sponeScreen/gisMF/mapboxVectorLayer.js
index f2a471b..ce517de 100644
--- a/src/views/sponeScreen/gisMF/mapboxVectorLayer.js
+++ b/src/views/sponeScreen/gisMF/mapboxVectorLayer.js
@@ -72,6 +72,7 @@
             'icon-size': 0.8,
             'text-field': '{name}',
             'text-font': ['KlokanTech Noto Sans Regular'],
+            'icon-rotate': ['get', 'bearing'],
             'text-size': 16,
             'text-line-height': 3,
             'text-anchor': 'bottom',
@@ -253,6 +254,88 @@
       });
     }
   }
+  //添加轨迹动态线
+  static addDynamicRoute = (layerId, geojson, icon) => {
+    window.routeTimer = null;
+    window.routeTimer_1 = null;
+    this.addGeojsonLine(layerId, geojson, 10);
+    let symbolGeojson = turf.featureCollection([
+      turf.point(geojson.features[0].geometry.coordinates[0], {
+        bearing: turf.bearing(
+          turf.point(geojson.features[0].geometry.coordinates[0]),
+          turf.point(geojson.features[0].geometry.coordinates[1])
+        ),
+      }),
+    ]);
+    let symbolGeojson_1 = turf.featureCollection([
+      turf.point(geojson.features[1].geometry.coordinates[0], {
+        bearing: turf.bearing(
+          turf.point(geojson.features[1].geometry.coordinates[0]),
+          turf.point(geojson.features[1].geometry.coordinates[1])
+        ),
+      }),
+    ]);
+    this.addGeojsonSymbol(layerId + '_Symbol', symbolGeojson, icon);
+    this.addGeojsonSymbol(layerId + '_Symbol_1', symbolGeojson_1, icon);
+    const lineDistance = turf.length(geojson.features[0]);
+    const lineDistance_1 = turf.length(geojson.features[1]);
+    const arc = [];
+    const arc_1 = [];
+    const steps = 100;
+    for (let i = 0; i < lineDistance; i += lineDistance / steps) {
+      const segment = turf.along(geojson.features[0], i);
+      arc.push(segment.geometry.coordinates);
+    }
+    for (let i = 0; i < lineDistance_1; i += lineDistance_1 / steps) {
+      const segment = turf.along(geojson.features[1], i);
+      arc_1.push(segment.geometry.coordinates);
+    }
+    geojson.features[0].geometry.coordinates = arc;
+    geojson.features[1].geometry.coordinates = arc_1;
+    let counter = 0;
+    let counter_1 = 0;
+
+    const start_1 = geojson.features[1].geometry.coordinates[counter_1 >= steps ? counter_1 - 1 : counter_1];
+    const end_1 = geojson.features[1].geometry.coordinates[counter_1 >= steps ? counter_1 : counter_1 + 1];
+    setTimeout(() => {
+      window.routeTimer = setInterval(() => {
+        const start = geojson.features[0].geometry.coordinates[counter >= steps ? counter - 1 : counter];
+        const end = geojson.features[0].geometry.coordinates[counter >= steps ? counter : counter + 1];
+        if (!start || !end) {
+          return;
+        }
+        symbolGeojson.features[0].geometry.coordinates = geojson.features[0].geometry.coordinates[counter];
+        symbolGeojson.features[0].properties.bearing = turf.bearing(turf.point(start), turf.point(end));
+
+        newfiberMapbox.map.getSource(layerId + '_Symbol').setData(symbolGeojson);
+        counter = counter + 1;
+        if (counter > steps) {
+          clearInterval(window.routeTimer);
+        }
+      }, 100);
+      window.routeTimer_1 = setInterval(() => {
+        const start_1 = geojson.features[1].geometry.coordinates[counter_1 >= steps ? counter_1 - 1 : counter_1];
+        const end_1 = geojson.features[1].geometry.coordinates[counter_1 >= steps ? counter_1 : counter_1 + 1];
+        if (!start_1 || !end_1) {
+          return;
+        }
+        symbolGeojson_1.features[0].geometry.coordinates = geojson.features[1].geometry.coordinates[counter_1];
+        symbolGeojson_1.features[0].properties.bearing = turf.bearing(turf.point(start_1), turf.point(end_1));
+
+        newfiberMapbox.map.getSource(layerId + '_Symbol_1').setData(symbolGeojson_1);
+        counter_1 = counter_1 + 1;
+        if (counter_1 > steps) {
+          clearInterval(window.routeTimer_1);
+        }
+      }, 100);
+    }, 1000);
+    // if (!start || !end || !start_1 || !end_1) {
+    //   return;
+    // }
+
+    // symbolGeojson_1.features[0].geometry.coordinates = geojson.features[1].geometry.coordinates[counter_1];
+    // symbolGeojson_1.features[0].properties.bearing = turf.bearing(turf.point(start_1), turf.point(end_1));
+  };
   //移除图层
   static removeByIds(layernameList) {
     layernameList.forEach(layerName => {
diff --git a/src/views/sponeScreen/longYW/index.vue b/src/views/sponeScreen/longYW/index.vue
index a86002a..d19ac56 100644
--- a/src/views/sponeScreen/longYW/index.vue
+++ b/src/views/sponeScreen/longYW/index.vue
@@ -29,7 +29,10 @@
 import PublicAdvice from '@/views/sponeScreen/longYW/PublicAdvice.vue'; //公众建议
 import PromotionTraining from '@/views/sponeScreen/longYW/PromotionTraining.vue'; //宣传培训
 import ManualSampling from '@/views/sponeScreen/longYW/ManualSampling.vue'; //人工采样
-
+import newfiberMapBoxVectorLayer from '@/views/sponeScreen/gisMF/mapboxVectorLayer.js';
+import track from '@/assets/geojson/kaifeng/track.json';
+import car from '@/assets/newImgs/car.png';
+import { onBeforeUnmount } from 'vue';
 const { proxy } = getCurrentInstance();
 // 面板内容展开收起控制
 const props = defineProps({
@@ -45,7 +48,20 @@
   },
   { immediate: true }
 );
-onMounted(() => {});
+onMounted(() => {
+  newfiberMapBoxVectorLayer.addDynamicRoute('dynamicRoute', track, car);
+  newfiberMapbox.map.easeTo({
+    center: [114.342, 34.795],
+    zoom: 13,
+  });
+});
+onBeforeUnmount(() => {
+  newfiberMapBoxVectorLayer.removeByIds(['dynamicRoute', 'dynamicRoute_Symbol', 'dynamicRoute_Symbol_1']);
+  clearInterval(window.routeTimer);
+  clearInterval(window.routeTimer_1);
+  window.routeTimer = null;
+  window.routeTimer_1 = null;
+});
 </script>
 
 <style lang="scss" scoped></style>