@uiw/react-baidu-map-curve-line
Version:
Baidu Map Components for React.
91 lines (89 loc) • 3.11 kB
JavaScript
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
};
}