前端工作中用到的openlayers相关的公共方法

复制代码
/**
* 获取地图上的图层对象
* @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
复制代码

 

posted @   cuteyuchen  阅读(274)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?
· 使用C#创建一个MCP客户端
点击右上角即可分享
微信分享提示