MyConcern.js

/*
 * @Author: 叶思铧(292184)
 * @Date: 2022-08-26 10:56:02
 * @Descripttion:业务功能,临时代码待商榷,我的关注的框选图层的绘制功能
 * @LastEditors: yesihua
 * @LastEditTime: 2022-08-29 14:48:47
 */
import point from './point.js'
let ol = window.ol
let turf = window.turf
class MyConcern {
    constructor(map, mapObj) {
        this.map = map
        this.mapObj = mapObj
        //this.layer = this._createLayer() //先放着，有的不合理
        this.id = undefined
        this.reDraw = {}
    }
    // projection: window.proj,
    // mapType: window.mapType,
    // this.mapObj.mapGlobalData.mapType == drawObj.createMapType

    // createMapType
    //绘制
    //这里参数的部分处理建议前端完成
    draw(array, popId, layerName = '我的关注', obj) {
        this.reDraw = {
            array: array,
            popId: popId,
            layerName: layerName,
            obj: obj,
        }
        if (!this.layer) {
            this.layer = this._createLayer(layerName) //先放着，有的不合理
        }
        this.id = popId
        if (array.length) {
            for (let item of array) {
                if (item) {
                    let str = item.regionMap
                    let drawObj = JSON.parse(str)
                    // console.log(item.regionName, 'json数据')
                    if (this.mapObj.mapGlobalData.mapType == drawObj.createMapType || this.mapObj.mapGlobalData.projection == drawObj.createProjection) {
                        //'一样的坐标系'
                        //drawType: "Rectangle"
                        let dom = this.addPop(drawObj, popId, item.regionName, item, obj)
                        if (item.closeDom && item.closeDom.style.display == 'inline') {
                            dom.style.display = 'inline'
                        }
                        item.closeDom = dom
                        if (drawObj.drawType == 'Rectangle') {
                            this._polygonAdd(drawObj.createCoordinates, item)
                        } else if (drawObj.drawType == 'Circle') {
                            this._cricleAdd(drawObj.createMapCenter, drawObj.createMapRadius, item)
                        } else if (drawObj.drawType == 'Polygon') {
                            this._polygonAdd(drawObj.createCoordinates, item)
                        } else if (drawObj.drawType == 'Line') {
                            this._lineAdd(drawObj.createCoordinates, drawObj, item)
                        }
                    }
                }
            }
        }
    }
    //创建图层
    _createLayer(name = '我的关注') {
        let map = this.map
        //因为是openlayers 4的框架版本，显示层级控制待封装
        //添加点图层
        let source = new ol.source.Vector({
            wrapX: false,
        })
        let layer = new ol.layer.Vector({
            source: source,
            name: name,
            zIndex: 1,
        })
        map.addLayer(layer)
        return layer
    }
    //添加多边形
    _polygonAdd(points, data) {
        let style = {
            strokeWidth: 1,
            strokeColor: '#33d3ff',
            fillColor: 'rgba(51, 211, 255, 0.2)',
        }
        let pointArray = []
        for (let item of points) {
            //let arr = changePoint(item)
            pointArray.push(item)
        }
        let pointFeature = new ol.Feature(new ol.geom.Polygon([pointArray]))

        pointFeature.setStyle(
            new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: style.strokeColor,
                    width: style.strokeWidth,
                }),
                fill: new ol.style.Fill({
                    color: style.fillColor,
                }),
                // text: new ol.style.Text({
                //     font: '16px Microsoft YaHei',
                //     text: label,
                //     fill: new ol.style.Fill({
                //         color: '#FFFFFF',
                //     }),
                // }),
            })
        )
        pointFeature.set('element', data)
        let source = this.layer.get('source')
        source.addFeature(pointFeature)
        return pointFeature
    }
    //添加圆
    _cricleAdd(position, distance, data) {
        let style = {
            strokeWidth: 1,
            strokeColor: '#33d3ff',
            fillColor: 'rgba(51, 211, 255, 0.2)',
        }
        //console.log('测试')
        let metersPerUnit = this.map.getView().getProjection().getMetersPerUnit()
        let circleRadius = distance / metersPerUnit
        let circle = new ol.geom.Circle(position, circleRadius)
        let polygon = new ol.geom.Polygon.fromCircle(circle) //转换为polygon，用于空间查询
        let circleFeature = new ol.Feature({
            geometry: polygon,
        })
        circleFeature.setStyle(
            new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: style.strokeColor,
                    width: style.strokeWidth,
                }),
                fill: new ol.style.Fill({
                    color: style.fillColor,
                }),
                // text: new ol.style.Text({
                //     font: '16px Microsoft YaHei',
                //     text: label,
                //     fill: new ol.style.Fill({
                //         color: '#FFFFFF',
                //     }),
                // }),
            })
        )
        circleFeature.set('element', data)
        let source = this.layer.get('source')
        source.addFeature(circleFeature)
    }
    //绘制线缓存区
    _lineAdd(points, obj, data) {
        this._polygonAdd(points, data)
        if (obj.createLineCoordinates) {
            //console.log(obj.createLineCoordinates, '绘制线')
            let bufferCoordinates = []
            let pointTransform = []
            if (this.mapObj.mapGlobalData.projection == 'EPSG:3857') {
                for (let i = 0; i < obj.createLineCoordinates.length; i++) {
                    pointTransform = ol.proj.transform(obj.createLineCoordinates[i], 'EPSG:3857', 'EPSG:4326')
                    bufferCoordinates.push(pointTransform)
                }
            } else {
                bufferCoordinates = obj.createLineCoordinates
            }

            let line = turf.lineString(bufferCoordinates)
            // var buffered = turf.buffer(line, option.boundary / 1000, {
            //     units: 'kilometers',
            // })
            let format = new ol.format.GeoJSON()
            // var source = new ol.source.Vector()
            let lineFeature = format.readFeature(line)

            if (this.mapObj.mapGlobalData.projection == 'EPSG:3857') {
                lineFeature.getGeometry().transform('EPSG:4326', 'EPSG:3857')
            }
            lineFeature.set('element', data)
            lineFeature.setStyle(
                new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: 'rgba(218,165,32,0.5)',
                        lineCap: 'round', //butt, round, or square. Default is round
                        lineJoin: 'round', //bevel, round, or miter. Default is round
                        miterLimit: 10,
                        width: 1,
                    }),
                    fill: new ol.style.Fill({
                        color: 'rgba(218,165,32,0.4)',
                    }),
                })
            )

            let source = this.layer.get('source')
            source.addFeature(lineFeature)
        }
    }
    //移除图层数据
    remove() {
        if (!this.layer) {
            return
        }
        if (this.id) {
            document.getElementsByClassName(this.id)
            let eleArray = document.getElementsByClassName(this.id)
            for (let i = 0; i < eleArray.length; i++) {
                if (eleArray[i].id == 'null') {
                    eleArray[i].parentNode.removeChild(eleArray[i])
                    i = i - 1
                }
            }
        }
        this.layer.getSource().clear()
    }
    //添加气泡窗
    addPop(obj, id, label, data, options) {
        let center
        if (obj.wgs84Center) {
            center = obj.wgs84Center
        } else if (obj.wgs84Coordinates) {
            let extent = this.calculateExtent(obj.wgs84Coordinates)
            center = [(extent[0] + extent[2]) / 2, (extent[1] + extent[3]) / 2]
        }
        return point.addPop(center, id, label, data, options)
    }
    //计算中心点
    calculateExtent(points) {
        let lngArray = []
        let latArray = []
        for (let point of points) {
            lngArray.push(point[0])
            latArray.push(point[1])
        }
        let minLng = Math.min(...lngArray)
        let maxLng = Math.max(...lngArray)
        let minLat = Math.min(...latArray)
        let maxLat = Math.max(...latArray)
        return [minLng, minLat, maxLng, maxLat]
    }
    delectById(id) {
        for (let i in this.reDraw.array) {
            if (this.reDraw.array[i].id === id) {
                this.reDraw.array[i] = false
            }
        }
        this.remove()
        this.draw(this.reDraw.array, this.reDraw.popId, this.reDraw.layerName, this.reDraw.obj)
        //this.reDraw
    }
}

export default MyConcern