import { useState , useEffect } from 'react' ; import { defaultIconUrl } from './markers' ; import { MarkerProps } from '.' ; import { noop , useEnableProperties , useProperties , useVisiable , useEventProperties } from '@uiw/react-baidu-map-utils' ; export interface UseMarker extends MarkerProps { } const getIcons = ( name ) => { const icons = { simple_red : new BMap . Icon ( defaultIconUrl , new BMap . Size ( 42 / 2 , 66 / 2 ) , { imageOffset : new BMap . Size ( - 454 / 2 , - 378 / 2 ) , anchor : new BMap . Size ( 42 / 2 / 2 , 66 / 2 ) , } ) , simple_blue : new BMap . Icon ( defaultIconUrl , new BMap . Size ( 42 / 2 , 66 / 2 ) , { imageOffset : new BMap . Size ( - 454 / 2 , - 450 / 2 ) , anchor : new BMap . Size ( 42 / 2 / 2 , 66 / 2 ) , } ) , loc_red : new BMap . Icon ( defaultIconUrl , new BMap . Size ( 46 / 2 , 70 / 2 ) , { imageOffset : new BMap . Size ( - 400 / 2 , - 378 / 2 ) , anchor : new BMap . Size ( 46 / 2 / 2 , 70 / 2 ) , } ) , loc_blue : new BMap . Icon ( defaultIconUrl , new BMap . Size ( 46 / 2 , 70 / 2 ) , { imageOffset : new BMap . Size ( - 400 / 2 , - 450 / 2 ) , anchor : new BMap . Size ( 46 / 2 / 2 , 70 / 2 ) , } ) , dot_red : new BMap . Icon ( defaultIconUrl , new BMap . Size ( 16 / 2 , 16 / 2 ) , { imageOffset : new BMap . Size ( - 216 / 2 , - 466 / 2 ) , anchor : new BMap . Size ( 16 / 2 / 2 , 16 / 2 ) , } ) , dot_blue : new BMap . Icon ( defaultIconUrl , new BMap . Size ( 16 / 2 , 16 / 2 ) , { imageOffset : new BMap . Size ( - 216 / 2 , - 486 / 2 ) , anchor : new BMap . Size ( 16 / 2 / 2 , 16 / 2 ) , } ) , start : new BMap . Icon ( defaultIconUrl , new BMap . Size ( 50 / 2 , 80 / 2 ) , { imageOffset : new BMap . Size ( - 400 / 2 , - 278 / 2 ) , anchor : new BMap . Size ( 50 / 2 / 2 , 80 / 2 ) , } ) , end : new BMap . Icon ( defaultIconUrl , new BMap . Size ( 50 / 2 , 80 / 2 ) , { imageOffset : new BMap . Size ( - 450 / 2 , - 278 / 2 ) , anchor : new BMap . Size ( 50 / 2 / 2 , 80 / 2 ) , } ) , location : new BMap . Icon ( defaultIconUrl , new BMap . Size ( 28 / 2 , 40 / 2 ) , { imageOffset : new BMap . Size ( - 248 / 2 , - 466 / 2 ) , anchor : new BMap . Size ( 28 / 2 / 2 , 40 / 2 ) , } ) , } ; for ( let i = 1 ; i <= 10 ; i ++ ) { ( icons as any ) [ 'red' + i ] = new BMap . Icon ( defaultIconUrl , new BMap . Size ( 42 / 2 , 66 / 2 ) , { imageOffset : new BMap . Size ( 0 - ( 42 / 2 ) * ( i - 1 ) , 0 ) , anchor : new BMap . Size ( 42 / 2 / 2 , 66 / 2 ) , } ) ; } for ( let i = 1 ; i <= 10 ; i ++ ) { ( icons as any ) [ 'blue' + i ] = new BMap . Icon ( defaultIconUrl , new BMap . Size ( 42 / 2 , 66 / 2 ) , { imageOffset : new BMap . Size ( 0 - ( 42 / 2 ) * ( i - 1 ) , - 132 / 2 ) , anchor : new BMap . Size ( 42 / 2 / 2 , 66 / 2 ) , } ) ; } return icons [ name as keyof typeof icons ] ; } ; export function useMarker ( props = { } as UseMarker ) { const { map , position , animation , offset , icon , enableMassClear , enableDragging , enableClicking , raiseOnDrag , draggingCursor , rotation , shadow , title , } = props ; const [ marker , setMarker ] = useState < BMap . Marker > ( ) ; useEffect ( ( ) => { if ( ! BMap || ! map ) return noop ; const options = { offset , icon , enableMassClear , enableDragging , enableClicking , raiseOnDrag , draggingCursor , rotation , shadow , title , } ; const point = new BMap . Point ( position . lng , position . lat ) ; const newMarker = new BMap . Marker ( point , options ) ; map . addOverlay ( newMarker ) ; newMarker . setAnimation ( animation ) ; setMarker ( newMarker ) ; return ( ) => { map . removeOverlay ( newMarker ) ; } ; } , [ map ] ) ; const [ type , setType ] = useState ( props . type || 'loc_blue' ) ; /**
     * 设置标注点 `图标`
     */ useEffect ( ( ) => { if ( map && marker && ! icon && type ) { const newIcon = getIcons ( type as string ) ; newIcon . setImageSize ( new BMap . Size ( 600 / 2 , 600 / 2 ) ) ; marker . setIcon ( newIcon ) ; } } , [ type , marker ] ) ; useVisiable ( marker ! , props ) ; useEventProperties < BMap . Marker , UseMarker > ( marker ! , props , [ 'Click' , 'DblClick' , 'MouseDown' , 'MouseUp' , 'MouseOut' , 'MouseOver' , 'Remove' , 'InfowindowClose' , 'InfowindowOpen' , 'DragStart' , 'Dragging' , 'DragEnd' , 'RightClick' , ] ) ; useEnableProperties < BMap . Marker , UseMarker > ( marker ! , props , [ 'Dragging' , 'MassClear' , 'Clicking' ] ) ; useProperties < BMap . Marker , UseMarker > ( marker ! , props , [ 'Icon' , 'Position' , 'Animation' , 'Offset' , 'Label' , 'Title' , 'Top' , 'ZIndex' , 'Rotation' , 'Shadow' , ] ) ; return { marker , setMarker , type , setType , } ; }