From ca0c01c056e38687a9f2ed7340ca8b83fa2fc13b Mon Sep 17 00:00:00 2001
From: yms <yms@cdhncy.com>
Date: Thu, 28 Nov 2024 11:49:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8A=A0=E5=85=A5=E7=99=BE=E5=BA=A6?=
=?UTF-8?q?=E5=9C=B0=E5=9B=BE=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
config/config.ts | 3 +
package.json | 2 +
src/.DS_Store | Bin 0 -> 6148 bytes
src/components/BMapView/index.tsx | 23 +
src/components/BMapView/mapStyle.json | 1323 +++++++++++++++++
.../modals/DistrictIndex/StreetMap/index.less | 3 +-
.../modals/DistrictIndex/StreetMap/index.tsx | 130 +-
.../modals/KeyArea/Map/index.less | 3 +-
.../modals/KeyArea/Map/index.tsx | 135 +-
.../Map/components/BMapInfoWindow/index.less | 174 +++
.../Map/components/BMapInfoWindow/index.tsx | 271 ++++
.../modals/KeyAreaDetail/Map/index.less | 3 +-
.../modals/KeyAreaDetail/Map/index.tsx | 98 +-
.../components/Map/index.less | 4 +-
.../components/Map/index.tsx | 163 +-
src/utils/mapService.ts | 8 +-
yarn.lock | 18 +
17 files changed, 2185 insertions(+), 176 deletions(-)
create mode 100644 src/.DS_Store
create mode 100644 src/components/BMapView/index.tsx
create mode 100644 src/components/BMapView/mapStyle.json
create mode 100644 src/pages/GlobalModalServices/modals/KeyAreaDetail/Map/components/BMapInfoWindow/index.less
create mode 100644 src/pages/GlobalModalServices/modals/KeyAreaDetail/Map/components/BMapInfoWindow/index.tsx
diff --git a/config/config.ts b/config/config.ts
index 0aa2e02d..e22eb2ec 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 87441a8b..9acc01e8 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
GIT binary patch
literal 6148
zcmZQzU|@7AO)+F(5MW?n;9!8zj35RBCIAV8Fop~hRD=;^9@vb0hCGH;hCGH6hGMAP
zV5dNC=VC}^$Y;o9C}2Qxe^PmIK~heB5(5Lnj--N|%;FLQgKLaT%q*;I>>TVI+#IpN
z8TsYGC5a`a#ZHMu(I8$(etu38jGdSimYG@}FCgNapI4HYnU`7wQWBh*lA4rQ6ce7A
zmy%!ZlwX>cQViA$mEhpy;EWfLsIIm!GSE>lH#V)+QK+^Au}#cOYHK+;M3wcegW|Ju
za`W=LAc4yW@&ky;3nGwkHxhf4IT`|^Aut*OqaiRF0<aK()*Bq$Fo98eGz3ONU^E1v
zApj~L6d-MT1_vnJ0HHxr42%p6;4T0o0|N_G3rGyqrvT9)tsokt6-0xyGBAQzU^Bp4
z85p5j8NuBU1_nlOmjpzEwKFh+Z3gkd+8JPtT}Fs@21cmOu+9r3*med6Mu>I>MzHNL
z*NxJnAut*Oun=H|Fa$vLzbgX+EDJ$IN6FC;7!83D5dw@XF2OEN;7S?0e?fIEs6I`A
xN`q>DNOcUVm{A)6OppOZ38+#~bq~@CqQO-$BLf3i>u5s&7DA)+Xb8|h1OPI^MsNTC
literal 0
HcmV?d00001
diff --git a/src/components/BMapView/index.tsx b/src/components/BMapView/index.tsx
new file mode 100644
index 00000000..4be926bd
--- /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 00000000..ec4143ba
--- /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 b3de4d2d..e102436c 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 e1d77964..a3c6cf56 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>应急态 <60</div>
diff --git a/src/pages/GlobalModalServices/modals/KeyArea/Map/index.less b/src/pages/GlobalModalServices/modals/KeyArea/Map/index.less
index 950d099e..a121e78f 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 7afff444..65d24994 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>应急态 <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 00000000..7367966c
--- /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 00000000..4e207ea7
--- /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 15bce0e7..dc082d33 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 5a52d625..16c07f44 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 e94eaa2d..582147b3 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 3c19825a..33856524 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>应急态 <60</div>
diff --git a/src/utils/mapService.ts b/src/utils/mapService.ts
index 59fb7f38..b31673ae 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 4a8a9438..a794f50f 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"
--
GitLab