import ol from "ol";
class drawFence {
    constructor(props) {
        //这里初始化class的时候需要传map对象进来
        this.map = props;
        this.source;
        this.fenceLayer;
        this.draw;
        //样式
        this.fenceStyle = new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(255, 255, 255, 0.2)'
            }),
            stroke: new ol.style.Stroke({
                color: '#ffcc33',
                width: 2
            }),
            image: new ol.style.Circle({
                radius: 7,
                fill: new ol.style.Fill({
                    color: '#ffcc33'
                })
            })
        })
        this.init()
    }
    init() {
        //临时图层的数据源
        this.source = new ol.source.Vector();
        //新建临时图层，并设置临时图层渲染各种要素的样式
        this.fenceLayer = new ol.layer.Vector({
            source: this.source,
            style: this.fenceStyle
        });
        this.map.addLayer(this.fenceLayer)
    }
    drawingEnd(evt) {
        let geo = evt.feature.getGeometry()
        let type = geo.getType(); //获取类型
        console.log(geo)
        //根据不同的类型执行不同的操作
        const handle = {
            'Circle': () => {
                //获取中心点和半径
                let center = geo.getCenter()
                let radius = geo.getRadius()
                console.log(center, radius)
            },
            'Polygon': () => {
                //获取坐标点
                let points = geo.getCoordinates()
                console.log(points)
            },
            'LineString': () => {
                let points = geo.getCoordinates()
                console.log(points)
            }
        }
        if (handle[type]) handle[type]()
        this.closeDraw()
    }
    closeDraw() {
        this.map.removeInteraction(this.draw);
    }
    //画图
    drawingFence(type) {
        this.draw = new ol.interaction.Draw({
            source: this.source, //设置要素源，绘制结束后将绘制的要素添加到临时图层
            type: type, //绘制的类型
        });
        this.map.addInteraction(this.draw);
        const that = this;
        //绘图结束事件回调
        this.draw.on('drawend', function (evt) {
            that.drawingEnd(evt)
        });
    }
}

export default drawFence;