Cricle.js

/*

 * @Author: 叶思铧(292184)

 * @Date: 2022-08-23 16:32:32

 * @Descripttion:周边搜索圆

 * @LastEditors: czklove

 * @LastEditTime: 2022-11-09 10:27:35

 */

import ChangePoint from './ChangePoint.js'

let ol = window.ol

class Circle {

    constructor(map) {

        this.map = map

        this.layerObj = {}

        //旧代码，历史原因这里先写死

        let mapObj = {

            mapGlobalData: {

                projection: window.proj,

                mapType: window.mapType,

            },

        }

        this.changePoint = new ChangePoint(mapObj)

    }

    //创建图层

    createLayer(layerName) {

        if (this.layerObj[layerName]) {

            return this.layerObj[layerName]

        }

        let map = this.map

        let source = new ol.source.Vector({

            wrapX: false,

        })

        this.layerObj[layerName] = new ol.layer.Vector({

            source: source,

            name: layerName,

            zIndex: 1,

            style: 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)',

                }),

            }),

        })

        map.addLayer(this.layerObj[layerName])

        return this.layerObj[layerName]

    }

    /**

     * 绘制圆 时间问题这里没写数据检验与默认值设置

     * @param {Number} distance 圆的半径

     * @param {Array} center 圆的中心坐标,wgs84格式

     * @param {Object} options 详细配置参数

     * @param {Boolean} [option.clear = true] 是否清空之前绘制的圆  //旧代码临时改造，个人感觉这里不是最佳的设计

     * @param {String} [option.layerName = true] 是否清空之前绘制的圆  //旧代码临时改造，个人感觉这里不是最佳的设计

     * @param {Array} option.selLayerNames 检索的图层 没效果  留个口子先

     * @param {Boolean} option.isOlSel 是否前端检索 没效果  留个口子先  当前先后端检索

     */

    draw(distance, center, option) {

        //console.log(option, '配置参数对象')

        //let position = this.changePoint.transformation(center)

        let layer = this.createLayer(option.layerName)

        let source = layer.getSource()

        if (option.clear) {

            source.clear()

        }

        // 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,

        // })

        // source.addFeature(circleFeature)

        var options = { units: 'meters' }

        // eslint-disable-next-line no-undef

        var circle = turf.circle(center, distance, options)

        var circleFeature = new ol.format.GeoJSON().readFeature(circle)

        //console.log(circleFeature.getGeometry().getCoordinates())

        // circleFeature.getGeometry().transform('EPSG:4326', window.proj)

        let Coordinates = circleFeature.getGeometry().getCoordinates()

        let style = {

            strokeWidth: 1,

            strokeColor: 'rgba(218,165,32,0.5)',

            fillColor: 'rgba(218,165,32,0.4)',

        }

        if (Coordinates) {

            this.addPolygon(layer, Coordinates, style)

        }

        // circleFeature.getGeometry().transform('EPSG:4326', window.proj)

        // source.addFeature(circleFeature)

    }

    addPolygon(layer, points, style) {

        if (!style) {

            style = {

                strokeWidth: 1,

                strokeColor: '#33d3ff',

                fillColor: 'rgba(51, 211, 255, 0.2)',

            }

        }

        let pointArray = []

        for (let item of points[0]) {

            let arr = this.changePoint.transformation(item)

            pointArray.push(arr)

        }

        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,

                }),

            })

        )

        let pointSource = layer.get('source')

        pointSource.addFeature(pointFeature)

        return pointFeature

    }

    /**

     * 移除图层

     * @param {String} layerName 需移除图层名

     * @returns {boolean}

     */

    clear(layerName) {

        let layer = this.layerObj[layerName]

        if (layer) {

            let bool = this.map.removeLayer(layer)

            this.layerObj[layerName] = false

            return bool

        } else {

            return false

        }

    }

}

export default Circle