import { useState , useEffect } from 'react' ; import { useVisiable , useEventProperties , useSettingProperties } from '@uiw/react-amap-utils' ; import { MassMarksProps } from './' ; export interface UseMassMarks extends MassMarksProps { } export const useMassMarks = ( props = { } as UseMassMarks ) => { const { map , visiable , ... other } = props ; const { opacity = 0.8 , zIndex = 1111 , style , data } = other || { } ; const [ massMarks , setMassMarks ] = useState < AMap . MassMarks > ( ) ; useEffect ( ( ) => { if ( ! AMap || ! map ) return ; if ( ! massMarks ) { let initStyle = style ; if ( ! initStyle ) { initStyle = [ { url : 'https://webapi.amap.com/images/mass/mass0.png' , anchor : new AMap . Pixel ( 6 , 6 ) , size : new AMap . Size ( 11 , 11 ) , zIndex : 3 , } , { url : 'https://webapi.amap.com/images/mass/mass1.png' , anchor : new AMap . Pixel ( 4 , 4 ) , size : new AMap . Size ( 7 , 7 ) , zIndex : 2 , } , { url : 'https://webapi.amap.com/images/mass/mass2.png' , anchor : new AMap . Pixel ( 3 , 3 ) , size : new AMap . Size ( 5 , 5 ) , zIndex : 1 , } , ] ; } let instance = new AMap . MassMarks ( data || [ ] , { opacity , zIndex , style : initStyle } ) ; setMassMarks ( instance ) ; instance . setMap ( map ) ; return ( ) => { if ( instance ) { instance . clear ( ) ; setMassMarks ( undefined ) ; } } ; } } , [ map ] ) ; useVisiable ( massMarks ! , visiable ) ; useSettingProperties < AMap . MassMarks , UseMassMarks > ( massMarks ! , props , [ 'Map' , 'Data' , 'Style' , 'Opacity' , 'zIndex' , 'Zooms' , ] ) ; useEventProperties < AMap . MassMarks , UseMassMarks > ( massMarks ! , props , [ 'onClick' , 'onDblClick' , 'onMouseMove' , 'onMouseOut' , 'onMouseUp' , 'onMouseDown' , 'onMouseOver' , 'onTouchStart' , 'onTouchEnd' , ] ) ; return { massMarks , setMassMarks } ; } ;