@uiw/react-baidu-map-polygon
Version:
Baidu Map map-polygon Components for React.
63 lines • 1.81 kB
JavaScript
import { useState, useEffect } from 'react';
import { useMapContext } from '@uiw/react-baidu-map-map';
import { noop, useEnableProperties, useProperties, useVisiable, useEventProperties } from '@uiw/react-baidu-map-utils';
export function usePolygon(props) {
if (props === void 0) {
props = {};
}
var {
strokeColor,
fillColor,
strokeWeight,
strokeOpacity,
fillOpacity,
strokeStyle,
enableMassClear,
enableEditing,
enableClicking
} = props;
var {
map
} = useMapContext();
var [polygon, setPolygon] = useState();
var [path, setPath] = useState(props.path || []);
var opts = {
strokeColor,
fillColor,
strokeWeight,
strokeOpacity,
fillOpacity,
strokeStyle,
enableMassClear,
enableEditing,
enableClicking
};
useEffect(() => {
if (!BMap || !map) return noop;
var points = (path || []).map(item => new BMap.Point(item.lng, item.lat));
var instance = new BMap.Polygon(points, opts);
map.addOverlay(instance);
setPolygon(instance);
return function () {
map.removeOverlay(instance);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [map]);
useEffect(() => {
if (path && polygon) {
var points = path.map(item => new BMap.Point(item.lng, item.lat));
polygon.setPath(points);
}
}, [polygon, path]);
useVisiable(polygon, props);
useEventProperties(polygon, props, ['Click', 'DoubleClick', 'MouseDown', 'MouseUp', 'MouseOut', 'MouseOver', 'Remove', 'LineUpdate']);
useEnableProperties(polygon, props, ['Editing', 'MassClear']);
// PositionAt
useProperties(polygon, props, ['StrokeColor', 'StrokeOpacity', 'FillColor', 'FillOpacity', 'StrokeWeight', 'StrokeStyle']);
return {
polygon,
setPolygon,
path,
setPath
};
}