百度地图API（四）电子围栏—DrawingManager

本来这个需求就是一开始没明确，不过今天早上被叫去讨论这个功能的具体需求了，所以从新改造了昨天的画图，这是昨天的

百度地图API（三）电子围栏—地图点击事件创建多边形

话不多说，开始今天的画图吧

引入工具类（DrawingManager）

<link rel="stylesheet" href=".asset/bMap/sdk/tools/DrawingManager_min.css">
<script type="text/javascript" src=".asset/bMap/sdk/tools/DrawingManager_min.js"></script>
           

业务代码

class drawFence {
    constructor(props) {
        this.map = props;
        //绘图工具
        this.drawingManager

        this.styleOptions = {
            strokeColor: "red", //边线颜色。
            fillColor: "red", //填充颜色。当参数为空时，圆形将没有填充效果。
            strokeWeight: 1, //边线的宽度，以像素为单位。
            strokeOpacity: 0.3, //边线透明度，取值范围0 - 1。
            fillOpacity: 0.3, //填充的透明度，取值范围0 - 1。
            strokeStyle: 'solid' //边线的样式，solid或dashed。
        };
        this.init()
    }
    init() {
        // 实例化鼠标绘制工具
        var drawingManager = new BMapLib.DrawingManager(map, {
            isOpen: false, //是否开启绘制模式
            enableDrawingTool: true, //是否显示工具栏
            drawingToolOptions: {
                anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
                offset: new BMap.Size(5, 5), //偏离值
            },
            circleOptions: this.styleOptions //圆的样式
            polylineOptions: this.styleOptions, //线的样式
            polygonOptions: this.styleOptions, //多边形的样式
            rectangleOptions: this.styleOptions //矩形的样式

        });
        //添加鼠标绘制工具监听事件，用于获取绘制结果
        this.drawingManager.addEventListener('overlaycomplete', this.overlaycomplete.bind(this));
    }
    //获取绘制结果
    overlaycomplete(e) {
        console.log(this.drawingManager)
        //获取绘制类型
        let drawingMode = e.drawingMode;
        //边界点
        let path = e.overlay.getPath();
        //根据不同的绘制类型进行不同的操作
        const drawingModeOperate = {
            'circle': (e) = > { //绘制类型为圆
                //获取中心点
                let centerPoint = e.overlay.getCenter();
                //获取边界随便一个点和中心点距离就是半径
                let radius = this.drawingManager._map.getDistance(centerPoint, path[0]).toFixed(2);
                // console.log(centerPoint,radius);
            },
            'polygon': (e) = > { //绘制类型为多边形
                let points = path;
                // console.log(points)
            },
            'polyline': (e) = > {
                let points = path;
            }
            if (drawingModeOperate[drawingMode]) drawingModeOperate[drawingMode](e)
            this.close(); //关闭绘图
        }
    }
    //开启绘图
    open() {
        this.drawingManager.open()
    }
    //关闭绘图
    close() {
        this.drawingManager.close()
    }
    //画图（多种格式）
    draw(type) {
        this.drawingManager._setDrawingMode(type)
    }
    //画多边形
    drawPolygon() {
        this.open()
        this.draw('polygon')
    }
    //画圆
    drawCircle() {
        this.open()
        this.draw('circle')
    }
    //画线
    drawLine() {
        this.open()
        this.draw('polyline')
    }
}

           

使用

main.js

// 注册电子围栏画图
 _fence = new fence(map)
 
 function addCirCleFence() { //画圆
    _fence.drawCircle()
}
function addPolygonFence() { //画多边形
    _fence.drawPolygon()
}
function addLineFence() { //画线
    _fence.drawLine()
}
           

因为判定是否在范围内改为后台判定，我这边就不写了，上一个博客也有。后续还有比较复杂的业务需求，这只是简单的把图画出来啦