前端工作中用到的openlayers相关的公共方法-CSDN博客

本文链接：https://blog.csdn.net/qq_40994436/article/details/133005110

/**
* 获取地图上的图层对象
* @param map 地图对象
* @param layerName 实例化图层时的name
* @return {null}
*/

getLayerByLayerName: (map, layerName) => {

if (!map) {

throw new Error('未传入地图对象')

}

let targetLayer = null

const layers = map.getLayers().getArray()

Object.keys(layers).forEach(function (key) {

const _layerName = layers[key].values_.layerName

if (_layerName === layerName) {

targetLayer = layers[key]

}

})

return targetLayer

}

import Overlay from 'ol/Overlay'
import $ from 'jquery'

const openLayerAction = {
    /**
     * 添加闪烁数据的方法
     * @param {Array} twinkleList 需要添加css样式的点位数组
     * @param {String} LGTDName 经度在数组中对应的名称
     * @param {String} LTTDName 纬度度在数组中对应的名称
     * @param {String} className 需要添加的css样式名称
     * @param {String} index 数组中唯一索引的键名
     */
    setTwinkleLayer(id, globalMap, twinkleList, className, index = 'id') {
        for (let i = 0; i < twinkleList.length; i++) {
            $('#' + id).after(
                "<div id = '" + id +
                twinkleList[i][index] +
                "' class = '" +
                className +
                "' onclick='console.log(" +
                twinkleList[i][index] +
                ")'>" + '</div>'
            )

            const anchor = new Overlay({
                element: document.getElementById(id + twinkleList[i][index]),
                positioning: 'center-center'
            })
            // 关键的一点，需要设置附加到地图上的位置
            anchor.setPosition([twinkleList[i].lgtd, twinkleList[i].lttd])
            // 然后添加到map上
            globalMap.addOverlay(anchor)
        }
    },

    /**
     * 删除闪烁数据的方法
     * @param {String} className 需要删除的css样式名称
     */
    removeTwinkleLayer(globalMap) {
        globalMap.getOverlays().clear()
    }
}
export default openLayerAction