PlacePoint.js

/*
 * @Author: 叶思铧(292184)
 * @Date: 2022-08-24 11:14:45
 * @Descripttion:地名搜索专用功能  临时的类，待定
 * @LastEditors: czklove
 * @LastEditTime: 2022-11-21 15:17:24
 */
import { xMapUtil } from '@/components/map/mapUtil'
import ChangePoint from './ChangePoint.js'
let ol = window.ol
class PlacePoint {
    constructor(map) {
        this.map = map
        let mapObj = {
            mapGlobalData: {
                projection: window.proj,
                mapType: window.mapType,
            },
        }
        this.changePoint = new ChangePoint(mapObj)
        //图层中心
        this.layerObj = {}
        this.extent = []
        this.selFeature = undefined //被选中的要素
        this.oldImg = undefined //旧图标
    }
    createLayer(name) {
        let map = this.map
        //添加点图层
        let addPointsSource = new ol.source.Vector({
            wrapX: false,
        })
        let addPointsLayer = new ol.layer.Vector({
            source: addPointsSource,
            name: name,
            zIndex: 2,
        })

        map.addLayer(addPointsLayer)
        return addPointsLayer
    }
    //添加点位数据
    //默认清空之前的数据
    adds(layerName, array, level = 16) {
        if (!this.layerObj[layerName]) {
            this.layerObj[layerName] = this.createLayer(layerName)
        }
        let source = this.layerObj[layerName].getSource()
        source.clear()
        this.extent = this._getExtent(array)
        if (this.extent) {
            this.map.getView().fit(this.extent, { duration: 1000 })
        } else {
            if (array.length) {
                this.map.getView().animate({
                    center: this.changePoint.transformation([array[0].gpsX / 1, array[0].gpsY / 1]),
                    zoom: level,
                })
            }
        }
        for (let i = 0; i < array.length; i++) {
            let item = array[i]
            let lng = item.gpsX / 1
            let lat = item.gpsY / 1
            let point = this.changePoint.transformation([lng, lat])
            let pointFeature = new ol.Feature(new ol.geom.Point(point))
            let img = new Image()
            img.src = item.image
            img.onload = () => {
                let image = this._getBase64(img, item.imageText)
                item.image = image
                try {
                    pointFeature.setStyle(
                        new ol.style.Style({
                            image: new ol.style.Icon({
                                anchor: [0.5, 0.85], //有人偷懒，这个0.85是前端人调的,地图开发是不建议的
                                src: image,
                                scale: 1,
                            }),
                        })
                    )
                    pointFeature.set('element', item)
                    source.addFeature(pointFeature)
                } catch (err) {
                    console.log(err)
                    //在此处理错误
                }
            }
        }
    }
    //内部函数获取数据边界信息
    _getExtent(array) {
        if (array.length > 1) {
            let lngArray = []
            let latArray = []
            array.map((item) => {
                lngArray.push(item.gpsX / 1)
                latArray.push(item.gpsY / 1)
            })
            let [minLng, minLat, maxLng, maxLat] = [Math.min(...lngArray), Math.min(...latArray), Math.max(...lngArray), Math.max(...latArray)]
            if (minLng == maxLng || minLat == maxLat) {
                console.error('数据有重复部分，需调整代码，待定')
                return false
            }
            let p1 = this.changePoint.transformation([minLng, minLat])
            let p2 = this.changePoint.transformation([maxLng, maxLat])
            return [p1[0], p1[1], p2[0], p2[1]]
        } else {
            return false
        }
    }
    moveTo(lng, lat, level = 15) {
        this.map.getView().animate({
            center: this.changePoint.transformation([lng / 1, lat / 1]),
            zoom: level,
        })
    }

    // let img = new Image()
    // img.src = item.imageUrl
    // img.onload = () => {
    //     let image = this._getBase64(img, item.size)
    //     try {
    //         billboard.image = image
    //     } catch (err) {
    //         console.log(err)
    //         //在此处理错误
    //     }
    // }

    _getBase64(img, text, color = '#fff') {
        //这里的离屏渲染代码的宽高代码需要重新梳理下
        let body = document.getElementsByTagName('body')[0]
        let canvas = document.createElement('canvas')
        let width = 38
        let imgWidth = 35
        let imgLeft = (width - imgWidth) / 2
        canvas.width = width
        canvas.height = width
        body.appendChild(canvas)
        let cxt = canvas.getContext('2d')
        // 画图
        cxt.drawImage(img, imgLeft, imgLeft, imgWidth, imgWidth)
        // 设置字体大小
        cxt.font = '14px Microsoft YaHei'
        // 设置文本的水平垂直对齐方式
        cxt.textBaseline = 'top'
        cxt.textAlign = 'center'
        // 文字颜色
        cxt.fillStyle = color
        // 填充文字
        cxt.fillText(text, width / 2, (3 * canvas.height) / 16)
        // 转成base64
        let dataUrl = canvas.toDataURL('image/png')
        // 移除canvas节点
        body.removeChild(canvas)
        return dataUrl
    }

    //点击类表使点位变色
    //需存储feature  old的img
    selPoint(layerName, obj) {
        xMapUtil.getLayerByName('testlayer')
        if (this.selFeature) {
            this.selFeature.setStyle(
                new ol.style.Style({
                    image: new ol.style.Icon({
                        anchor: [0.5, 0.85], //有人偷懒，这个0.85是前端人调的,地图开发是不建议的
                        src: this.oldImg,
                        scale: 1,
                    }),
                })
            )
        }
        let source = this.layerObj[layerName].getSource()
        let features = source.getFeatures()
        for (let i = 0; i < features.length; i++) {
            let pointObj = features[i].get('element')
            if (obj == pointObj) {
                let img = new Image()
                img.src = obj.selImage
                img.onload = () => {
                    let image = this._getBase64(img, obj.imageText, '#fff')
                    try {
                        features[i].setStyle(
                            new ol.style.Style({
                                image: new ol.style.Icon({
                                    anchor: [0.5, 0.85], //有人偷懒，这个0.85是前端人调的,地图开发是不建议的
                                    src: image,
                                    scale: 1.3,
                                }),
                                zIndex: 100,
                            })
                        )
                        this.selFeature = features[i]
                        this.oldImg = obj.image
                    } catch (err) {
                        console.log(err)
                        //在此处理错误
                    }
                }
                break
            }
        }
    }
}
export default PlacePoint