vue-cdutDigitalMap/static/js/drawFeature.js

// import  ol from "ol";
import ol from '../js/ol'


class createDrawFeature {
    constructor(options, map) {
        this.type = options.type || "LineString" // 类型有"Point","Polygon"
        this.name = options.name || undefined
        this.pointRadius = options.pointRadius || 6
        this.pointColor = options.pointColor || 'red'
        this.lineWidth = options.lineWidth || 6
        this.lineColor = options.lineColor || 'pink'
        this.polWidth = options.polWidth || 6
        this.polStrColor = options.polStrColor || 'yellow'
        this.polColor = options.polColor || '#490b0b'
        this.isHand = options.isHand || false //是否手绘
        this.isMeasure = options.isMeasure || false // 默认不开启
        this.alpha = options.alpha || 0.5

        this.map = map
        this.style = null
        this.source = new ol.source.Vector({wrapX: false,zIndex:999});
        this.data = []
        this.labelArr = [] // 存放label
        this.draw = null
        this.length = 0
        this.event = undefined
        this.vectorLayer = new ol.layer.Vector({
            source: this.source,
            zIndex:999

        });
        this.map.addLayer(this.vectorLayer)
    }

    // 开启画图功能
    addInteraction() {

        this.draw = new ol.interaction.Draw({
            source: this.source,
            type: this.type,
            style: this.setShapeStyle(this.type),
            stopClick: !this.isMeasure,
            freehand: this.isHand
        });
        let that = this;

        this.draw.on('drawend', function (evt) {
            that.positions = []
            const geom = evt.feature.getGeometry();
            evt.feature.setStyle(that.setShapeStyle(that.type))
            geom.setProperties({type: that.type, name: that.name})
            let points = geom.getCoordinates();
                that.data.push({
                    name: that.name,
                    coordinates: points,
                    type: geom.getType(),
                    style: that.style[that.type],
                })

                that.draw.finishDrawing()
        }, this);
        this.map.addInteraction(this.draw);

    }

    setShapeStyle(type) {
        let rgb = this.convertHexToRGB(this.polColor)
        this.style = {
            'Point': new ol.style.Style({
                image: new ol.style.Circle({
                    radius: this.pointRadius,
                    fill: new ol.style.Fill({color: this.pointColor}),
                }),
            }),
            'LineString': new ol.style.Style({
                stroke: new ol.style.Stroke({
                    width: this.lineWidth,
                    color: this.lineColor,
                }),
            }),
            'Polygon': new ol.style.Style({
                stroke: new ol.style.Stroke({
                    width: this.polWidth,
                    color: this.polStrColor,
                }),
                fill: new ol.style.Fill({color: "rgba("+rgb[0]+","+rgb[1]+","+rgb[2]+","+this.alpha+")"}),
            })
        }
        return this.style[type]
    }

    convertHexToRGB(str){
        str = str[0] === '#' ? str.slice(1) : str
        str = str.length === 3 ? str.repeat(2) : str
        if ((str.length !== 6) || !(/^[0-9a-fA-F]{3,6}$/i.test(str))) return 'Invalid data'
        return [parseInt(str[0] + str[1], 16), parseInt(str[2] + str[3], 16), parseInt(str[4] + str[5], 16)]
    }

    // 关闭画图功能
    closeInteraction() {
        this.map.removeInteraction(this.draw);
        ol.observable.unByKey(this.event)
        this.isHand = false
        this.isMeasure = false
    }

    // 将画图数据返回给用户
    getData() {
        return this.data
    }

    //清空图层
    clearShapes() {
        //this.source.clear()
        this.vectorLayer.getSource().clear();
        // this.source = [];
        // this.source.clear()
        // this.map.removeLayer(this.vectorLayer)
        // 清除存放overlay的数组
        for (let i = 0; i < this.labelArr.length; i++) {
            this.map.removeOverlay(this.labelArr[i])
        }

    }

    deleteLastShapes() {
        let features = this.source.getFeatures()
        if (features.length !== 0) {
            let id = features.length - 1
            this.source.removeFeature(features[id])
        }
    }

}

export {createDrawFeature};