/**
* 获取地图上的图层对象
* @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. LeetCode刷题知识点总结——二叉树

    二叉树 一.二叉树理论基础 1.满二叉树:如果一棵二叉树只有度为0的结点和度为2的结点,并且度为0的结点在同一层上,则这棵二叉树为满二叉树.通俗话理解:从底层开始到顶部的所有节点都全部填满的二叉树.深 ...

  2. VUE3 之 全局 Mixin 与 自定义属性合并策略 - 这个系列的教程通俗易懂,适合新手

    1. 概述 老话说的好:心态决定命运,好心态才能有好的命运. 言归正传,今天我们来聊聊 VUE 中的全局 Mixin 与 自定义属性合并策略. 2. Mixin 的使用 2.1 全局 Mixin 之前 ...

  3. 1.5 万字 + 40 张图解 HTTP 常见面试题

    作者:小林coding 图解计算机基础网站:https://xiaolincoding.com 大家好,我是小林,我最开始写的第一篇图解文章就是这篇: 那时候我也就不到 100 读者,如今这篇阅读都快 ...

  4. Prometheus+Grafana安装搭建

    介绍 Prometheus是由SoundCloud开发的开源监控报警系统和时序列数据库(TSDB).Prometheus使用Go语言开发,是Google BorgMon监控系统的开源版本. 2016年 ...

  5. Elasticsearch上手指南

    目录 ElasticStack及Elasticsearch介绍 Elasticsearch安装 Elasticsearch入门 Elasticsearch配置 Elasticsearch REST A ...

  6. List实现类

     List实现类: ArrayList; 数组结构实现,查询快,增删慢 JDK1.2版本,运行效率快,线程不安全 Vector: 数组结构实现,查询快,增删慢 JDK1.0版本,运行效率慢,线程安全 ...

  7. 分布式任务调度平台XXL-JOB安装及使用

    一.为什么需要任务调度平台 在Java中,传统的定时任务实现方案,比如Timer,Quartz等都或多或少存在一些问题: 不支持集群.不支持统计.没有管理平台.没有失败报警.没有监控等等而且在现在分布 ...

  8. 如何设置notepad++为默认文本编辑器

    第一步:选择.txt文件: 第二步:右键单击选择属性: 第三步:打开方式选择notepad++: 然后以后的文件都是用notepad++编写的了:

  9. Django/SQL server 配置实现(附下载安装)

    连接方案1: conn = pymssql.connect(host='127.0.0.1', port=1433, user='sa', password='password', database= ...

  10. 1.12 Linux已经霸占了服务器领域!

    如今的 IT 服务器领域是 Linux.UNIX.Windows 三分天下,Linux 系统可谓后起之秀,特别是"互联网热"以来,Linux 在服务器端的市场份额不断扩大,每年增长 ...