百度地图绘制电子围栏(包括移动端绘制操作)以及检测坐标是否在电子围栏内

由于本人在PC端仅使用了多边形绘制，但矩形跟多边形用法基本一样，圆形并未使用，如不符合读者需求也可以参考一下。

绘制后得到的数据可能不同，但绘制方法仅仅是传递的参数不同。

关于给坐标数组在地图绘制图形的效果在移动端部分包含。

一、绘制需要引入的文件

1.首先肯定包括咱们最需要的百度地图的文件

<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=3.0&ak=申请的ak"></script> 
<!-- 注意切换为自己申请的ak -->

2.随后需要的则是我们绘制所需要的文件，一个css文件，一个js文件

<!-- JS文件 -->
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<!-- CSS文件 -->
<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css">

3.最后则是我们判断坐标是否在电子围栏内的js文件

<script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>

做完这些准备后我们就可以在代码中进行使用了

二、PC端进行绘制

其实绘制也很简单，我使用的操作也更简单一些，这里主要使用的则是BMapLibrary - BMapLib.DrawingManager (baidu.com)

这个方法，同时这个方法可以控制显示一个工具条(说实话，感觉有点老...)

    onMounted(() => {
        init()
    })
    function init() {
        // 这里的 map 和 drawingManager 都是全局变量，在这里初始化，在其他地方都需要使用
        map = new BMap.Map("allmap", { enableMapClick: false });
        map.centerAndZoom(new BMap.Point(103.388611, 35.563611), 5);
        map.setCurrentCity("北京");
        map.enableScrollWheelZoom();
        // 初始化部分，根据自己需求适当修改

        drawingManager = new BMapLib.DrawingManager(map, {
            isOpen: false, // 是否开启绘制模式，肯定是我们交互之后才需要开启了，所以要先关闭
            enableDrawingTool: false, // 是否显示工具栏，默认开启，但是太丑了就不开了
        });
        drawingManager.addEventListener('overlaycomplete', overlaycomplete); // 绘制完成事件
    }

    // 绘制完成事件的处理函数(获取绘制的数据)
    function overlaycomplete(e) {
        // e.overlay.Po 就是绘制的数据,多边形和矩形的数据都是数组包含各个角的坐标，圆形则不太了解了
        // 这里可以根据自己的业务需求进行处理
        console.log(e.overlay.Po);
    };

    // 绘制图形的函数
    function setDrawingMode(mode) {
        // mode:代表我们需要绘制的图形
        // BMAP_DRAWING_POLYGON:多边形
        // BMAP_DRAWING_RECTANGLE:矩形
        // BMAP_DRAWING_CIRCLE:圆形
        // 这里可以根据自己的业务需求进行传参
        drawingManager.setDrawingMode(mode);
        // 开启绘制模式
        drawingManager.open();
    }

这里我们自定义按钮给 setDrawingMode 函数传参即可，从 overlayconplete 函数中获取绘制结果。

注意：因为多边形双击即可完成绘制，但其他图形不可以，我们可以添加一个完成绘制的按钮，函数中使用 drawingManager.close() 即可

三、移动端进行绘制

这里先讲一下移动端的思路，如果不适合或者感觉有更好的想法可以在评论区发表建议哈。

感觉移动端整体还是不适合做这个效果的，也有可能是我太菜了。

整体思路是：自定义添加按钮 => 点击地图 => 获取点击坐标 => 根据坐标生成一个长宽为1米的矩形 => 绘制到地图上，同时有一个弹框，可以修改宽高，修改后，确定按钮则会将数据保存，取消按钮则取消绘制。

在上述的第二个步骤会禁用地图的拖拽和双指操作缩放，因为会影响地图的点击事件，点击时移动一点都不会触发点击事件，触发拖拽事件，很麻烦。

    // 这里不展示弹框代码了，直接展示变量，默认为1米
    const formInline = ref({
        wide: 1,
        long: 1
    });
    // 自定义的添加围栏函数
    function addFence() {
        map.disableDragging(); // 禁止拖动地图
        map.disablePinchToZoom(); // 禁用双指操作缩放
        map.addEventListener('click', mapClick);
    };
    // 地图的点击事件
    const pointRectangle = ref();
    function mapClick(e) {
        // pointRectangle全局变量，后续封装的函数会用到
        pointRectangle.value = { lng: e.point.lng, lat: e.point.lat };
        let point = new BMap.Point(pointRectangle.value.lng, pointRectangle.value.lat);
        changeRect();
    };

    const EARTH_RADIUS = 6378137;
    function metersToLatitudeDegrees(meters) {
        return meters / (EARTH_RADIUS * Math.PI / 180);
    };

    function metersToLongitudeDegrees(meters, latitude) {
        const metersPerDegree = EARTH_RADIUS * Math.cos(latitude * Math.PI / 180) * Math.PI / 180;
        return meters / metersPerDegree;
    };
    // 根据点击的那个坐标点以及长宽，计算围栏的四个点坐标，并画出围栏
    const rectangularBox = ref(undefined);
    function changeRect() {
        let centerLat = pointRectangle.value.lat;
        let centerLng = pointRectangle.value.lng;
        let latOffset = metersToLatitudeDegrees(formInline.value.long * 500);
        let lngOffset = metersToLongitudeDegrees(formInline.value.wide * 500, centerLat);
        const pointArr = [
            new BMap.Point(centerLng + lngOffset, centerLat + latOffset),
            new BMap.Point(centerLng - lngOffset, centerLat + latOffset),
            new BMap.Point(centerLng - lngOffset, centerLat - latOffset),
            new BMap.Point(centerLng + lngOffset, centerLat - latOffset),
        ];
        // rectangularBox 全局变量，我们取消按钮的移出则是传入这个数据
        rectangularBox.value = new BMap.Polygon(pointArr);
        map.addOverlay(rectangularBox.value);
        // 根据绘制的图形适当修改地图的可视区域
        map.setViewport(pointArr);
    };

    // 自定义确定按钮的点击事件
    function onSub() {
        map.removeEventListener('click', mapClick);
        formInline.value = {
            wide: 1,
            long: 1
        };
        // 溢出监听、重置数据
        map.enableDragging(); // 启用拖动地图
        map.enablePinchToZoom(); // 启用双指操作缩放
        // 可以根据自己需求添加更多的功能
    };

    // 自定义取消按钮的点击事件
    function onCancel() {
        map.removeEventListener('click', mapClick);
        formInline.value = {
            wide: 1,
            long: 1
        };
        map.removeOverlay(rectangularBox.value);
        rectangularBox.value = undefined;
        map.centerAndZoom(new BMap.Point(103.388611, 35.563611), 5); //初始显示中国。
    };

四、删除电子围栏

删除的话就展示两句代码了，很好理解

    const pointArr = [
        new BMap.Point(centerLng + lngOffset, centerLat + latOffset),
        new BMap.Point(centerLng - lngOffset, centerLat + latOffset),
        new BMap.Point(centerLng - lngOffset, centerLat - latOffset),
        new BMap.Point(centerLng + lngOffset, centerLat - latOffset),
    ];
    // new BMap.Polygon的参数则必须是通过new BMap.Point创建的点数组
    rectangularBox.value = new BMap.Polygon(pointArr);
    // removeOverlay的参数必须是通过new BMap.Polygon创建的对象
    map.removeOverlay(rectangularBox.value);

五、检测点坐标是否在电子围栏内

这里使用的是咱们引用的 GeoUtils

    // point 是一个通过new BMap.Point(x, y)创建的点对象
    // pointList 是一个通过new BMap.Polygon(pointList)创建的多边形对象，和删除所需要的数据同理
    // 返回的数据未布尔值， true 表示在多边形内 false 表示在多边形外
    let flag = BMapLib.GeoUtils.isPointInPolygon(point, pointList);

那么以上便是本次的分享了，如果有什么问题或建议，欢迎评论交流