UNPKG

@uiw/react-baidu-map-curve-line

Version:
91 lines (89 loc) 3.11 kB
import { useState, useEffect, useMemo } from 'react'; import { useMapContext } from '@uiw/react-baidu-map-map'; import { requireScript } from '@uiw/react-baidu-map-utils'; import { useEnableProperties, useProperties, useVisiable, useEventProperties } from '@uiw/react-baidu-map-utils'; export function useCurveLine(props) { if (props === void 0) { props = {}; } var { strokeColor, strokeWeight, strokeOpacity, strokeStyle, enableMassClear, enableEditing = false, enableClicking, icons } = props; var { map } = useMapContext(); var [curveLine, setCurveLine] = useState(); var libSDK = window.BMapLib; var [bMapLib, setBMapLib] = useState(libSDK); var [loadMapLib, setLoadBMapLib] = useState(false || !!libSDK); // eslint-disable-next-line react-hooks/exhaustive-deps var opts = { strokeColor, strokeWeight, strokeOpacity, strokeStyle, enableMassClear, enableEditing, enableClicking, icons }; useMemo(() => { // 如果第一次加载,会执行下面的 if (map && bMapLib && !curveLine) { if (bMapLib.CurveLine) { var points = (props.path || []).map(item => new BMap.Point(item.lng, item.lat)); var instance = new BMapLib.CurveLine(points, opts); map.addOverlay(instance); setCurveLine(instance); } } // 如果 bMapLib 已经加载过,会执行下面的 if (map && bMapLib && !bMapLib.CurveLine) { requireScript('//api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js').then(() => { if (window.BMapLib) { var newMapLib = Object.assign(window.BMapLib, bMapLib); setBMapLib(newMapLib); var _points = (props.path || []).map(item => new BMap.Point(item.lng, item.lat)); var _instance = new BMapLib.CurveLine(_points, opts); map.addOverlay(_instance); setCurveLine(_instance); } }).catch(() => {}); } // 如果第一次加载,会执行下面的 if (!bMapLib && !loadMapLib) { setLoadBMapLib(true); requireScript('//api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js').then(() => { if (window.BMapLib) { setBMapLib(window.BMapLib); } }).catch(() => {}); } }, [map, bMapLib, curveLine, loadMapLib, props.path, opts]); var [path, setPath] = useState(props.path || []); useEffect(() => { if (curveLine && props.path && path && JSON.stringify(path) !== JSON.stringify(props.path)) { var points = path.map(item => new BMap.Point(item.lng, item.lat)); curveLine.setPath(points); } }, [curveLine, path, props.path]); useVisiable(curveLine, props); useEventProperties(curveLine, props, ['Click', 'DblClick', 'MouseDown', 'MouseUp', 'MouseOut', 'MouseOver', 'Remove', 'LineUpdate']); useEnableProperties(curveLine, props, ['Editing', 'MassClear']); // PositionAt useProperties(curveLine, props, ['StrokeColor', 'StrokeOpacity', 'StrokeWeight', 'StrokeStyle']); return { curveLine, setCurveLine, BMapLib: bMapLib, path, setPath }; }