From dd6ff1d2be5c6de1eec1780b34bf80582b02642d Mon Sep 17 00:00:00 2001 From: jiangzhixiong <710328466@qq.com> Date: Fri, 24 May 2024 18:03:43 +0800 Subject: [PATCH] =?UTF-8?q?feat(@zhst/map):=20=E6=B7=BB=E5=8A=A0popup?= =?UTF-8?q?=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- global.d.ts | 3 + packages/map/src/MapBox.tsx | 86 ++++++++++-------- .../{marker_normal.png => camera_blue.png} | Bin .../{marker_monitor.png => camera_green.png} | Bin .../{marker_virtual.png => camera_grey.png} | Bin ...arker_track_virtual.png => camera_red.png} | Bin .../{marker_pos.png => camera_red_border.png} | Bin ...er_normal_select.png => camera_yellow.png} | Bin .../{cluster_normal.png => cluster_blue.png} | Bin .../{cluster_alarm.png => cluster_red.png} | Bin ...ster_escape.png => cluster_red_border.png} | Bin .../{fecluster_normal.png => marker_blue.png} | Bin ...er_escape.png => marker_escape_border.png} | Bin .../{fecluster_alarm.png => marker_green.png} | Bin ...uncontrolled.png => marker_red_border.png} | Bin ...{marker_track.png => marker_red_track.png} | Bin .../map/src/assets/icons/marker_runing.png | Bin 2145 -> 0 bytes .../src/assets/icons/marker_runing_select.png | Bin 3376 -> 0 bytes .../src/assets/icons/marker_uncontrolled.png | Bin 3394 -> 0 bytes .../assets/icons/marker_virtual_select.png | Bin 3376 -> 0 bytes ...er_normal_select.png => marker_yellow.png} | Bin packages/map/src/components/marker/Marker.tsx | 64 ++++++++++--- packages/map/src/components/popup/PopUp.tsx | 23 +++-- packages/map/src/components/popup/index.less | 11 +++ packages/map/src/components/popup/index.tsx | 4 +- packages/map/src/demo/basic.tsx | 47 ++++++++-- tsconfig.json | 2 +- 27 files changed, 173 insertions(+), 67 deletions(-) rename packages/map/src/assets/icons/{marker_normal.png => camera_blue.png} (100%) rename packages/map/src/assets/icons/{marker_monitor.png => camera_green.png} (100%) rename packages/map/src/assets/icons/{marker_virtual.png => camera_grey.png} (100%) rename packages/map/src/assets/icons/{marker_track_virtual.png => camera_red.png} (100%) rename packages/map/src/assets/icons/{marker_pos.png => camera_red_border.png} (100%) rename packages/map/src/assets/icons/{marker_normal_select.png => camera_yellow.png} (100%) rename packages/map/src/assets/icons/{cluster_normal.png => cluster_blue.png} (100%) rename packages/map/src/assets/icons/{cluster_alarm.png => cluster_red.png} (100%) rename packages/map/src/assets/icons/{cluster_escape.png => cluster_red_border.png} (100%) rename packages/map/src/assets/icons/{fecluster_normal.png => marker_blue.png} (100%) rename packages/map/src/assets/icons/{fecluster_escape.png => marker_escape_border.png} (100%) rename packages/map/src/assets/icons/{fecluster_alarm.png => marker_green.png} (100%) rename packages/map/src/assets/icons/{fecluster_uncontrolled.png => marker_red_border.png} (100%) rename packages/map/src/assets/icons/{marker_track.png => marker_red_track.png} (100%) delete mode 100644 packages/map/src/assets/icons/marker_runing.png delete mode 100644 packages/map/src/assets/icons/marker_runing_select.png delete mode 100644 packages/map/src/assets/icons/marker_uncontrolled.png delete mode 100644 packages/map/src/assets/icons/marker_virtual_select.png rename packages/map/src/assets/icons/{fecluster_normal_select.png => marker_yellow.png} (100%) create mode 100644 packages/map/src/components/popup/index.less diff --git a/global.d.ts b/global.d.ts index 1ea3960..b854b33 100644 --- a/global.d.ts +++ b/global.d.ts @@ -1 +1,4 @@ declare module '*.less'; +declare module '*.png'; +declare module '*.jpg'; +declare module '*.jpeg'; diff --git a/packages/map/src/MapBox.tsx b/packages/map/src/MapBox.tsx index 9da0e84..1f268d0 100644 --- a/packages/map/src/MapBox.tsx +++ b/packages/map/src/MapBox.tsx @@ -1,48 +1,47 @@ import 'mapbox-gl/dist/mapbox-gl.css'; import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'; -import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'; -import Map from 'react-map-gl'; +import React, { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react'; +import Map, { PopupEvent } from 'react-map-gl'; import { CSSProperties } from "react"; -import { MapboxMap, MapRef, MapStyle } from "react-map-gl"; +import { MapRef, MapStyle, MapProps as MapBoxProps } from "react-map-gl"; import classnames from 'classnames' import Tools, { ToolsProps } from './components/tools' import DrawControl, { DrawControlProps, DrawControlRefProps } from './components/drawControl'; import { MAP_CENTER, defaultMapConfig } from './utils/constants'; import './index.less'; import mapboxDrawStyle from './utils/drawStyle'; -import Marker from './components/marker'; +import Marker, { MarkerProps } from './components/marker'; +import PopUp, { PopUpProps } from './components/popup'; const componentName = 'zhst-map' -export interface IMarkerData { - key: string; - title: string; - population: string; - status: string; - latitude: number; - longitude: number; -} -export interface MapProps extends Partial { - mapboxAccessToken?: string; //token - markerData?: IMarkerData[] - minZoom?: number; //最小层级 - maxZoom?: number; //最大层级 - mapStyle?: MapStyle; //地图样式 - height?: number | string; - width?: string | number; - mapRef?: MapRef; - style?: CSSProperties; - children?: JSX.Element | JSX.Element[] | Array; +export interface MapProps extends MapBoxProps { + mapboxAccessToken?: string //token + markerData?: MarkerProps[] + minZoom?: number //最小层级 + maxZoom?: number //最大层级 + mapStyle?: MapStyle //地图样式 + height?: number | string + width?: string | number + mapRef?: MapRef + style?: CSSProperties + children?: JSX.Element | JSX.Element[] | Array mapCenter?: { longitude: number, latitude: number } - draw?: boolean; + draw?: boolean + showMarker?: boolean // 显示标记点 buttonList?: ToolsProps['buttonList'] - onLoad?: (e: mapboxgl.MapboxEvent) => void; - onDrawCreate?: (e: { features: object[], [key: string]: any }) => void; - onDrawUpdate?: (e: { features: object[], [key: string]: any }) => void; - onDrawDelete?: (e: { features: object[], [key: string]: any }) => void; + popUpInfo?: PopUpProps + showPopUp?: boolean + customMarkerRender?: MarkerProps['customMarkerRender'] + onLoad?: (e: mapboxgl.MapboxEvent) => void + onDrawCreate?: (e: { features: object[], [key: string]: any }) => void + onDrawUpdate?: (e: { features: object[], [key: string]: any }) => void + onDrawDelete?: (e: { features: object[], [key: string]: any }) => void + onMarkerClick?: MarkerProps['onMarkerClick'] + onPopUpClose?: (e: PopupEvent) => void; } export interface MapRefProps { @@ -57,6 +56,14 @@ const MapBox = forwardRef((props, ref) => { width = '100%', draw, markerData = [], + popUpInfo = { + ...MAP_CENTER + }, + showPopUp, + customMarkerRender, + showMarker, + onMarkerClick, + onPopUpClose, buttonList = [ { label: '圆形框选', @@ -102,12 +109,10 @@ const MapBox = forwardRef((props, ref) => { const [drawConfig] = useState({ displayControlsDefault: false, position: 'top-left', + styles: mapboxDrawStyle, // Select which mapbox-gl-draw control buttons to add to the map. - controls: { - polygon: true, - trash: true - }, + controls: false, // The user does not have to click the polygon control button first. defaultMode: 'draw_polygon', }) @@ -116,13 +121,14 @@ const MapBox = forwardRef((props, ref) => { () => { return markerData.map((_item, index) => ( )) - }, - [markerData] + }, [markerData] ); useImperativeHandle(ref, () => ({ @@ -145,7 +151,15 @@ const MapBox = forwardRef((props, ref) => { style={{ width: width, height: height, ...style }} {...others} > - {initMarker} + {/* 标记点位 */} + {showMarker && initMarker} + {/* 点位弹框 */} + {showPopUp && popUpInfo && ( + + )} {/* diff --git a/packages/map/src/assets/icons/marker_normal.png b/packages/map/src/assets/icons/camera_blue.png similarity index 100% rename from packages/map/src/assets/icons/marker_normal.png rename to packages/map/src/assets/icons/camera_blue.png diff --git a/packages/map/src/assets/icons/marker_monitor.png b/packages/map/src/assets/icons/camera_green.png similarity index 100% rename from packages/map/src/assets/icons/marker_monitor.png rename to packages/map/src/assets/icons/camera_green.png diff --git a/packages/map/src/assets/icons/marker_virtual.png b/packages/map/src/assets/icons/camera_grey.png similarity index 100% rename from packages/map/src/assets/icons/marker_virtual.png rename to packages/map/src/assets/icons/camera_grey.png diff --git a/packages/map/src/assets/icons/marker_track_virtual.png b/packages/map/src/assets/icons/camera_red.png similarity index 100% rename from packages/map/src/assets/icons/marker_track_virtual.png rename to packages/map/src/assets/icons/camera_red.png diff --git a/packages/map/src/assets/icons/marker_pos.png b/packages/map/src/assets/icons/camera_red_border.png similarity index 100% rename from packages/map/src/assets/icons/marker_pos.png rename to packages/map/src/assets/icons/camera_red_border.png diff --git a/packages/map/src/assets/icons/marker_normal_select.png b/packages/map/src/assets/icons/camera_yellow.png similarity index 100% rename from packages/map/src/assets/icons/marker_normal_select.png rename to packages/map/src/assets/icons/camera_yellow.png diff --git a/packages/map/src/assets/icons/cluster_normal.png b/packages/map/src/assets/icons/cluster_blue.png similarity index 100% rename from packages/map/src/assets/icons/cluster_normal.png rename to packages/map/src/assets/icons/cluster_blue.png diff --git a/packages/map/src/assets/icons/cluster_alarm.png b/packages/map/src/assets/icons/cluster_red.png similarity index 100% rename from packages/map/src/assets/icons/cluster_alarm.png rename to packages/map/src/assets/icons/cluster_red.png diff --git a/packages/map/src/assets/icons/cluster_escape.png b/packages/map/src/assets/icons/cluster_red_border.png similarity index 100% rename from packages/map/src/assets/icons/cluster_escape.png rename to packages/map/src/assets/icons/cluster_red_border.png diff --git a/packages/map/src/assets/icons/fecluster_normal.png b/packages/map/src/assets/icons/marker_blue.png similarity index 100% rename from packages/map/src/assets/icons/fecluster_normal.png rename to packages/map/src/assets/icons/marker_blue.png diff --git a/packages/map/src/assets/icons/fecluster_escape.png b/packages/map/src/assets/icons/marker_escape_border.png similarity index 100% rename from packages/map/src/assets/icons/fecluster_escape.png rename to packages/map/src/assets/icons/marker_escape_border.png diff --git a/packages/map/src/assets/icons/fecluster_alarm.png b/packages/map/src/assets/icons/marker_green.png similarity index 100% rename from packages/map/src/assets/icons/fecluster_alarm.png rename to packages/map/src/assets/icons/marker_green.png diff --git a/packages/map/src/assets/icons/fecluster_uncontrolled.png b/packages/map/src/assets/icons/marker_red_border.png similarity index 100% rename from packages/map/src/assets/icons/fecluster_uncontrolled.png rename to packages/map/src/assets/icons/marker_red_border.png diff --git a/packages/map/src/assets/icons/marker_track.png b/packages/map/src/assets/icons/marker_red_track.png similarity index 100% rename from packages/map/src/assets/icons/marker_track.png rename to packages/map/src/assets/icons/marker_red_track.png diff --git a/packages/map/src/assets/icons/marker_runing.png b/packages/map/src/assets/icons/marker_runing.png deleted file mode 100644 index 0572538cd63de595cdc12ee6673b955b46807376..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2145 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 diff --git a/packages/map/src/assets/icons/marker_uncontrolled.png b/packages/map/src/assets/icons/marker_uncontrolled.png deleted file mode 100644 index 74705402dd857bb4e806ba8c43f4b72aff986fdc..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3394 zcmV-I4ZZS-P)Px>{7FPXRCodHTM3j@#T9-3_dX!Xu90OlYSgG05k(W+gDj$;9v#ud2?}bA%28xd zP-GF&n3Ld1jsh{bM2SWjH4%aWK@&BC;)*2b5sk<;pfETyz5d)=-8FRgO!u!p)2(<; z-Z`(Ue$}h@>UM3fs{R)#0XdG-9$XDx0{#lzT4Gu1psw~MsG3-9QG!Ywit-b|Rp5$@ zE+@I+6D#@N`;z+fQ*kzaE~%~C#A&D(X=qG~M8aZ4D#Y&ARjdQQBX+M|;ydd5;;ZcK zKtR_C1!N)kF3Ymkrwe-j)yh1T1h7gJm<7HFY=a#Dvf?ZLE{WGyi|pEkq*hRe4&p!I zcnO?-8UbstDQJ2EJPANIc-86&Abzx)p?_Q!?dY}$m!(vfw*0TR5l zN&*9Zq=7a-`%LgX02(v3WDF4C_J`6%;Qmyec;{V-J@kmAKKzJ}Wh48L?@I9UpNRjM zqqU9K5E%iGn{`65&i!Ho z93bCtGvo>o;5g0}fFp@_-;>7K_lVT(cGFv){C(O>c*4!%Kl&)@XP2!8NRH2fR1_e< zO+d-JSUSFBsYK__7fB`yD*IY8d_D<{xl#gy25NH?0dlr}$PWtw1h|VKyiigpCpz!< zR{Z%T`DMS+=fIFb5*mGlBeqQp7Z+;D76E3)+{-8!i9Rq-_BL?(pH(2Q8qG&`*8we! zNv>fz1aO=!IiW<@E%#P%tTgM!IP$Nv{0>3u~gOQl2B2T`TUrTQ4D#(N*aXC~5)-aFs||3yw70F{9P%oVD-1 z61ZT5_ zzK+l6nwD4hi>(&AX{`9*R+WO1aQ~wB{@QbE(yc>RrSD2U93a>0NoFDvY&ytEAT>Wx$yXLY69_6&P0}zlF|(u zUMPcsEm#F??TPdPa0T~sp0+#~bL^I^NV$l*X+vPkl!$>?AkPi>g#^gf6K+<$5GRyU zjk#iWX@j=BP<+KoEnY={1Hg{jiR)ySP%QAJ zOn5GYGoA{zAp7i|Ot%=u0~c{uavX^+cvu=|%#tKsDGiPV5oa3nC?k+{BW2UWSk#yl zK%Rb?690J<4<(A@jKtCxUDZ;CvTj71v~5ZnlLE-2JyW7@=|=39Cg8Ll$|`?UClm-x zZ0n*LQ@RDWZq@0oAsuHo;+XSFCS^=)Yr8y)C8b-if&Qr(xvhJgElpY@-x|xf&8}{? zvvsP2W+W(pO()LT5(VOV%Tpj*ZG&6mz&?K|>QbDrI7=Lly`(bE6}=AMFB zbP~QH@?twP<0^nw=g!78cH6J1ZiIEtGog&txl_?%Znm=v>(*8PZ7%?^8!tvyFz9JI z*Sgg56A0+X7DJu{n3B~oeR|-z1yl5TT!c4)Mao03>B7>qcBck{_&d z6Kl%%_v3X+dYM>lRa6KMZHx%(Tw?hOcTvoEq3WMXc=9Ci@h%~I;-RyRH0DvpWM)=2 zVcUe%r7Eu9K($;So&+BsIQ>*frnec)C`$2X|001i&oF9rc0Dp303H>RIMZ@6GA0}; z(xxf-`=6*q7qg2#3U2V9e3D}ydWg;_8aiKmDKU?C6$E7O-(9gMaHt7w(WVi>PGHzj zE&8a9lP7xG_kyj^71apLDE`Esg{NQTCfcAaQwp5@W3fA`W0ZdZ+fp^jpfInWw)l=f zcRIPhnXXhyqH}&L&aOH$`Bq3#H*MgC%d9k84;$kQO=GA40_kqVZ)ZaIik~^st{tPU zegEgOwY5NZb8Q9gI}|{bg{xWT*qf4ayD<4 zhC8N9>XT26lx?GOujB~_Z$XEmJ6#c_P60dny%ejZP ztOp!!hobEbaG8cTgpt=AiX%V1$$dkO=_EDd;&G zsGl_1O0D}hla0y3%RLp8uCFHK)YnU5__IUXk6D)Lp+pORhPINt8DhjV1V z8VL`kjbwH0Diy!F+p#)yAdVRTHzi+X_9WAk2SMIOa=u;b>)lHtlW!5h6uehaI1E>B zqGZ4=M%~mZkYC3ZTTlz3tM)*gP2MxHYPB@piRH4un#Asiw;tMjS3!3UZ*@rW?RRuF znuqXn!?#Spdu{!gM-RL|8f9m5!Q5q{Sw0GVhQxv3T7SReC3O9@&17^!DZo(|{Z#5I zMnO2}8F1SnH>?mi>S(cxW-CWw{zF5+yZIJi(8YLm*>c4Fn4yDM&_Uc(q zKo*9QRS0;+6Ahj-M1mu$n4ClGR(iLPli~3}chQ!L`Ht-);j71Rwj_-~y3rm2v1lXNUk-1*Z-hB#;R zYSck@Q&$b10a7CjU=M@0eh~@ZG}iHQDdJkAYymC@xWcA41mfoNJeX|E7IBMv8iV=D zFebT=951n$Q$KaOm3p7=5fva*RvlHe-$w~JyX(@EQjxpCAcjFOeFXUh3Y`RS-W+2T zYE=tr2rxJS@dx1LSQWQUa;%>83tA=x4r59DKE)hYOe;kGL1$}lTn_jOvuAMB-6nvU z%KaSSQ_`-&icCSTEpV4^Wm+y%Mg=XUF+(i}S6!*c*=T@UnO)9Hyv+b%oaYIbfnT+| zca!jxw)w3V4yN#ajDFFT4)nub0OiZJ86Xv+5*+wkBR}GV5FU3U6PeXS9CP{9ER8ef zr14^*H$e7j@NM~Jygru%AdLd#HUxC(cKA>1C&5cDW^xnJLs6F}i6maM!(CwJmC7ao zL_*hIBfiQ?Ceb~thECm0nbs=G{hM2*BDWA`)-#Z@6l^z4pJ^pmznLpg;3@0%WFCN> z0B|1^5cQN?vKG`V~|Sn2N^basm&-7t7Yy0u1?3LK4<93YjVf?OYK zaQtY6C*F)@fd>R2oYC05dn;yK5$*&-9J7G{d(%9WeKMUKMY((=gCmAJ_V*5JR&N^zQP_U5YjQCk zi85_F_-SULOkGslL4{vOd^Y=RcVZ!T z;D?4T8>wc^y8C~(7BT}UTMm#VUk7z1w+py|gkK-|%sW>G;;_`Yz8czK`*}me6{ewhkTSG%jD30uUo= zT=rs&Wws3+^m!?Pm3IurV#b$yczJGPDS>HS85cu8mL^0myb}lDbL#HT~Z{N;#*KT5S(+f($*-mZSD$!M|wnUdNOC-0~Rx;hPtyv69MP(U-tX%#i<67Zw z(0gJLJ;^g;XVkLjg*I^WuY_-3@&+ZZP`oet=^!kRlbuFL*EH2eqt Y2M09rLdzNk&Hw-a07*qoM6N<$g0-Dj3;+NC diff --git a/packages/map/src/assets/icons/marker_virtual_select.png b/packages/map/src/assets/icons/marker_virtual_select.png deleted file mode 100644 index 00eeaab18861a6c49cb4391654e78e0062e48d70..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3376 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 diff --git a/packages/map/src/assets/icons/fecluster_normal_select.png b/packages/map/src/assets/icons/marker_yellow.png similarity index 100% rename from packages/map/src/assets/icons/fecluster_normal_select.png rename to packages/map/src/assets/icons/marker_yellow.png diff --git a/packages/map/src/components/marker/Marker.tsx b/packages/map/src/components/marker/Marker.tsx index deeca9f..c332dd2 100644 --- a/packages/map/src/components/marker/Marker.tsx +++ b/packages/map/src/components/marker/Marker.tsx @@ -1,19 +1,43 @@ /** * Created by jiangzhixiong on 2024/05/23 */ -import React, { forwardRef, useContext, useImperativeHandle } from 'react' +import React, { forwardRef, ReactNode, useContext, useImperativeHandle } from 'react' import { Marker as MapboxMarker, - MarkerProps as MapboxMarkerProps + MarkerProps as MapboxMarkerProps, + MarkerEvent } from 'react-map-gl' -import { ConfigProvider, Image } from '@zhst/meta' -import markerPic from '../../assets/icons/marker_monitor.png' +import { Checkbox, ConfigProvider, Image } from '@zhst/meta' +import cameraBlue from '../../assets/icons/camera_blue.png' +import cameraGreen from '../../assets/icons/camera_green.png' +import cameraGrey from '../../assets/icons/camera_grey.png' +import cameraRed from '../../assets/icons/camera_red.png' +import cameraYellow from '../../assets/icons/camera_yellow.png' const { ConfigContext } = ConfigProvider +const PIC_MAP = new Map([ + ['camera_blue', cameraBlue], + ['camera_green', cameraGreen], + ['camera_grey', cameraGrey], + ['camera_red', cameraRed], + ['camera_yellow', cameraYellow], +]) + +// @ts-ignore export interface MarkerProps extends MapboxMarkerProps { prefixCls?: string; key: string; + title?: string; + checked?: boolean; + type?: 'camera' | 'cluster' | 'marker'; + population?: string; + status?: 'blue' | 'green' | 'yellow' | 'grey' | 'red_border' | 'escape' | 'escape_border' | 'red_track'; // 摄像头状态 + latitude: number; + longitude: number; + onClick?: (e?: MarkerEvent, data?: MarkerProps) => void; + onMarkerClick?: (e?: MouseEvent, checked?: boolean, data?: MarkerProps) => void; + customMarkerRender?: (data: MarkerProps) => ReactNode } export interface MarkerRefProps { @@ -22,27 +46,43 @@ export interface MarkerRefProps { const Marker = forwardRef((props, ref) => { const { prefixCls: customizePrefixCls, - key, longitude, latitude, - onClick + checked = false, + type = 'camera', + status = 'blue', + onClick, + onMarkerClick, + customMarkerRender } = props const { getPrefixCls } = useContext(ConfigContext) const componentName = getPrefixCls('-map-marker', customizePrefixCls); - useImperativeHandle(ref, () => ({ - - })) + useImperativeHandle(ref, () => ({})) return ( { + e.originalEvent.stopPropagation(); + onClick?.(e, props) + }} > - + {/* 自定义marker */} + {customMarkerRender?.(props) || ( +
+ { + e.stopPropagation() + // @ts-ignore + onMarkerClick?.(e, checked, props) + }}> + + +
+ )} ) }) diff --git a/packages/map/src/components/popup/PopUp.tsx b/packages/map/src/components/popup/PopUp.tsx index e1efd0a..48a6b8f 100644 --- a/packages/map/src/components/popup/PopUp.tsx +++ b/packages/map/src/components/popup/PopUp.tsx @@ -3,16 +3,21 @@ */ import React, { forwardRef, useContext, useImperativeHandle } from 'react' import { - PopUp as MapboxPopUp, + Popup as MapboxPopUp, PopupProps as MapboxPopupProps } from 'react-map-gl' -import { ConfigProvider } from '@zhst/meta' +import { ConfigProvider, Image } from '@zhst/meta' +import './index.less' +import classNames from 'classnames' const { ConfigContext } = ConfigProvider export interface PopUpProps extends MapboxPopupProps { prefixCls?: string; size?: number; + title?: string; + url?: string; + content?: string; } export interface PopUpRefProps { @@ -23,24 +28,28 @@ const PopUp = forwardRef((props, ref) => { longitude, latitude, onClose, + title, + content, + url, prefixCls: customizePrefixCls } = props const { getPrefixCls } = useContext(ConfigContext) const componentName = getPrefixCls('map-popup', customizePrefixCls); - useImperativeHandle(ref, () => ({ - - })) + useImperativeHandle(ref, () => ({})) return ( -
- popup +
+ {title &&

{title}

} + {url && } + {content &&

{content}

}
) diff --git a/packages/map/src/components/popup/index.less b/packages/map/src/components/popup/index.less new file mode 100644 index 0000000..3510a6a --- /dev/null +++ b/packages/map/src/components/popup/index.less @@ -0,0 +1,11 @@ +.zhst-map-popup { + .mapboxgl-popup-content { + padding: 12px 6px 6px; + } + + &-container { + p { + margin: 0; + } + } +} diff --git a/packages/map/src/components/popup/index.tsx b/packages/map/src/components/popup/index.tsx index 166a7c3..867e3fe 100644 --- a/packages/map/src/components/popup/index.tsx +++ b/packages/map/src/components/popup/index.tsx @@ -1,5 +1,7 @@ /** * Created by jiangzhixiong on 2024/05/23 */ -export { default as PopUp } from './PopUp' +import PopUp from './PopUp' export type { PopUpProps, PopUpRefProps } from './PopUp' + +export default PopUp diff --git a/packages/map/src/demo/basic.tsx b/packages/map/src/demo/basic.tsx index 0419b39..3c889bf 100644 --- a/packages/map/src/demo/basic.tsx +++ b/packages/map/src/demo/basic.tsx @@ -1,9 +1,12 @@ import React, { useRef, useEffect, useState } from 'react'; import { MapBox } from '@zhst/map'; import axios from 'axios'; +import { FloatButton, Switch } from '@zhst/meta'; const demo = () => { const [markerData, setMarkerData] = useState([]) + const [showMarker, setShowMarker] = useState(true) + const [popupInfo, setPopupInfo] = useState() const mapRef = useRef(null); // 初始化 @@ -44,16 +47,40 @@ const demo = () => { }, []) return ( - console.log('Create', e)} - onDrawDelete={e => console.log('Delete', e)} - onDrawUpdate={e => console.log('Update', e)} - width='100%' - height='100vh' - markerData={markerData} - /> +
+ + + + console.log('Create', e)} + onDrawDelete={e => console.log('Delete', e)} + onDrawUpdate={e => console.log('Update', e)} + width='100%' + height='100vh' + markerData={markerData} + showMarker={showMarker} + showPopUp + popUpInfo={popupInfo} + onPopUpClose={e => setPopupInfo(null)} + onMarkerClick={(e, status, data) => { + setPopupInfo({ + longitude: data?.longitude, + latitude: data?.latitude, + content: '测试' + }) + }} + onZoomEnd={map => { + let zoom = map.target.getZoom() // 画面层级，用来判断标签是否显示隐藏 + + console.log('zoom', zoom) + // setShowMarker(pre => !pre) + }} + // customMarkerRender={(_data) =>
自定义标记
} + /> +
); }; diff --git a/tsconfig.json b/tsconfig.json index 28e0062..774856c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -32,6 +32,6 @@ // "@zhst/meta" 全局使用的工具包，不建议写到 npm 包中去 ] }, - "include": [".dumirc.ts", "src/**/*", "packages/**/*"], + "include": [".dumirc.ts", "src/**/*", "packages/**/*", "global.d.ts"], "exclude": ["node_modules", "lib", "es", ".dumi"] }