Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 1x 1x 2x 2x 2x 2x 2x 2x 2x | 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';
import { CurveLineProps } from '.';
export interface UseCurveLine extends CurveLineProps {}
export function useCurveLine(props = {} as UseCurveLine) {
const {
strokeColor,
strokeWeight,
strokeOpacity,
strokeStyle,
enableMassClear,
enableEditing = false,
enableClicking,
icons,
} = props;
const { map } = useMapContext();
const [curveLine, setCurveLine] = useState<BMapLib.CurveLine>();
const libSDK = window.BMapLib;
const [bMapLib, setBMapLib] = useState<typeof BMapLib>(libSDK);
const [loadMapLib, setLoadBMapLib] = useState(false || !!libSDK);
// eslint-disable-next-line react-hooks/exhaustive-deps
const opts = {
strokeColor,
strokeWeight,
strokeOpacity,
strokeStyle,
enableMassClear,
enableEditing,
enableClicking,
icons,
};
useMemo(() => {
// 如果第一次加载，会执行下面的
Iif (map && bMapLib && !curveLine) {
if (bMapLib.CurveLine) {
const points = (props.path || []).map((item) => new BMap.Point(item.lng, item.lat));
const instance = new BMapLib.CurveLine(points, opts);
map.addOverlay(instance);
setCurveLine(instance);
}
}
// 如果 bMapLib 已经加载过，会执行下面的
Iif (map && bMapLib && !bMapLib.CurveLine) {
requireScript('//api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js')
.then(() => {
if (window.BMapLib) {
const newMapLib = Object.assign(window.BMapLib, bMapLib);
setBMapLib(newMapLib);
const points = (props.path || []).map((item) => new BMap.Point(item.lng, item.lat));
const 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]);
const [path, setPath] = useState(props.path || []);
useEffect(() => {
if (curveLine && props.path && path && JSON.stringify(path) !== JSON.stringify(props.path)) {
const points = path.map((item) => new BMap.Point(item.lng, item.lat));
curveLine.setPath(points);
}
}, [curveLine, path, props.path]);
useVisiable(curveLine!, props);
useEventProperties<BMap.Polyline, UseCurveLine>(curveLine!, props, [
'Click',
'DblClick',
'MouseDown',
'MouseUp',
'MouseOut',
'MouseOver',
'Remove',
'LineUpdate',
]);
useEnableProperties<BMapLib.CurveLine, UseCurveLine>(curveLine!, props, ['Editing', 'MassClear']);
// PositionAt
useProperties<BMapLib.CurveLine, UseCurveLine>(curveLine!, props, [
'StrokeColor',
'StrokeOpacity',
'StrokeWeight',
'StrokeStyle',
]);
return {
curveLine,
setCurveLine,
BMapLib: bMapLib,
path,
setPath,
};
}
|