/**
* 获取地图上的图层对象
* @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. spring源码编译完整步骤拿来即用!

    1.版本选择 1)源码版本:spring5.3.x 2)gradle版本:根据spring源码的工程路径:gradle/wrapper/gradle-wrapper.properties文件查看gra ...

  2. caioj 1000: [视频]整数运算[水题]

    题目大意:输入两个整数a和b,输出他们的和. 题解:水题不用题解,简单看一下就知道了-- 代码: #include <cstdio> int a, b; int main() { whil ...

  3. python中其他数据类型内置方法

    补充字符串数据类型内置方法 1.移除字符串首尾的指定字符可以选择方向1: s1 = '$$$jason$$$' print(s1.strip('$')) # jason print(s1.lstrip ...

  4. Java语言学习day31--8月06日

    今日内容介绍1.正则表达式的定义及使用2.Date类的用法3.Calendar类的用法 ###01正则表达式的概念和作用 * A: 正则表达式的概念和作用 * a: 正则表达式的概述 * 正则表达式也 ...

  5. vite初使用随记

    vite的安装 按照官网文档来看,并不难. 先检查自己电脑node的版本与npm的版本/yarn的版本 可以直接用yarn安装,yarn create vite 这是最原始的安装,即类似于安装vue- ...

  6. Redis6通信协议升级至RESP3,一口气看完13种新数据类型

    原创:微信公众号 码农参上,欢迎分享,转载请保留出处. 在前面的文章 Redis:我是如何与客户端进行通信的 中,我们介绍过RESP V2版本协议的规范,RESP的全程是Redis Serializa ...

  7. 集合篇-ConcurrentHashMap

    点赞再看,养成习惯,微信搜索「小大白日志」关注这个搬砖人. 文章不定期同步公众号,还有各种一线大厂面试原题.我的学习系列笔记. jdk1.7和jdk1.8中ConcurrentHashMap的区别? ...

  8. Bugku练习题---Web---计算器

    Bugku练习题---Web---计算器 flag:flag{8b4b2f83db2992d17d770be1db965147} 解题步骤: 1.观察题目,打开场景 2.场景打开后发现是一个验证码界面 ...

  9. 增删改查- 万能map- 模糊查询

    1.编写接口 2.编写对应的mapper种的sql语句 3.测试 接口 public interface UserDao { List<User> getUserList(); //根据I ...

  10. 在windows上安装elasticsearch7.6

    在windows上安装elasticsearch7.6 安装Java1.8 下载Java1.8 提取码:yi0c 链接:https://pan.baidu.com/s/1mNd2Yg-k6ob91bO ...