地理围栏

[xupeihong]

使用第三方组件，BMapLib.GeoUtils.isPointInPolygon判断点是否在范围内，不行，为什么呢？

[jaywcjlove]

@xupeihong 看官方实例，要加载官方SDK

参考：https://github.com/uiwjs/react-baidu-map/blob/2c95d3d00d52c5f15044dde8553b4b2a3be4944b/src/CurveLine/useCurveLine.tsx#L29-L39

[xupeihong]

当前组件自动加载 DrawingManager_min.js，加载完成将会有个 window.BMapLib 的全局对象。

[xupeihong]

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未定义。

[jaywcjlove]

@xupeihong 这个 useDrawingManager 没有办法配置 的吧，需要使用 requireScript

[xupeihong]

GeoUtils这个js通过requireScript引用就行了吗？

[jaywcjlove]

@xupeihong

参考：https://github.com/uiwjs/react-baidu-map/blob/2c95d3d00d52c5f15044dde8553b4b2a3be4944b/src/CurveLine/useCurveLine.tsx#L29-L39

[jaywcjlove]

@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_);