Closed xupeihong closed 3 years ago
当前组件自动加载 DrawingManager_min.js,加载完成将会有个 window.BMapLib 的全局对象。
import { DrawingManager, useDrawingManager } from '@uiw/react-baidu-map' 用useDrawingManager 这个的话,在config中配置js文件 { src: 'http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js' }, { src: 'http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js' }, 再使用BMapLib.GeoUtils.isPointInPolygon无论点在不在范围内都是返回显示不在范围聂,如果不引用js就不行报GeoUtils未定义。
@xupeihong 这个 useDrawingManager
没有办法配置 的吧,需要使用 requireScript
GeoUtils这个js通过requireScript引用就行了吗?
@xupeihong 新增了一个 RequireScript
组件方便加载第三方包,通过组件 RequireScript
或者 requireScript
方法加载第三方 SDK
import { useRef } from 'react';
import { Map, APILoader, RequireScript } from '@uiw/react-baidu-map';
const Demo = () => {
const myDis = useRef();
const openHandle = () => {
myDis.current.open();
}
const closeHandle = () => {
myDis.current.close();
}
return (
<>
<div>
<input type="button" value="开启测距" onClick={openHandle} />
<input type="button" value="关闭测距" onClick={closeHandle} />
</div>
<Map mapClick={false}>
<RequireScript src="//mapopen.cdn.bcebos.com/github/BMapGLLib/DistanceTool/src/DistanceTool.min.js">
{({ map }) => {
myDis.current = new BMapGLLib.DistanceTool(map);
// 监听测距过程中的鼠标事件
myDis.current.addEventListener('drawend', function(e) {
console.group("drawend");
console.log(e.points);
console.log(e.overlays);
console.log(e.distance);
console.groupEnd();
});
myDis.current.addEventListener("addpoint", function(e) {
console.group("addpoint");
console.log(e.point);
console.log(e.pixel);
console.log(e.index);
console.log(e.distance);
console.groupEnd();
});
myDis.current.addEventListener("removepolyline", function(e) {
console.group("removepolyline");
console.log(e);
console.groupEnd();
});
}}
</RequireScript>
</Map>
</>
);
};
ReactDOM.render((
<div style={{ width: '100%', height: '300px' }}>
<APILoader type="webgl" akay="GTrnXa5hwXGwgQnTBG28SHBubErMKm3f">
<Demo />
</APILoader>
</div>
), _mount_);
使用第三方组件,BMapLib.GeoUtils.isPointInPolygon判断点是否在范围内,不行,为什么呢?