openlayers3（五）根据坐标点画圆、线、多边形

这个是上一篇博客中的电子围栏中的一部分功能，但是因为有点小坑啥的我自己就单独拎出来写了。所以我写的也算是基于上一篇：openLayers3（四）电子围栏—使用画图工具绘图

话不多说，代码附上

代码

class drawFence{
    
    //转换坐标点（多）
    transPoints(points) {
        let arr = points.split(';');
        let point = [];
        arr.forEach(item = > {
            let newPoint = item.split(',');
            point.push(newPoint)
        })
        let _points = point.map(item = > {
            item = [parseFloat(item[0]), parseFloat(item[1])]
            item = ol.proj.transform(item, 'EPSG:4326', 'EPSG:3857');
            return item;
        })
        return _points;
    }
    //转换圆的
    transPoint(point) {
        let item = point.split(',')
        item = [parseFloat(item[0]), parseFloat(item[1])]
        let _point = ol.proj.transform(item, 'EPSG:4326', 'EPSG:3857');
        return _point;
    }
    /**
     * 
     * @param {*} fenceId 围栏id
     * @param {*} center 中心坐标
     * @param {*} radius 半径
     * @param {*} name 围栏名
     */
    showCircle(fenceId, center, radius, name) {

        let centerPoint = this.transPoint(center)
        radius = parseFloat(radius)
        var circleFeature = new ol.Feature({ //路线
            geometry: new ol.geom.Circle(centerPoint, radius),
        });
        circleFeature.setId(fenceId)
        //将所有矢量图层添加进去
        this.source.addFeature(circleFeature);
    }
    /**
     *
     * @param {*} fenceId 围栏id
     * @param {*} points 多边形坐标点
     * @param {*} name 围栏名
     */
    showPolygon(fenceId, points, name) {
        let _points = this.transPoints(points)
        _points = [_points]
        //多边形的数据格式是[[[lng,lat],[lng,lat]……]]外围两个中括号
        var polygonFeature = new ol.Feature({ //路线
            geometry: new ol.geom.Polygon(_points)

        });
        polygonFeature.setId(fenceId)
        this.source.addFeature(polygonFeature);
        console.log(this.source.getFeatures())
    }
    /**
     * 
     * @param {*} fenceId 围栏id
     * @param {*} points 线型的点坐标
     * @param {*} name 围栏名字
     */
    showPolyline(fenceId, points, name) {

        let _points = this.transPoints(points)
        var lineFeature = new ol.Feature({ //路线
            geometry: new ol.geom.LineString(_points, 'XY'),
        });
        lineFeature.setId(fenceId)

        //将所有矢量图层添加进去
        this.source.addFeature(lineFeature);
    }
    //回显围栏
    showFence(obj) {
        let {
            fenceId,
            name,
            type,
            center,
            radius,
            points
        } = obj;
        if (type == 'polygon') {
            this.showPolygon(fenceId, points, name)
        }
        if (type == 'circle') {
            this.showCircle(fenceId, center, radius, name)
        }
        if (type == 'polyline') this.showPolyline(fenceId, points, name)
    }

}

这里不得不多说一句，这个多边形外边包着两个中括号，我一开始直接用的线性坐标点格式，死活都出不来，还是在上一篇画图那里画多边形成功后的回调中获取坐标点才发现他外边有两层。

使用

$('#showPolygonFence').on('click', function () {
    var obj = {
        fenceId: '12',
        name: '围栏1',
        center: '',
        radius: '',
        type: 'polygon',
        points: '113.963223,22.549299;113.969655,22.553504;113.972242,22.547797;113.967176,22.544425;113.95945,22.544959;113.95981,22.551235;113.95981,22.551235'
    }
    fence.showFence(obj)
})
$('#showCircleFence').on('click', function () {
    var obj = {
        fenceId: '121',
        name: '围栏2',
        center: '113.959127,22.552036',
        radius: '152.96',
        type: 'circle',
        points: ''
    }
    fence.showFence(obj)
})
$('#showPolygonFence').on('click', function () {
    var obj = {
        fenceId: '12',
        name: '围栏3',
        center: '',
        radius: '',
        type: 'polyline',
        points: '113.960623,22.546082;113.958197,22.544029;113.956526,22.543245;113.953562,22.544563'
    }
    fence.showFence(obj)
})

效果