openlayer绘制矢量图形并显示名称

项目中经常需要通过后端给出的polygon字符串在地图上进行绘制，记录下处理数据，绘制图形的过程

初始化地图

/**
 * 初始化地图
 */
initMap() {
    let mapWord = new TileLayer({
        title: '文字标注',
        visible: true,
        source: new XYZ({
            url: '申请的url'
        })
    })
    let tianDiMap = new TileLayer({
        title: '天地图-默认',
        visible: true,
        source: new XYZ({
            url: '申请的url'
        })
    })

    let projection = new Projection({
        code: 'EPSG:3857', // 坐标系
        units: 'm', // 单位
        axisOrientation: 'enu',
        global: false // 这个投影是否适用于整个地球。
    })
    this.map = new Map({
        target: 'districtMap',
        layers: [tianDiMap, mapWord],
        view: new View({
            projection: projection,
            center: fromLonLat([116.407, 39.904]), //北京
            zoom: 8.5,
            minZoom: 3,
            maxZoom: 17,
            zoomFactor: 2,
        })
    })

    //斑块图层
    let featureStyle = function (feature) {
        return new Style({
            fill: new Fill({
                color: 'rgba(255, 255, 255, 0.8)',
            }),
            stroke: new Stroke({
                color: '#5AB5CD',
                width: 3
            }),
            text: new Text({
                text: feature.get('name'),
                font: '14px sans-serif',
                fill: new Fill({
                    color: '#000'
                }),
                overflow: true
            })
        })
    }
    this.editSource = new VectorSource()
    let editLayer = new VectorLayer({
        name: '编辑图层',
        source: this.editSource,
        style: featureStyle,
        zIndex: 100
    })
    this.map.addLayer(editLayer)
}

addFeatures函数中的patchList数组格式如下图所示

处理后端返回的字符转，转化为数组

/**
 * 添加要素
 * @param patchList 后端返回的图形字符串列表
 */
addFeatures(patchList) {
    this.editSource.clear();
    let patches = [];
    for (let i = 0; i < patchList.length; i++) {
        let patch = patchList[i]
        let polygonType = patch.polygon.slice(0, 7);
        if (polygonType === 'POLYGON') {
            //patch.polygon：POLYGON ((x y,x y,x y),(x1 y1,x1 y1,x1 y1))
            let str = patch.polygon.slice(10, (patch.polygon.length - 2))
            let partStrArr = str.split('),(')
            patch.polygon = []
            for (let k = 0; k < partStrArr.length; k++) {
                patch.polygon.push(this.polygonStrToArr(partStrArr[k]));
            }
            patches.push(patch)
        } else { //'MULTIPOLYGON'
            //patch.polygon：MULTIPOLYGON (((x y,x y),(x1 y1,x1 y1)),((x y,x y),(x1 y1,x1 y1)))
            let multiStr = patch.polygon.slice(16, (patch.polygon.length - 3))
            let patchStrsArr = multiStr.split(')),((')
            patch.polygon = []
            for (let j = 0; j < patchStrsArr.length; j++) {
                let partStr1Arr = patchStrsArr[j].split('),(')
                for (let m = 0; m < partStr1Arr.length; m++) {
                    patch.polygon.push(this.polygonStrToArr(partStr1Arr[m]));
                }
            }
            patches.push(patch)
        }
    }
    this.drawFeatures(patches);
}

/**
 * 后端返回的多边形字符串转数组
 * @param str  "X Y,X Y,X Y"
 * @return  [[x,y],[x,y],[x,y]]
 */
polygonStrToArr(str) {
    let corArr = str.split(',');//['X Y','X Y','X Y']
    let polygonArr = [];
    for (let i = 0; i < corArr.length; i++) {
        let arr = corArr[i].split(' ')
        let arr1 = [parseFloat(arr[0]), parseFloat(arr[1])]
        polygonArr.push(arr1);
    }
    return polygonArr
},

绘制图形

/**
 * 绘制单个要素
 * @param obj 绘制对象
 */
drawFeatures(list) {
	 let features = []
	 for (let i = 0; i < list.length; i++) {
	     let obj = list[i]
	     //显示图形
	     let geo = new Polygon(obj.polygon)
	     let feature = new Feature(geo)
	     feature.setId(obj.patchId)
	     features.push(feature)
	 }
	 this.editSource.addFeatures(features);
	 this.fixedPosition();
}

绘制完成后定位到绘制图形的地方

/**
 * 定位
 */
fixedPosition(){
    let features = this.editSource.getFeatures()
    if (features.length < 1) {
        return;
    }
    let extent = this.editSource.getExtent();
    this.map.getView().fit(extent, this.map.getSize());
}