diff --git a/config/config.ts b/config/config.ts
index 0aa2e02d3bd31b91206ec5e0c55c864384dbfb06..e22eb2eceff9325a3c6f8c17d267a9c196e4c2f0 100644
--- a/config/config.ts
+++ b/config/config.ts
@@ -34,6 +34,9 @@ export default defineConfig({
     {
       src: 'http://123.157.223.158:30010/CooGL/version/v1.4/CooGL.js',
     },
+    {
+      src: '//api.map.baidu.com/api?type=webgl&v=1.0&ak=U5XoaKW8QCNaROPQ96oh5a7NlVP9N4hW"',
+    },
   ],
   base: '/cd-comprehensive/',
   publicPath: '/cd-comprehensive/',
diff --git a/package.json b/package.json
index 87441a8b17a4f65afdb37ca6d7bcd9177c3df37a..9acc01e809694029a3ae40495c74dd0fa3e5ec2b 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@ant-design/icons": "^5.0.1",
     "@ant-design/pro-components": "^2.4.4",
+    "@types/bmapgl": "^0.0.7",
     "@types/color": "^4.2.0",
     "@types/crypto-js": "^4.2.2",
     "@types/lodash": "^4.17.12",
@@ -29,6 +30,7 @@
     "gsap": "^3.12.5",
     "js-base64": "^3.7.7",
     "lodash": "^4.17.21",
+    "react-bmapgl": "^0.2.28",
     "react-countup": "^6.5.3",
     "react-infinite-scroller": "^1.2.6"
   },
diff --git a/src/.DS_Store b/src/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..068e315868462f433d5bfe4b99dea3c7722368f9
Binary files /dev/null and b/src/.DS_Store differ
diff --git a/src/components/BMapView/index.tsx b/src/components/BMapView/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4be926bd58b431da00c9b53166da39411e763c80
--- /dev/null
+++ b/src/components/BMapView/index.tsx
@@ -0,0 +1,23 @@
+import { forwardRef, PropsWithChildren } from 'react';
+import { Map } from 'react-bmapgl';
+import type { MapProps } from 'react-bmapgl/dist/Map/Map';
+import mapStyle from './mapStyle.json';
+
+interface PropsType extends MapProps {}
+
+/** 封装地图 */
+const MapView = forwardRef<any, PropsWithChildren<PropsType>>((props, ref) => {
+  const { children, ...reset } = props;
+  return (
+    <Map
+      enableScrollWheelZoom
+      ref={ref}
+      mapStyleV2={{ styleJson: mapStyle }}
+      {...reset}
+    >
+      {children}
+    </Map>
+  );
+});
+
+export default MapView;
diff --git a/src/components/BMapView/mapStyle.json b/src/components/BMapView/mapStyle.json
new file mode 100644
index 0000000000000000000000000000000000000000..ec4143baa5ace1bb323c1fb7dd4df10fca1be9ca
--- /dev/null
+++ b/src/components/BMapView/mapStyle.json
@@ -0,0 +1,1323 @@
+[
+  {
+    "featureType": "land",
+    "elementType": "geometry",
+    "stylers": {
+      "color": "#1e588bff"
+    }
+  },
+  {
+    "featureType": "water",
+    "elementType": "geometry",
+    "stylers": {
+      "color": "#3472c0ff",
+      "opacity": "3b"
+    }
+  },
+  {
+    "featureType": "green",
+    "elementType": "geometry",
+    "stylers": {
+      "color": "#3bff65ff",
+      "opacity": "21"
+    }
+  },
+  {
+    "featureType": "building",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "manmade",
+    "elementType": "geometry",
+    "stylers": {
+      "color": "#414a64ff",
+      "opacity": "14"
+    }
+  },
+  {
+    "featureType": "local",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "subwaystation",
+    "elementType": "geometry",
+    "stylers": {
+      "color": "#113549ff"
+    }
+  },
+  {
+    "featureType": "education",
+    "elementType": "geometry",
+    "stylers": {
+      "color": "#2ea1b9ff",
+      "opacity": "1a"
+    }
+  },
+  {
+    "featureType": "road",
+    "elementType": "geometry.stroke",
+    "stylers": {
+      "color": "#1a3158ff",
+      "opacity": "14"
+    }
+  },
+  {
+    "featureType": "railway",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "poilabel",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "poilabel",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "highway",
+    "elementType": "geometry.fill",
+    "stylers": {
+      "color": "#87b0d4ff",
+      "opacity": "ed"
+    }
+  },
+  {
+    "featureType": "cityhighway",
+    "elementType": "geometry.fill",
+    "stylers": {
+      "color": "#87b0d4ff",
+      "opacity": "82"
+    }
+  },
+  {
+    "featureType": "road",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "districtlabel",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+      "color": "#112031ff"
+    }
+  },
+  {
+    "featureType": "districtlabel",
+    "elementType": "labels.text.fill",
+    "stylers": {
+      "color": "#a4c2e2ff"
+    }
+  },
+  {
+    "featureType": "manmade",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+      "color": "#102031ff",
+      "opacity": "7a"
+    }
+  },
+  {
+    "featureType": "manmade",
+    "elementType": "labels.text.fill",
+    "stylers": {
+      "color": "#8ec1e6ff",
+      "opacity": "7a"
+    }
+  },
+  {
+    "featureType": "shopping",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "road",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+      "color": "#112031ff",
+      "opacity": "ff",
+      "weight": "2"
+    }
+  },
+  {
+    "featureType": "road",
+    "elementType": "labels.text.fill",
+    "stylers": {
+      "color": "#c2d9f1ff",
+      "opacity": "d9"
+    }
+  },
+  {
+    "featureType": "entertainment",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "on",
+      "color": "#ebaff8ff",
+      "opacity": "14"
+    }
+  },
+  {
+    "featureType": "medical",
+    "elementType": "geometry",
+    "stylers": {
+      "color": "#ffa3b6ff",
+      "opacity": "1a"
+    }
+  },
+  {
+    "featureType": "medical",
+    "elementType": "labels.text.fill",
+    "stylers": {
+      "color": "#ffcdcdff",
+      "opacity": "70"
+    }
+  },
+  {
+    "featureType": "education",
+    "elementType": "labels.text.fill",
+    "stylers": {
+      "color": "#7ae8ffff",
+      "opacity": "70"
+    }
+  },
+  {
+    "featureType": "water",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+      "color": "#102031ff"
+    }
+  },
+  {
+    "featureType": "water",
+    "elementType": "labels.text.fill",
+    "stylers": {
+      "color": "#dfe8ffff"
+    }
+  },
+  {
+    "featureType": "subwaylabel",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "subwaylabel",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "highrailway",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "local",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "local",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "arterial",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "arterial",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "cityhighway",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "provincialway",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "nationalway",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "tertiaryway",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "tertiaryway",
+    "elementType": "labels.text",
+    "stylers": {
+      "fontsize": "30"
+    }
+  },
+  {
+    "featureType": "nationalway",
+    "elementType": "labels.text",
+    "stylers": {
+      "fontsize": "30"
+    }
+  },
+  {
+    "featureType": "provincialway",
+    "elementType": "labels.text",
+    "stylers": {
+      "fontsize": "30"
+    }
+  },
+  {
+    "featureType": "cityhighway",
+    "elementType": "labels.text",
+    "stylers": {
+      "fontsize": "30"
+    }
+  },
+  {
+    "featureType": "arterial",
+    "elementType": "labels.text",
+    "stylers": {
+      "fontsize": "30"
+    }
+  },
+  {
+    "featureType": "fourlevelway",
+    "elementType": "labels.text",
+    "stylers": {
+      "fontsize": "30"
+    }
+  },
+  {
+    "featureType": "road",
+    "elementType": "labels.text",
+    "stylers": {
+      "fontsize": "34"
+    }
+  },
+  {
+    "featureType": "highway",
+    "elementType": "labels.text",
+    "stylers": {
+      "fontsize": "30"
+    }
+  },
+  {
+    "featureType": "highwaysign",
+    "elementType": "labels.text.fill",
+    "stylers": {
+      "color": "#ffffffff"
+    }
+  },
+  {
+    "featureType": "provincialwaysign",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+      "color": "#112031ff",
+      "opacity": "73",
+      "weight": "1"
+    }
+  },
+  {
+    "featureType": "nationalwaysign",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+      "color": "#112031ff",
+      "opacity": "4f"
+    }
+  },
+  {
+    "featureType": "nationalwaysign",
+    "elementType": "labels.text.fill",
+    "stylers": {
+      "color": "#fdfbfbff"
+    }
+  },
+  {
+    "featureType": "provincialwaysign",
+    "elementType": "labels.text.fill",
+    "stylers": {
+      "color": "#fdfcfcff"
+    }
+  },
+  {
+    "featureType": "subwaylabel",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+      "color": "#112031ff",
+      "opacity": "80"
+    }
+  },
+  {
+    "featureType": "subwaylabel",
+    "elementType": "labels.text.fill",
+    "stylers": {
+      "color": "#ffffffff"
+    }
+  },
+  {
+    "featureType": "tertiarywaysign",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+      "color": "#112031ff",
+      "opacity": "00"
+    }
+  },
+  {
+    "featureType": "tertiarywaysign",
+    "elementType": "labels.text.fill",
+    "stylers": {
+      "color": "#112031ff"
+    }
+  },
+  {
+    "featureType": "subway",
+    "elementType": "geometry.fill",
+    "stylers": {
+      "color": "#15be6cff",
+      "opacity": "80"
+    }
+  },
+  {
+    "featureType": "transportation",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "on",
+      "opacity": "14"
+    }
+  },
+  {
+    "featureType": "nationalway",
+    "elementType": "geometry.fill",
+    "stylers": {
+      "color": "#87b0d4ff",
+      "opacity": "ff"
+    }
+  },
+  {
+    "featureType": "provincialway",
+    "elementType": "geometry.fill",
+    "stylers": {
+      "color": "#87b0d4ff"
+    }
+  },
+  {
+    "featureType": "subway",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "subway",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "highwaysign",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+      "color": "#141616ff",
+      "opacity": "4f"
+    }
+  },
+  {
+    "featureType": "vacationway",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "scenicspotsway",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "local",
+    "elementType": "geometry.fill",
+    "stylers": {
+      "color": "#a39999ff",
+      "opacity": "1c"
+    }
+  },
+  {
+    "featureType": "fourlevelway",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "scenicspots",
+    "elementType": "geometry",
+    "stylers": {
+      "color": "#3bff65ff",
+      "opacity": "0f"
+    }
+  },
+  {
+    "featureType": "scenicspots",
+    "elementType": "labels.text",
+    "stylers": {
+      "fontsize": "28"
+    }
+  },
+  {
+    "featureType": "scenicspots",
+    "elementType": "labels.text.fill",
+    "stylers": {
+      "color": "#fffeeeff"
+    }
+  },
+  {
+    "featureType": "scenicspots",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+      "color": "#14180aff",
+      "opacity": "4a"
+    }
+  },
+  {
+    "featureType": "water",
+    "elementType": "labels.text",
+    "stylers": {
+      "fontsize": "26"
+    }
+  },
+  {
+    "featureType": "manmade",
+    "elementType": "labels.text",
+    "stylers": {
+      "fontsize": "26"
+    }
+  },
+  {
+    "featureType": "education",
+    "elementType": "labels.text",
+    "stylers": {
+      "fontsize": "26"
+    }
+  },
+  {
+    "featureType": "HDLLCX",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "HDLLDX",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "HDLLSS",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "trafficlight",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "HDLLSX",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "HDLLZSYX",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "HDLLZXYS",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "HDLLDS",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "HDLLDD",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "roadarrow",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "HDLLDS",
+    "elementType": "geometry.fill",
+    "stylers": {
+      "color": "#722c2cff",
+      "opacity": "0f"
+    }
+  },
+  {
+    "featureType": "HDTEXTBUS",
+    "elementType": "labels.text.fill",
+    "stylers": {
+      "color": "#f3efa9ff"
+    }
+  },
+  {
+    "featureType": "footbridge",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "highwaysign",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "highwaysign",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "nationalwaysign",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "nationalwaysign",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "provincialwaysign",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "provincialwaysign",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "tertiarywaysign",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "tertiarywaysign",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "local",
+    "stylers": {
+      "level": "18",
+      "curZoomRegionId": "0",
+      "curZoomRegion": "18-21"
+    }
+  },
+  {
+    "featureType": "local",
+    "stylers": {
+      "level": "19",
+      "curZoomRegionId": "0",
+      "curZoomRegion": "18-21"
+    }
+  },
+  {
+    "featureType": "local",
+    "stylers": {
+      "level": "20",
+      "curZoomRegionId": "0",
+      "curZoomRegion": "18-21"
+    }
+  },
+  {
+    "featureType": "local",
+    "stylers": {
+      "level": "21",
+      "curZoomRegionId": "0",
+      "curZoomRegion": "18-21"
+    }
+  },
+  {
+    "featureType": "local",
+    "stylers": {
+      "level": "16",
+      "curZoomRegionId": "1",
+      "curZoomRegion": "16-17"
+    }
+  },
+  {
+    "featureType": "local",
+    "stylers": {
+      "level": "17",
+      "curZoomRegionId": "1",
+      "curZoomRegion": "16-17"
+    }
+  },
+  {
+    "featureType": "local",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "off",
+      "level": "16",
+      "curZoomRegionId": "1",
+      "curZoomRegion": "16-17"
+    }
+  },
+  {
+    "featureType": "local",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "off",
+      "level": "17",
+      "curZoomRegionId": "1",
+      "curZoomRegion": "16-17"
+    }
+  },
+  {
+    "featureType": "local",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "off",
+      "level": "16",
+      "curZoomRegionId": "1",
+      "curZoomRegion": "16-17"
+    }
+  },
+  {
+    "featureType": "local",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "off",
+      "level": "17",
+      "curZoomRegionId": "1",
+      "curZoomRegion": "16-17"
+    }
+  },
+  {
+    "featureType": "local",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off",
+      "level": "16",
+      "curZoomRegionId": "1",
+      "curZoomRegion": "16-17"
+    }
+  },
+  {
+    "featureType": "local",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off",
+      "level": "17",
+      "curZoomRegionId": "1",
+      "curZoomRegion": "16-17"
+    }
+  },
+  {
+    "featureType": "local",
+    "elementType": "geometry.stroke",
+    "stylers": {
+      "opacity": "7a"
+    }
+  },
+  {
+    "featureType": "subway",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "off",
+      "weight": "6"
+    }
+  },
+  {
+    "featureType": "road",
+    "elementType": "geometry.fill",
+    "stylers": {
+      "color": "#708fb6ff"
+    }
+  },
+  {
+    "featureType": "education",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+      "opacity": "75"
+    }
+  },
+  {
+    "featureType": "medical",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+      "opacity": "70"
+    }
+  },
+  {
+    "featureType": "entertainmentlabel",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "estatelabel",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "businesstowerlabel",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "businesstowerlabel",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "companylabel",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "restaurantlabel",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "restaurantlabel",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "hotellabel",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "hotellabel",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "shoppinglabel",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "shoppinglabel",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "lifeservicelabel",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "lifeservicelabel",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "carservicelabel",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "carservicelabel",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "transportationlabel",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "transportationlabel",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "trainstationlabel",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "trainstationlabel",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "parklotinlabel",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "parklotinlabel",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "parklotoutlabel",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "parklotoutlabel",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "parklotlabel",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "parklotlabel",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "subwaypoilabel",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "subwaypoilabel",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "transportationother",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "transportationother",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "financelabel",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "financelabel",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "INTERNATIONALIZEICONICON",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "INTERNATIONALIZEICONICON",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "airportlabel",
+    "elementType": "labels.text",
+    "stylers": {
+      "fontsize": "26"
+    }
+  },
+  {
+    "featureType": "airportlabel",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+      "color": "#112031ff",
+      "opacity": "4f"
+    }
+  },
+  {
+    "featureType": "airportlabel",
+    "elementType": "labels.text.fill",
+    "stylers": {
+      "color": "#f6f4f4ff"
+    }
+  },
+  {
+    "featureType": "scenicspotslabel",
+    "elementType": "labels.text",
+    "stylers": {
+      "fontsize": "24"
+    }
+  },
+  {
+    "featureType": "scenicspotslabel",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+      "color": "#112031ff",
+      "opacity": "5c"
+    }
+  },
+  {
+    "featureType": "scenicspotslabel",
+    "elementType": "labels.text.fill",
+    "stylers": {
+      "color": "#fcfafaff",
+      "opacity": "7a"
+    }
+  },
+  {
+    "featureType": "educationlabel",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+      "color": "#112031ff",
+      "opacity": "7a"
+    }
+  },
+  {
+    "featureType": "educationlabel",
+    "elementType": "labels.text.fill",
+    "stylers": {
+      "color": "#fcfafaff",
+      "opacity": "7a"
+    }
+  },
+  {
+    "featureType": "medicallabel",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "estatelabel",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "companylabel",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "governmentlabel",
+    "elementType": "labels.text.fill",
+    "stylers": {
+      "color": "#ffffffff",
+      "opacity": "73"
+    }
+  },
+  {
+    "featureType": "governmentlabel",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+      "color": "#112031ff",
+      "opacity": "69"
+    }
+  },
+  {
+    "featureType": "trainstationlabel",
+    "elementType": "labels.text.fill",
+    "stylers": {
+      "color": "#f8f1f1ff",
+      "opacity": "70"
+    }
+  },
+  {
+    "featureType": "trainstationlabel",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+      "color": "#112031ff",
+      "opacity": "75"
+    }
+  },
+  {
+    "featureType": "busstationlabel",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "busstationlabel",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "medicallabel",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "poilabel",
+    "elementType": "labels.text.fill",
+    "stylers": {
+      "color": "#f8f7f7ff",
+      "opacity": "75"
+    }
+  },
+  {
+    "featureType": "poilabel",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+      "color": "#112031ff",
+      "opacity": "6e"
+    }
+  },
+  {
+    "featureType": "subwaypoilabel",
+    "elementType": "labels.text.fill",
+    "stylers": {
+      "color": "#ffffffff",
+      "opacity": "c9"
+    }
+  },
+  {
+    "featureType": "subwaypoilabel",
+    "elementType": "labels.text.stroke",
+    "stylers": {
+      "color": "#112031ff",
+      "opacity": "85"
+    }
+  },
+  {
+    "featureType": "building",
+    "elementType": "geometry.topfill",
+    "stylers": {
+      "color": "#3a4658ff"
+    }
+  },
+  {
+    "featureType": "building",
+    "elementType": "geometry.sidefill",
+    "stylers": {
+      "color": "#1c2431ff"
+    }
+  },
+  {
+    "featureType": "highway",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "tertiaryway",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "entertainmentlabel",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "educationlabel",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "educationlabel",
+    "elementType": "labels",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "transportationother",
+    "elementType": "labels.text",
+    "stylers": {
+      "fontsize": "26"
+    }
+  },
+  {
+    "featureType": "road",
+    "elementType": "geometry",
+    "stylers": {
+      "visibility": "on"
+    }
+  },
+  {
+    "featureType": "scenicspotslabel",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "airportlabel",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  },
+  {
+    "featureType": "governmentlabel",
+    "elementType": "labels.icon",
+    "stylers": {
+      "visibility": "off"
+    }
+  }
+]
diff --git a/src/pages/GlobalModalServices/modals/DistrictIndex/StreetMap/index.less b/src/pages/GlobalModalServices/modals/DistrictIndex/StreetMap/index.less
index b3de4d2d878723bce32ab02a809ed9437eeee59f..e102436c9576430535f0ce41922bc9fab9a9af71 100644
--- a/src/pages/GlobalModalServices/modals/DistrictIndex/StreetMap/index.less
+++ b/src/pages/GlobalModalServices/modals/DistrictIndex/StreetMap/index.less
@@ -14,7 +14,8 @@
   z-index: 100;
 
   right: 10px;
-  width: 625px;
+  // width: 625px;
+  padding: 0 20px;
   height: 39px;
   border-radius: 10px;
   background: rgba(2, 106, 167, 0.9);
diff --git a/src/pages/GlobalModalServices/modals/DistrictIndex/StreetMap/index.tsx b/src/pages/GlobalModalServices/modals/DistrictIndex/StreetMap/index.tsx
index e1d779649b4336120537197b57ae8cf4cc6d14ec..a3c6cf56659eb5a1aed4812a3c9e2e2d15f656ef 100644
--- a/src/pages/GlobalModalServices/modals/DistrictIndex/StreetMap/index.tsx
+++ b/src/pages/GlobalModalServices/modals/DistrictIndex/StreetMap/index.tsx
@@ -2,7 +2,7 @@ import BMapService from '@/utils/mapService';
 import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons';
 import { useModel } from '@umijs/max';
 import { useToggle } from 'ahooks';
-import { ConfigProvider, Flex, Input, Popover, Space } from 'antd';
+import { ConfigProvider, Flex, Input, Popover, Space, Switch } from 'antd';
 import classNames from 'classnames';
 import gsap from 'gsap';
 import React, {
@@ -13,8 +13,10 @@ import React, {
   useState,
 } from 'react';
 // import { CustomOverlay, Polygon } from 'react-bmapgl';
+import BMapView from '@/components/BMapView';
 import CooglMap from '@/components/CooglMap';
 import { getColorByIndex } from '@/utils/ui';
+import { CustomOverlay, Polygon } from 'react-bmapgl';
 import PopoverCard from '../PopoverCard';
 import styles from './index.less';
 
@@ -25,7 +27,8 @@ const StreetMap: React.FC = () => {
   const [expandStatus, setExpandStatus] = useState(true);
   /** @description store */
   const { selectDistrict, areaListDto } = useModel('regionalIndex');
-
+  /** 是否启用百度地图 */
+  const [isBmap, setIsBmap] = useState(false);
   const MapRef = useRef<any>();
 
   const expandSlider = () => {
@@ -216,44 +219,89 @@ const StreetMap: React.FC = () => {
   ];
   return (
     <div className={styles.container}>
-      <CooglMap.MapView
-        zoom={13}
-        ref={MapRef}
-        center={{ x: 104.066349, y: 30.658842 }}
-      >
-        <Fragment>
-          {areaListDto.map((item, index) => {
-            return (
-              <CooglMap.Polygon
-                fillColor={getColorByIndex(Number(item.qualitySign))}
-                key={index}
-                strokeColor="#fff"
-                fillOpacity={0.3}
-                strokeWidth={2}
-                points={item.points}
-              ></CooglMap.Polygon>
-            );
-          })}
-          {areaListDto.map((item, index) => {
-            const point = [Number(item.centerX), Number(item.centerY)];
+      {isBmap ? (
+        <BMapView
+          zoom={13}
+          ref={MapRef}
+          style={{ width: '100%', height: '110%' }}
+          center={new BMapGL.Point(104.066349, 30.658842)}
+        >
+          <Fragment>
+            {areaListDto.map((item, index) => {
+              return (
+                <Polygon
+                  fillColor={getColorByIndex(Number(item.qualitySign))}
+                  key={index}
+                  strokeColor="#fff"
+                  fillOpacity={0.3}
+                  strokeWeight={2}
+                  path={BMapService.buildPoints(item.points)}
+                ></Polygon>
+              );
+            })}
+            {areaListDto.map((item, index) => {
+              const point = BMapService.buildPoint(
+                Number(item.centerX),
+                Number(item.centerY),
+              );
 
-            return (
-              <CooglMap.CustomOverlay position={point}>
-                <div
-                  className={styles.indexMarker}
-                  style={
-                    BMapService.getMakerCSS(
-                      Number(item.qualitySign),
-                    ) as CSSProperties
-                  }
-                >
-                  {Number(item.qualitySign)}
-                </div>
-              </CooglMap.CustomOverlay>
-            );
-          })}
-        </Fragment>
-      </CooglMap.MapView>
+              return (
+                <CustomOverlay position={point}>
+                  <div
+                    className={styles.indexMarker}
+                    style={
+                      BMapService.getMakerCSS(
+                        Number(item.qualitySign),
+                      ) as CSSProperties
+                    }
+                  >
+                    {Number(item.qualitySign)}
+                  </div>
+                </CustomOverlay>
+              );
+            })}
+          </Fragment>
+        </BMapView>
+      ) : (
+        <CooglMap.MapView
+          zoom={13}
+          ref={MapRef}
+          center={{ x: 104.066349, y: 30.658842 }}
+        >
+          <Fragment>
+            {areaListDto.map((item, index) => {
+              return (
+                <CooglMap.Polygon
+                  fillColor={getColorByIndex(Number(item.qualitySign))}
+                  key={index}
+                  strokeColor="#fff"
+                  fillOpacity={0.3}
+                  strokeWidth={2}
+                  points={item.points}
+                ></CooglMap.Polygon>
+              );
+            })}
+            {areaListDto.map((item, index) => {
+              const point = [Number(item.centerX), Number(item.centerY)];
+
+              return (
+                <CooglMap.CustomOverlay position={point}>
+                  <div
+                    className={styles.indexMarker}
+                    style={
+                      BMapService.getMakerCSS(
+                        Number(item.qualitySign),
+                      ) as CSSProperties
+                    }
+                  >
+                    {Number(item.qualitySign)}
+                  </div>
+                </CooglMap.CustomOverlay>
+              );
+            })}
+          </Fragment>
+        </CooglMap.MapView>
+      )}
       <div className={styles.btnGroup}>
         <div
           onClick={toggle}
@@ -340,6 +388,10 @@ const StreetMap: React.FC = () => {
         )}
       </div>
       <div className={styles.statusBar}>
+        <Space>
+          <Switch onChange={setIsBmap}></Switch>
+          <div>启用百度地图</div>
+        </Space>
         <Space>
           <div className={styles.mark} style={{ backgroundColor: '#F24F4F' }} />
           <div>应急态 &lt;60</div>
diff --git a/src/pages/GlobalModalServices/modals/KeyArea/Map/index.less b/src/pages/GlobalModalServices/modals/KeyArea/Map/index.less
index 950d099e1cbeb862a39392454e5d9306da4f7f78..a121e78fce8ba45b047333029d6153d6a4753082 100644
--- a/src/pages/GlobalModalServices/modals/KeyArea/Map/index.less
+++ b/src/pages/GlobalModalServices/modals/KeyArea/Map/index.less
@@ -47,7 +47,8 @@
   position: absolute;
   top: 10px;
   right: 10px;
-  width: 625px;
+  // width: 625px;
+  padding: 0 20px;
   z-index: 1001;
 
   height: 39px;
diff --git a/src/pages/GlobalModalServices/modals/KeyArea/Map/index.tsx b/src/pages/GlobalModalServices/modals/KeyArea/Map/index.tsx
index 7afff444b6b7384dbad8fe93412fc8a3ce6a3804..65d24994ced221f72d4a88bf499da4860f378f7a 100644
--- a/src/pages/GlobalModalServices/modals/KeyArea/Map/index.tsx
+++ b/src/pages/GlobalModalServices/modals/KeyArea/Map/index.tsx
@@ -1,16 +1,20 @@
+import BMapView from '@/components/BMapView';
 import CooglMap from '@/components/CooglMap';
 import { useGlobalModalServices } from '@/pages/GlobalModalServices/provider';
+import BMapService from '@/utils/mapService';
 import { getColorByIndex } from '@/utils/ui';
 import { DownCircleFilled, UpCircleFilled } from '@ant-design/icons';
-import { Flex, Space } from 'antd';
+import { Flex, Space, Switch } from 'antd';
 import React, { CSSProperties, useEffect, useRef, useState } from 'react';
+import { CustomOverlay } from 'react-bmapgl';
 import styles from './index.less';
 
 const Map: React.FC = () => {
   const [expand, setExpand] = useState<number>();
   const ref = useRef(0);
   const { dispatch } = useGlobalModalServices();
-
+  /** 是否启用百度地图 */
+  const [isBmap, setIsBmap] = useState(false);
   const MapRef = useRef<any>();
 
   const data = [
@@ -106,49 +110,94 @@ const Map: React.FC = () => {
   }, [MapRef.current]);
   return (
     <div className={styles.container}>
-      <CooglMap.MapView
-        zoom={13}
-        ref={MapRef}
-        boundingSpherePoints={[p1, p2]}
-        center={{ x: 104.066349, y: 30.658842 }}
-      >
-        <CooglMap.CustomOverlay
-          position={p1}
-          onClick={() => {
-            dispatch.push('KeyAreaDetail', {
-              title: '市委市政府',
-            });
-          }}
-          onSet={() => {
-            console.log('hello world');
-          }}
+      {isBmap ? (
+        <BMapView
+          zoom={13}
+          ref={MapRef}
+          style={{ width: '100%', height: '110%' }}
+          center={new BMapGL.Point(104.066349, 30.658842)}
+          onClick={(e) => console.log(e)}
         >
-          <div
-            className={styles.indexMarker}
-            style={
-              {
-                '--b-color': getColorByIndex(89),
-              } as CSSProperties
-            }
-          >
-            <div className={styles.markerContent} data-event-key="set">
-              市委市政府<span>89</span>
+          <CustomOverlay position={BMapService.buildPoint(p1[0], p1[1])}>
+            <div
+              className={styles.indexMarker}
+              onClick={(e) => {
+                e.stopPropagation();
+
+                dispatch.push('KeyAreaDetail', {
+                  title: '市委市政府',
+                });
+              }}
+            >
+              <div className={styles.markerContent}>
+                市委市政府<span style={{ color: getColorByIndex(89) }}>89</span>
+              </div>
+              <div
+                className={styles.markerIcon}
+                style={{ borderColor: getColorByIndex(89) }}
+              ></div>
             </div>
-            <div className={styles.markerIcon}></div>
-          </div>
-        </CooglMap.CustomOverlay>
-        <CooglMap.CustomOverlay position={p2}>
-          <div className={styles.indexMarker}>
-            <div className={styles.markerContent}>
-              市城管委<span style={{ color: getColorByIndex(98.5) }}>98.5</span>
+          </CustomOverlay>
+          <CustomOverlay position={BMapService.buildPoint(p2[0], p2[1])}>
+            <div className={styles.indexMarker}>
+              <div className={styles.markerContent}>
+                市城管委
+                <span style={{ color: getColorByIndex(98.5) }}>98.5</span>
+              </div>
+              <div
+                className={styles.markerIcon}
+                style={{ borderColor: getColorByIndex(98.5) }}
+              ></div>
             </div>
+          </CustomOverlay>
+        </BMapView>
+      ) : (
+        <CooglMap.MapView
+          zoom={13}
+          ref={MapRef}
+          boundingSpherePoints={[p1, p2]}
+          center={{ x: 104.066349, y: 30.658842 }}
+        >
+          <CooglMap.CustomOverlay
+            position={p1}
+            onClick={() => {
+              dispatch.push('KeyAreaDetail', {
+                title: '市委市政府',
+              });
+            }}
+            onSet={() => {
+              console.log('hello world');
+            }}
+          >
             <div
-              className={styles.markerIcon}
-              style={{ borderColor: getColorByIndex(98.5) }}
-            ></div>
-          </div>
-        </CooglMap.CustomOverlay>
-      </CooglMap.MapView>
+              className={styles.indexMarker}
+              style={
+                {
+                  '--b-color': getColorByIndex(89),
+                } as CSSProperties
+              }
+            >
+              <div className={styles.markerContent} data-event-key="set">
+                市委市政府<span>89</span>
+              </div>
+              <div className={styles.markerIcon}></div>
+            </div>
+          </CooglMap.CustomOverlay>
+          <CooglMap.CustomOverlay position={p2}>
+            <div className={styles.indexMarker}>
+              <div className={styles.markerContent}>
+                市城管委
+                <span style={{ color: getColorByIndex(98.5) }}>98.5</span>
+              </div>
+              <div
+                className={styles.markerIcon}
+                style={{ borderColor: getColorByIndex(98.5) }}
+              ></div>
+            </div>
+          </CooglMap.CustomOverlay>
+        </CooglMap.MapView>
+      )}
+
       <div className={styles.leftList}>
         <div className={styles.listTitle}>重点区域列表</div>
         <div>
@@ -206,6 +255,10 @@ const Map: React.FC = () => {
       </div>
 
       <div className={styles.statusBar}>
+        <Space>
+          <Switch onChange={setIsBmap}></Switch>
+          <div>启用百度地图</div>
+        </Space>
         <Space>
           <div className={styles.mark} style={{ backgroundColor: '#F24F4F' }} />
           <div>应急态 &lt;60</div>
diff --git a/src/pages/GlobalModalServices/modals/KeyAreaDetail/Map/components/BMapInfoWindow/index.less b/src/pages/GlobalModalServices/modals/KeyAreaDetail/Map/components/BMapInfoWindow/index.less
new file mode 100644
index 0000000000000000000000000000000000000000..7367966c04b375ae0ac87645fe116e516681afcb
--- /dev/null
+++ b/src/pages/GlobalModalServices/modals/KeyAreaDetail/Map/components/BMapInfoWindow/index.less
@@ -0,0 +1,174 @@
+.window {
+  box-sizing: border-box;
+  border: 2px solid rgba(64, 146, 217, 0.95);
+  border-radius: 10px;
+  background: rgb(3, 85, 135);
+  width: 460px;
+
+  &::after {
+    position: absolute;
+    content: '';
+    /**三角形 */
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 10px 10px 0 10px;
+    border-color: rgb(3, 85, 135) transparent transparent transparent;
+    bottom: -7px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 999;
+  }
+  &::before {
+    position: absolute;
+    content: '';
+    /**三角形 */
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 10px 10px 0 10px;
+    border-color: rgba(64, 146, 217, 0.95) transparent transparent transparent;
+    bottom: -10px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 998;
+  }
+}
+
+.header {
+  white-space: nowrap;
+  color: rgb(255, 255, 255);
+  font-family: 'DingTalk JinBuTi';
+  display: flex;
+  justify-content: space-between;
+  font-size: 24px;
+  font-weight: 400;
+  height: 54px;
+  padding: 0 24px;
+  align-items: center;
+  border-bottom: 2px solid rgb(62, 145, 215);
+}
+
+.content {
+  padding: 20px;
+}
+
+.btnGroup {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 16px;
+  gap: 12px;
+
+  .btn {
+    border-radius: 25px;
+    background: linear-gradient(
+      180deg,
+      rgb(28, 192, 255),
+      rgb(82, 148, 255) 100%
+    );
+    padding: 0 16px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.type1Content {
+  position: relative;
+
+  .qImg {
+    width: 100%;
+    height: 157px;
+  }
+
+  .overTime {
+    position: absolute;
+    border-radius: 13.5px;
+    color: rgb(255, 167, 95);
+    background: rgba(0, 0, 0, 50%);
+    padding: 4px 12px;
+    right: 16px;
+    top: 120px;
+  }
+
+  .toBeProcessed {
+    position: absolute;
+    border-radius: 13.5px;
+    color: rgb(102, 165, 255);
+    background: rgba(0, 0, 0, 50%);
+    padding: 4px 12px;
+    right: 16px;
+    top: 120px;
+  }
+}
+
+.type3Content {
+  overflow: hidden;
+
+  .avatar {
+    width: 90px;
+    height: 90px;
+  }
+  .avatarWrapper {
+    flex-direction: row;
+    display: flex;
+    gap: 12px;
+  }
+}
+
+.type4Content {
+  overflow: hidden;
+
+  .qImg {
+    width: 100%;
+    height: 157px;
+  }
+}
+
+.todayQNum {
+  color: rgb(255, 255, 255);
+
+  font-size: 18px;
+  font-weight: 400;
+
+  > span {
+    background: linear-gradient(180deg, rgb(170, 255, 246), rgb(37, 187, 255));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin: 0 8px;
+    font-family: D-DIN;
+    font-size: 30px;
+  }
+}
+
+.type1Content {
+  position: relative;
+
+  .qImg {
+    width: 100%;
+    height: 157px;
+  }
+
+  .overTime {
+    position: absolute;
+    border-radius: 13.5px;
+    color: rgb(255, 167, 95);
+    background: rgba(0, 0, 0, 50%);
+    padding: 4px 12px;
+    right: 16px;
+    top: 120px;
+  }
+
+  .toBeProcessed {
+    position: absolute;
+    border-radius: 13.5px;
+    color: rgb(102, 165, 255);
+    background: rgba(0, 0, 0, 50%);
+    padding: 4px 12px;
+    right: 16px;
+    top: 120px;
+  }
+}
diff --git a/src/pages/GlobalModalServices/modals/KeyAreaDetail/Map/components/BMapInfoWindow/index.tsx b/src/pages/GlobalModalServices/modals/KeyAreaDetail/Map/components/BMapInfoWindow/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4e207ea7ee900bda3ce7bd99765b31ce896f6516
--- /dev/null
+++ b/src/pages/GlobalModalServices/modals/KeyAreaDetail/Map/components/BMapInfoWindow/index.tsx
@@ -0,0 +1,271 @@
+import BMapService from '@/utils/mapService';
+import { CloseCircleOutlined } from '@ant-design/icons';
+import { ConfigProvider, Descriptions, Image } from 'antd';
+import React from 'react';
+import { CustomOverlay } from 'react-bmapgl';
+import styles from './index.less';
+
+interface PropsType {
+  data: any;
+  map?: BMapGL.Map;
+  onClose?: () => void;
+}
+
+const InfoWindow: React.FC<PropsType> = (props) => {
+  const { data, map, onClose } = props;
+
+  const labelStyle = {
+    color: 'rgb(203, 237, 255)',
+    fontSize: 16,
+  };
+  const renderContent = () => {
+    switch (data.type) {
+      case 1:
+        return (
+          <div className={styles.type1Content}>
+            <Image
+              className={styles.qImg}
+              width="100%"
+              src={require('@/assets/images/keyArea/img.png')}
+            ></Image>
+            <div className={styles.overTime}>已超期 105 天</div>
+            <Descriptions
+              style={{ marginTop: 16 }}
+              column={1}
+              labelStyle={labelStyle}
+              contentStyle={{
+                color: '#fff',
+                fontSize: 16,
+              }}
+            >
+              <Descriptions.Item label="上报时间">
+                2024-05-28 10:20:20
+              </Descriptions.Item>
+              <Descriptions.Item label="发生位置">
+                锦江区牛市口街道办事...
+              </Descriptions.Item>
+            </Descriptions>
+            <div className={styles.btnGroup}>
+              <div className={styles.btn}>查看详情</div>
+            </div>
+          </div>
+        );
+      case 2:
+        return (
+          <div className={styles.type1Content}>
+            <Image
+              className={styles.qImg}
+              width="100%"
+              src={require('@/assets/images/keyArea/img.png')}
+            ></Image>
+            <div className={styles.toBeProcessed}>待派遣</div>
+            <Descriptions
+              style={{ marginTop: 16 }}
+              column={1}
+              labelStyle={labelStyle}
+              contentStyle={{
+                color: '#fff',
+                fontSize: 16,
+              }}
+            >
+              <Descriptions.Item label="上报时间">
+                2024-05-28 10:20:20
+              </Descriptions.Item>
+              <Descriptions.Item label="发生位置">
+                锦江区牛市口街道办事...
+              </Descriptions.Item>
+            </Descriptions>
+            <div className={styles.btnGroup}>
+              <div className={styles.btn}>查看详情</div>
+            </div>
+          </div>
+        );
+      case 3:
+        return (
+          <div className={styles.type3Content}>
+            <div className={styles.avatarWrapper}>
+              <Image
+                className={styles.avatar}
+                width={90}
+                height={90}
+                src={require('@/assets/images/keyArea/avatar.png')}
+              ></Image>
+              <Descriptions
+                column={1}
+                title={'市级监督员 - 张明明'}
+                labelStyle={labelStyle}
+                contentStyle={{
+                  color: '#fff',
+                  fontSize: 16,
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                  overflow: 'hidden',
+                }}
+              >
+                <Descriptions.Item label="工卡号">
+                  XDSDWE15266
+                </Descriptions.Item>
+                <Descriptions.Item label="联系电话">
+                  15887465232
+                </Descriptions.Item>
+              </Descriptions>
+            </div>
+            <Descriptions
+              column={1}
+              labelStyle={labelStyle}
+              contentStyle={{
+                color: '#fff',
+                fontSize: 16,
+              }}
+            >
+              <Descriptions.Item label="责任网格">
+                迪庆街道、崇阳街道、迪庆街道、崇阳街道、迪庆街道、崇阳街道、迪庆街道、崇阳街道、
+              </Descriptions.Item>
+            </Descriptions>
+            <div className={styles.btnGroup}>
+              <div className={styles.btn}>查看详情</div>
+            </div>
+          </div>
+        );
+      case 4:
+        return (
+          <div className={styles.type4Content}>
+            <Image
+              className={styles.qImg}
+              width="100%"
+              src={require('@/assets/images/keyArea/img.png')}
+            ></Image>
+
+            <div className={styles.btnGroup}>
+              <div className={styles.btn}>查看详情</div>
+            </div>
+          </div>
+        );
+      case 5:
+        return (
+          <div className={styles.type5Content}>
+            <Descriptions
+              style={{ marginTop: 16 }}
+              column={2}
+              labelStyle={labelStyle}
+              contentStyle={{
+                color: '#fff',
+                fontSize: 16,
+              }}
+            >
+              <Descriptions.Item label="设备ID">SDFSDFS156</Descriptions.Item>
+              <Descriptions.Item label="设备类型">AI固定视频</Descriptions.Item>
+              <Descriptions.Item label="感知场景" span={2}>
+                垃圾分类
+              </Descriptions.Item>
+              <Descriptions.Item label="所在位置" span={2}>
+                XXXXXXXXXXXXXXXXXXXXXX
+              </Descriptions.Item>
+            </Descriptions>
+            <div className={styles.todayQNum}>
+              今日识别问题<span>1208</span>件
+            </div>
+            <div className={styles.btnGroup}>
+              <div className={styles.btn}>运行视频</div>
+              <div className={styles.btn}>发现问题</div>
+            </div>
+          </div>
+        );
+      case 6:
+        return (
+          <div className={styles.type6Content}>
+            <Descriptions
+              style={{ marginTop: 16 }}
+              column={2}
+              labelStyle={labelStyle}
+              contentStyle={{
+                color: '#fff',
+                fontSize: 16,
+              }}
+            >
+              <Descriptions.Item label="设备ID">SDFSDFS156</Descriptions.Item>
+              <Descriptions.Item label="设备状态">
+                <span style={{ color: 'green' }}>在线</span>
+              </Descriptions.Item>
+              <Descriptions.Item label="设备类型">AI车载</Descriptions.Item>
+              <Descriptions.Item label="车辆类型">公交车</Descriptions.Item>
+            </Descriptions>
+            <div className={styles.todayQNum}>
+              今日识别问题<span>1208</span>件
+            </div>
+            <div className={styles.btnGroup}>
+              <div className={styles.btn}>运行轨迹</div>
+
+              <div className={styles.btn}>运行视频</div>
+              <div className={styles.btn}>识别问题</div>
+              <div className={styles.btn}>运行详情</div>
+            </div>
+          </div>
+        );
+      case 7:
+        return (
+          <div className={styles.type1Content}>
+            <Image
+              className={styles.qImg}
+              width="100%"
+              src={require('@/assets/images/keyArea/img.png')}
+            ></Image>
+            <div className={styles.toBeProcessed}>待派遣</div>
+            <Descriptions
+              style={{ marginTop: 16 }}
+              column={1}
+              labelStyle={labelStyle}
+              contentStyle={{
+                color: '#fff',
+                fontSize: 16,
+              }}
+            >
+              <Descriptions.Item label="预警时间：">
+                2024-05-28 10:20:20
+              </Descriptions.Item>
+              <Descriptions.Item label="预警地点：">
+                锦江区牛市口街道办事...
+              </Descriptions.Item>
+            </Descriptions>
+            <div className={styles.btnGroup}>
+              <div className={styles.btn}>查看详情</div>
+            </div>
+          </div>
+        );
+      default:
+        return <div>无内容</div>;
+    }
+  };
+
+  return (
+    <CustomOverlay
+      position={BMapService.buildPoint(data.l[0], data.l[1])}
+      map={map!}
+      offset={new BMapGL.Size(0, -30)}
+    >
+      <div className={styles.window}>
+        <div className={styles.header}>
+          道路交通设施
+          <div onClick={onClose}>
+            <CloseCircleOutlined />
+          </div>
+        </div>
+        <ConfigProvider
+          theme={{
+            components: {
+              Descriptions: {
+                itemPaddingBottom: 4,
+                titleColor: '#fff',
+                titleMarginBottom: 10,
+              },
+            },
+          }}
+        >
+          <div className={styles.content}>{renderContent()}</div>
+        </ConfigProvider>
+      </div>
+    </CustomOverlay>
+  );
+};
+
+export default InfoWindow;
diff --git a/src/pages/GlobalModalServices/modals/KeyAreaDetail/Map/index.less b/src/pages/GlobalModalServices/modals/KeyAreaDetail/Map/index.less
index 15bce0e7337b859f075d1b295f5c3c623246a4f1..dc082d33ec135b6c19c740c6fbf32282c2fed411 100644
--- a/src/pages/GlobalModalServices/modals/KeyAreaDetail/Map/index.less
+++ b/src/pages/GlobalModalServices/modals/KeyAreaDetail/Map/index.less
@@ -18,7 +18,8 @@
   position: absolute;
   z-index: 1001;
 
-  width: 384px;
+  // width: 384px;
+  padding: 0 20px;
   height: 55px;
   border-radius: 27.5px 0px 0px 27.5px;
   -webkit-backdrop-filter: blur(20px);
diff --git a/src/pages/GlobalModalServices/modals/KeyAreaDetail/Map/index.tsx b/src/pages/GlobalModalServices/modals/KeyAreaDetail/Map/index.tsx
index 5a52d6250664b38496890426c3d47b1d5ba1dcda..16c07f44c7a8b2e7d7f85d120325d8ae9c36b5a1 100644
--- a/src/pages/GlobalModalServices/modals/KeyAreaDetail/Map/index.tsx
+++ b/src/pages/GlobalModalServices/modals/KeyAreaDetail/Map/index.tsx
@@ -1,12 +1,16 @@
 import myVideo1 from '@/assets/media/movie.mp4';
 
+import BMapView from '@/components/BMapView';
 import CooglMap from '@/components/CooglMap';
+import BMapService from '@/utils/mapService';
 import { DoubleLeftOutlined, DoubleRightOutlined } from '@ant-design/icons';
-import { Flex, Space } from 'antd';
+import { Flex, Space, Switch } from 'antd';
 import gsap from 'gsap';
 import React, { useRef, useState } from 'react';
+import { Marker } from 'react-bmapgl';
 import FilterTree from '../FilterTree';
 import LiveSlideshow from '../LiveSlideshow';
+import BMapInfoWindow from './components/BMapInfoWindow';
 import InfoWindow from './components/InfoWindow';
 import styles from './index.less';
 
@@ -15,6 +19,8 @@ const Map: React.FC = () => {
   const listRef = useRef<HTMLDivElement>(null);
   const MapRef = useRef<any>();
   const [selected, setSelected] = useState<any>();
+  /** 是否启用百度地图 */
+  const [isBmap, setIsBmap] = useState(false);
   const expandSlider = () => {
     if (expandStatus === true) {
       setExpandStatus(false);
@@ -72,32 +78,68 @@ const Map: React.FC = () => {
 
   return (
     <div className={styles.container}>
-      <CooglMap.MapView
-        zoom={13}
-        ref={MapRef}
-        center={{ x: 104.066349, y: 30.658842 }}
-      >
-        {pList.map((item, index) => {
-          return (
-            <CooglMap.Marker
-              key={index}
-              onClick={() => {
-                setSelected(item);
+      {isBmap ? (
+        <BMapView
+          zoom={13}
+          ref={MapRef}
+          onClick={(e) => console.log(e)}
+          style={{ width: '100%', height: '110%' }}
+          center={new BMapGL.Point(104.066349, 30.658842)}
+        >
+          {pList.map((item, index) => {
+            return (
+              <Marker
+                key={index}
+                onClick={() => {
+                  setSelected(item);
+                }}
+                position={BMapService.buildPoint(item.l[0], item.l[1])}
+                icon={
+                  new BMapGL.Icon(
+                    iconList[item.type] as string,
+                    new BMapGL.Size(30, 30),
+                  )
+                }
+              ></Marker>
+            );
+          })}
+          {selected && (
+            <BMapInfoWindow
+              data={selected}
+              onClose={() => {
+                setSelected(undefined);
               }}
-              position={item.l}
-              icon={(iconList as any)[index + 1]}
-            ></CooglMap.Marker>
-          );
-        })}
-        {selected && (
-          <InfoWindow
-            data={selected}
-            onClose={() => {
-              setSelected(undefined);
-            }}
-          ></InfoWindow>
-        )}
-      </CooglMap.MapView>
+            ></BMapInfoWindow>
+          )}
+        </BMapView>
+      ) : (
+        <CooglMap.MapView
+          zoom={13}
+          ref={MapRef}
+          center={{ x: 104.066349, y: 30.658842 }}
+        >
+          {pList.map((item, index) => {
+            return (
+              <CooglMap.Marker
+                key={index}
+                onClick={() => {
+                  setSelected(item);
+                }}
+                position={item.l}
+                icon={(iconList as any)[index + 1]}
+              ></CooglMap.Marker>
+            );
+          })}
+          {selected && (
+            <InfoWindow
+              data={selected}
+              onClose={() => {
+                setSelected(undefined);
+              }}
+            ></InfoWindow>
+          )}
+        </CooglMap.MapView>
+      )}
 
       <div className={styles.leftController}>
         <FilterTree></FilterTree>
@@ -106,6 +148,10 @@ const Map: React.FC = () => {
         <LiveSlideshow></LiveSlideshow>
       </div>
       <div className={styles.onDutyWrap}>
+        <Space style={{ marginRight: 20 }}>
+          <Switch onChange={setIsBmap}></Switch>
+          <div>启用百度地图 </div>
+        </Space>
         <Space>
           <div>值班元</div>
           <div>张三 15885632365</div>
diff --git a/src/pages/TheOperationOfTheDistrictCityAndCounty/components/Map/index.less b/src/pages/TheOperationOfTheDistrictCityAndCounty/components/Map/index.less
index e94eaa2d7bb08f07a4a1f9b2da7fc28b4065b24d..582147b3f6f8e4f41d534b0703f1269b5f1f8253 100644
--- a/src/pages/TheOperationOfTheDistrictCityAndCounty/components/Map/index.less
+++ b/src/pages/TheOperationOfTheDistrictCityAndCounty/components/Map/index.less
@@ -22,7 +22,8 @@
   position: absolute;
   top: 10px;
   right: 10px;
-  width: 625px;
+  // width: 625px;
+  padding: 0 20px;
   height: 39px;
   border-radius: 10px;
   background: rgba(2, 106, 167, 0.9);
@@ -32,6 +33,7 @@
   gap: 30px;
   color: rgb(203, 227, 240);
   font-size: 16px;
+  z-index: 100;
 }
 
 .mark {
diff --git a/src/pages/TheOperationOfTheDistrictCityAndCounty/components/Map/index.tsx b/src/pages/TheOperationOfTheDistrictCityAndCounty/components/Map/index.tsx
index 3c19825a1057ed2669ccbab394030c7cd385937f..33856524b9a6b7653a3aee1c94ee34251cc3261a 100644
--- a/src/pages/TheOperationOfTheDistrictCityAndCounty/components/Map/index.tsx
+++ b/src/pages/TheOperationOfTheDistrictCityAndCounty/components/Map/index.tsx
@@ -1,9 +1,11 @@
+import BMapView from '@/components/BMapView';
 import CooglMap from '@/components/CooglMap';
 import BMapService from '@/utils/mapService';
 import { getColorByIndex } from '@/utils/ui';
 import { useModel } from '@umijs/max';
-import { Space } from 'antd';
-import React, { CSSProperties, Fragment, useEffect, useRef } from 'react';
+import { Space, Switch } from 'antd';
+import React, { CSSProperties, Fragment, useRef, useState } from 'react';
+import { CustomOverlay, Polygon } from 'react-bmapgl';
 import DistrictDetailBar from '../DIstrictDetailBar';
 import styles from './index.less';
 
@@ -13,6 +15,8 @@ const DistrictMap: React.FC = () => {
   const { selectDistrict, areaListDto } = useModel('regionalIndex');
 
   const MapRef = useRef<any>();
+  /** 是否启用百度地图 */
+  const [isBmap, setIsBmap] = useState(false);
 
   /**
    * @description 设置地图视野
@@ -24,75 +28,110 @@ const DistrictMap: React.FC = () => {
       })
       .flat(1);
 
-    // const map = MapRef.current?.map as BMapGL.Map;
-    // if (map) {
-    //   map.setViewport(points);
-    // }
+    const map = MapRef.current?.map as BMapGL.Map;
+    if (map) {
+      map.setViewport(points);
+    }
   };
 
-  const addZoom = () => {
-    // const map = MapRef.current?.map as BMapGL.Map;
-    // map.centerAndZoom(map.getCenter(), map.getZoom() + 1);
-  };
-
-  const reduceZoom = () => {
-    // const map = MapRef.current?.map as BMapGL.Map;
-    // map.centerAndZoom(map.getCenter(), map.getZoom() - 1);
-  };
-
-  /** @description 移动视角到能显示全部覆盖物 */
-  useEffect(() => {
-    setViewport();
-  }, [MapRef.current]);
-
-  console.log(areaListDto);
-
   return (
     <div className={styles.container}>
-      <CooglMap.MapView
-        zoom={13}
-        ref={MapRef}
-        center={{ x: 104.066349, y: 30.658842 }}
-      >
-        {!selectDistrict ? (
-          <Fragment>
-            {areaListDto.map((item, index) => {
-              return (
-                <CooglMap.Polygon
-                  fillColor={getColorByIndex(Number(item.qualitySign))!}
-                  key={index}
-                  strokeColor="#fff"
-                  points={item.points}
-                  strokeWidth={2}
-                  fillOpacity={0.2}
-                ></CooglMap.Polygon>
-              );
-            })}
-            {areaListDto.map((item, index) => {
-              const point = [Number(item.centerX), Number(item.centerY)];
+      {isBmap ? (
+        <BMapView
+          zoom={13}
+          ref={MapRef}
+          style={{ width: '100%', height: '110%' }}
+          center={new BMapGL.Point(104.066349, 30.658842)}
+        >
+          {!selectDistrict ? (
+            <Fragment>
+              {areaListDto.map((item, index) => {
+                return (
+                  <Polygon
+                    fillColor={getColorByIndex(Number(item.qualitySign))}
+                    key={index}
+                    strokeColor="#fff"
+                    fillOpacity={0.3}
+                    strokeWeight={2}
+                    path={BMapService.buildPoints(item.points)}
+                  ></Polygon>
+                );
+              })}
+              {areaListDto.map((item, index) => {
+                const point = BMapService.buildPoint(
+                  Number(item.centerX),
+                  Number(item.centerY),
+                );
+
+                return (
+                  <CustomOverlay position={point}>
+                    <div
+                      className={styles.indexMarker}
+                      style={
+                        BMapService.getMakerCSS(
+                          Number(item.qualitySign),
+                        ) as CSSProperties
+                      }
+                    >
+                      {Number(item.qualitySign)}
+                    </div>
+                  </CustomOverlay>
+                );
+              })}
+            </Fragment>
+          ) : undefined}
+        </BMapView>
+      ) : (
+        <CooglMap.MapView
+          zoom={13}
+          ref={MapRef}
+          center={{ x: 104.066349, y: 30.658842 }}
+        >
+          {!selectDistrict ? (
+            <Fragment>
+              {areaListDto.map((item, index) => {
+                return (
+                  <CooglMap.Polygon
+                    fillColor={getColorByIndex(Number(item.qualitySign))!}
+                    key={index}
+                    strokeColor="#fff"
+                    points={item.points}
+                    strokeWidth={2}
+                    fillOpacity={0.2}
+                  ></CooglMap.Polygon>
+                );
+              })}
+              {areaListDto.map((item, index) => {
+                const point = [Number(item.centerX), Number(item.centerY)];
+
+                return (
+                  <CooglMap.CustomOverlay key={index} position={point}>
+                    <div
+                      className={styles.indexMarker}
+                      style={
+                        BMapService.getMakerCSS(
+                          Number(item.qualitySign),
+                        ) as CSSProperties
+                      }
+                    >
+                      {Number(item.qualitySign)}
+                    </div>
+                  </CooglMap.CustomOverlay>
+                );
+              })}
+            </Fragment>
+          ) : undefined}
+        </CooglMap.MapView>
+      )}
 
-              return (
-                <CooglMap.CustomOverlay key={index} position={point}>
-                  <div
-                    className={styles.indexMarker}
-                    style={
-                      BMapService.getMakerCSS(
-                        Number(item.qualitySign),
-                      ) as CSSProperties
-                    }
-                  >
-                    {Number(item.qualitySign)}
-                  </div>
-                </CooglMap.CustomOverlay>
-              );
-            })}
-          </Fragment>
-        ) : undefined}
-      </CooglMap.MapView>
       {selectDistrict && (
         <div className={styles.districtName}>{selectDistrict.objectName}</div>
       )}
       <div className={styles.statusBar}>
+        <Space>
+          <Switch onChange={setIsBmap}></Switch>
+          <div>启用百度地图</div>
+        </Space>
         <Space>
           <div className={styles.mark} style={{ backgroundColor: '#F24F4F' }} />
           <div>应急态 &lt;60</div>
diff --git a/src/utils/mapService.ts b/src/utils/mapService.ts
index 59fb7f386494dadbb9dcb48eae264fe5b08d780f..b31673ae2c4ff2bad47e691d14049313ffde0f38 100644
--- a/src/utils/mapService.ts
+++ b/src/utils/mapService.ts
@@ -5,13 +5,13 @@
 export default class BMapService {
   /** @description 构建地图点 */
   static buildPoints(points: number[][]) {
-    // return points.map((item) => {
-    //   return new BMapGL.Point(item[0], item[1]);
-    // });
+    return points.map((item) => {
+      return new BMapGL.Point(item[0], item[1]);
+    });
   }
 
   static buildPoint(lng: number, lat: number) {
-    // return new BMapGL.Point(lng, lat);
+    return new BMapGL.Point(lng, lat);
   }
   /** @description 获取图标样式 */
   static getMakerCSS(index: number) {
diff --git a/yarn.lock b/yarn.lock
index 4a8a943850d84725652e25b706f856c91fea1f5d..a794f50fc76fe01b7989ff2d9251e6b0a14a119e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1751,6 +1751,11 @@
   dependencies:
     "@babel/types" "^7.20.7"
 
+"@types/bmapgl@^0.0.7":
+  version "0.0.7"
+  resolved "https://registry.npmmirror.com/@types/bmapgl/-/bmapgl-0.0.7.tgz#005bd208b782f1c611964f50f58f792aa239b243"
+  integrity sha512-3R0wFbZtynfHBJq0v477amaNH3t2u2CzBo46ViIPDdOTEJJ+Ma/ql4X8tS2XjDZcZhDAr6QDWoqV8SZvp6STvA==
+
 "@types/color-convert@*":
   version "2.0.4"
   resolved "https://registry.npmmirror.com/@types/color-convert/-/color-convert-2.0.4.tgz#843398ae71e951dc5415d202dfd5e43108823eeb"
@@ -6463,6 +6468,11 @@ map-obj@^4.0.0:
   resolved "https://registry.npmmirror.com/map-obj/-/map-obj-4.3.0.tgz#9304f906e93faae70880da102a9f1df0ea8bb05a"
   integrity sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==
 
+mapvgl@^1.0.0-beta.189:
+  version "1.0.0-beta.191"
+  resolved "https://registry.npmmirror.com/mapvgl/-/mapvgl-1.0.0-beta.191.tgz#3e77a834ffcf44385512390ecd0b484b267dd2ba"
+  integrity sha512-kbcLSXPSZybMgvJ0RTPEpISC6hpc27P/UwYCFASKLRe6Z7LC0Z11FwNXvQT/jkAK/LdBm2GqsE9i+GQViqRIYg==
+
 mathml-tag-names@^2.1.3:
   version "2.1.3"
   resolved "https://registry.npmmirror.com/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz#4ddadd67308e780cf16a47685878ee27b736a0a3"
@@ -8450,6 +8460,14 @@ rc-virtual-list@^3.14.2, rc-virtual-list@^3.2.0, rc-virtual-list@^3.5.1, rc-virt
     rc-resize-observer "^1.0.0"
     rc-util "^5.36.0"
 
+react-bmapgl@^0.2.28:
+  version "0.2.28"
+  resolved "https://registry.npmmirror.com/react-bmapgl/-/react-bmapgl-0.2.28.tgz#b04fd995f5469fb3e67369577b5bb248712dbf3a"
+  integrity sha512-qqIyuoDril0424/MQA418D20KtvNeE7MBRnWL1EttaX/kNfGzAUjJRoVzROD8bLiDytYSzvodyr+hl0/6MniCQ==
+  dependencies:
+    mapvgl "^1.0.0-beta.189"
+    shallowequal "^1.1.0"
+
 react-countup@^6.5.3:
   version "6.5.3"
   resolved "https://registry.npmmirror.com/react-countup/-/react-countup-6.5.3.tgz#e892aa3eab2d6ba9c3cdba30bf4ed6764826d848"