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

前端工作中用到的openlayers相关的公共方法的更多相关文章

  1. 前端工作面试HTML相关问题

    前端工作面试HTML相关问题 Q: doctype(文档类型)的作用是什么? A: 在HTML中 doctype 有两个主要目的. 对文档进行有效性验证: 它告诉用户代理和校验器这个文档是按照什么DT ...

  2. 打造高效前端工作环境 - tmux

    打造高效前端工作环境 - tmux 前言  现在前端开发可不容易啊,先打开个VIM,然后再打开个lite-server,一不小心写个ES2015还要打开个gulp来做预编译,如果能把这么多个窗口放在一 ...

  3. 前端工作面试问题--摘取自github

    前端工作面试问题 本文包含了一些用于考查候选者的前端面试问题.不建议对单个候选者问及每个问题 (那需要好几个小时).只要从列表里挑选一些,就能帮助你考查候选者是否具备所需要的技能. 备注: 这些问题中 ...

  4. web前端—工作周报

    2016.07.25-2016.07.29周报: 1.本周工作主要内容: A:完成了宏视云h5播放器升级及大数据上报: B:修复xk-h5播放器bug:在三星手机自带浏览器无法进行滑动seek;  C ...

  5. 前端发展态势 && 前端工作流程个人浅析

    于在未开启cleartype的情况下,一些中文字体在非偶数字号下的显示效果欠佳,所以一般建议使用12.14.16.18.22px等偶数字号.也就 是对某个分辨率选择离它最近的偶数字号.例如:屏幕横向分 ...

  6. 前端工作流程自动化——Grunt/Gulp 自动化

    什么是自动化 先来说说为什么要自动化.凡是要考虑到自动化时,你所做的工作必然是存在很多重复乏味的劳作,很有必要通过程序来完成这些任务.这样一来就可以解放生产力,将更多的精力和时间投入到更多有意义的事情 ...

  7. 工作中用到的linux命令

    都是工作中用到的,解决问题至上,不求甚解,怕再忘了,所以记录一下,勿喷. .log |,,,,|,| 先说一下这条命令: cat:打印文件内容 grep:查找,用到的有\s匹配空白字符 sed:刚用到 ...

  8. 我在一个前端项目中用js整理的一些通用方法,其中使用到的思想,主要就是约定了。

    把名称和后台来的json数据约定起来,可以达到的效果就是可以将东西统一化,减少差异,提升模块等的通用性,此后就可以实现具体不同模块内容可以自动或拷贝赋值的方式 2016.7.18 refactor s ...

  9. Liu Junqiao:工作中用到的命令以及问题汇总

    工作中用到的命令以及问题汇总 2019-11-29 查看系统运行时间,这个问题是因为我们在阿里云上有个机器,在某一天发现这台机器上有的服务莫名奇妙的停了,然后排查时怀疑机器被重启过用如下如下命令查看了 ...

随机推荐

  1. [ SOS ] 版本控制工具 笔记

    https://www.cnblogs.com/yeungchie/ soscmd 创建工作区 soscmd newworkarea $serverName $projectName [$path] ...

  2. 美团动态线程池实践思路开源项目(DynamicTp),线程池源码解析及通知告警篇

    大家好,这篇文章我们来聊下动态线程池开源项目(DynamicTp)的通知告警模块.目前项目提供以下通知告警功能,每一个通知项都可以独立配置是否开启.告警阈值.告警间隔时间.平台等,具体代码请看core ...

  3. 基于LAMP离线部署zabbix3.2.11

    zabbix是个什么东西这里不再赘述,先安装lamp再安装zabbix. 1.   安装依赖插件(把下面PHP那些依赖库全部都装了) #yum install -y gcc gcc-c++ opens ...

  4. ThingsBoard安装编译搭建环境踩坑记录

    1.首先从github拉下来项目,我们采用源码编译的方式部署 git clone https://github.com/thingsboard/thingsboard.git 2.切换分支 git c ...

  5. 搜索与图论①-深度优先搜索(DFS)

    深度优先搜索(DFS) 例题一(指数型枚举) 把 1∼n 这 n 个整数排成一行后随机打乱顺序,输出所有可能的次序. 输入格式 一个整数 n. 输出格式 按照从小到大的顺序输出所有方案,每行 1 个. ...

  6. 【面试普通人VS高手系列】Dubbo的服务请求失败怎么处理?

    今天分享的面试题,几乎是90%以上的互联网公司都会问到的问题. "Dubbo的服务请求失败怎么处理"? 对于这个问题,我们来看一下普通人和高手的回答. 普通人: 嗯- 我记得, D ...

  7. netty系列之:netty中的frame解码器

    目录 简介 LineBasedFrameDecoder DelimiterBasedFrameDecoder FixedLengthFrameDecoder LengthFieldBasedFrame ...

  8. 面试必问的8个CSS响应式单位,你知道几个?

    大家好,我是半夏,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注 点赞 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师-关注公众号:搞前端的半夏,了解更多前端知 ...

  9. Blazor和Vue对比学习(基础1.4):事件和子传父

    Blazor和Vue的组件事件,都使用事件订阅者模式.相对于上一章的组件属性,需要多绕一个弯,无论Blazor还是Vue,都是入门的第一个难点.要突破这个难点,一是要熟悉事件订阅模式<其实不难& ...

  10. uniapp复制到剪贴板

    uni.setClipboardData() ; 例: 给元素添加点击事件 <view @click="doCopy()">复制</view> 复制方法 d ...