You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
33 lines
1.0 KiB
33 lines
1.0 KiB
import { useEffect, useRef, useContext } from 'react'; |
|
import { MapContext } from './map'; |
|
export function HeatMapLayer(props) { |
|
const mapContext = useContext(MapContext); |
|
const heatmapRef = useRef(null); |
|
useEffect(() => { |
|
if (mapContext) { |
|
mapContext.plugin('AMap.Heatmap', () => { |
|
heatmapRef.current = new AMap.Heatmap(mapContext, props.heatmapOptions || { |
|
radius: 25, |
|
opacity: [0, 0.8], |
|
}); |
|
}); |
|
} |
|
return () => { |
|
if (heatmapRef.current) { |
|
heatmapRef.current.setMap(null); |
|
} |
|
}; |
|
}, [mapContext]); |
|
useEffect(() => { |
|
if (props.open && heatmapRef.current) { |
|
heatmapRef.current.setDataSet({ |
|
data: props.data, |
|
}); |
|
heatmapRef.current && heatmapRef.current.show(); |
|
} |
|
else { |
|
heatmapRef.current && heatmapRef.current.hide(); |
|
} |
|
}, [props.open, props.data, mapContext]); |
|
return null; |
|
}
|
|
|