openlayer getLayerById 根据id获取layer图层

news2025/1/26 19:28:10

背景:

在项目中使用getLayerById获取图层,这个getLayerById()方法不是openlayer官方文档自带的,而是自己封装的一个方法,这个封装的方法的思路是:遍历所有的layer,根据唯一标识【可能是id,也可能是name,这是自定义的】即可获取带相应的图层。

唯一标识是在addlayer加载图层时候,通过layer.set('自定义的唯一标识','...自定义属性值')。在获取图层时,通过layer.get('自定义的唯一标识')即可获取到相应的图层。

官网链接:点击跳转官网

getLayerById()官网不存在此方法!

 例如:

第1步:创建一个layer

const param = 

                {

                        layer: true,

                        id: "TDT_DITU",

                        title: "天地图",

                        visible: false,

                        source: "XYZ",

                        url: "http://t{0-7}.tianditu.gov.cn/DataServer/tianditu?T=vec_w&x={x}&y={y}&l={z}&tk=1575c31672124b57f214b65928540083",

                        zIndex: 7,

                    },

let _layer = new TileLayer({

            title: param.title,

            source: new XYZ({

                url: param.url,

            }),

            visible: param.visible,

        });

        _layer .setZIndex(param.zIndex);

        map.addLayer(_layer );

第2步:设置唯一标识,这里用id

_layer.set('layerId','TDT_DITU')

第3步:根据id获取地图图层

_layer.get('layerId');//备注:看看返回的是不是等于自定义的属性'TDT_DITU',如果是,

第...步:

使用getLayers()方法找到地图上所有图层【getLayers()是openleyer官网的方法】

let allLayers = map.getLayers().array_;//所有图层

大概思路如上:

项目中实际代码:

const layerVisible = user.map.layer.getLayerById('location')
                {
                title: '临时图层',
                type: 'temporary',
                isShow: false,
                layers: [
                    {
                        layer: true,
                        id: 'location',
                        title: '定位图层',
                        visible: true,
                        source: 'Vector',
                        zIndex: 10,
                        isDeclutter: true
                    },

 getLayerById()封装代码:

// 根据id查找图层是否开启
    getLayerById(id) {
        for (let i = 0; i <= this.config.length - 1; i++) {
            const index = this.config[i].layers.findIndex(el => el.children)
            if (index !== -1) {
                const layer_item = 
                    this.config[i].layers[index].children.find(el => el.id === id)
                if (layer_item) {
                    return layer_item.visible
                }
            } else {
                const item = this.config[i].layers.find(el => el.id === id)
                if (item) {
                    return item.visible
                }
            }
        }
    }

其它:

 getFeatureById()官网存在此方法!

官网链接:点击跳转

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2283587.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

设计模式-建造者模式、原型模式

目录 建造者模式 定义 类图 优缺点 角色 建造者模式和工厂模式比较 使用案例 原型模式 定义 类图 优缺点 应用场景 应用类型 浅克隆 深克隆 建造者模式 定义 将一个复杂的对象的构造与它的表示分离&#xff0c;使同样的构建过程可以创建不同的表示&#xff0c;…

PTMD2.0-疾病相关的翻译后修饰数据库

翻译后修饰&#xff08;PTMs&#xff0c;post-translational modifications&#xff09;通过调节蛋白质功能参与了几乎所有的生物学过程&#xff0c;而 PTMs 的异常状态常常与人类疾病相关。在此&#xff0c;PTMD 2.0展示与疾病相关的 PTMs 综合数据库&#xff0c;其中包含 93 …

【Git版本控制器--3】Git的远程操作

目录 理解分布式版本控制系统 创建远程仓库 仓库被创建后的配置信息 克隆远程仓库 https克隆仓库 ssh克隆仓库 向远程仓库推送 拉取远程仓库 忽略特殊文件 为什么要忽略特殊文件&#xff1f; 如何配置忽略特殊文件&#xff1f; 配置命令别名 标签管理 理…

批量创建ES索引

7.x from elasticsearch import Elasticsearch# 配置 Elasticsearch 连接 # 替换为你的 Elasticsearch 地址、端口、用户名和密码 es Elasticsearch([http://10.10.x.x:43885],basic_auth(admin, XN272G9THEAPYD5N5QORX3PB1TSQELLB) )# # 测试连接 # try: # # 尝试获取集…

MySQL中的读锁与写锁:概念与作用深度剖析

MySQL中的读锁与写锁&#xff1a;概念与作用深度剖析 在MySQL数据库的并发控制机制中&#xff0c;读锁和写锁起着至关重要的作用。它们是确保数据在多用户环境下能够正确、安全地被访问和修改的关键工具。 一、读锁&#xff08;共享锁&#xff09;概念 读锁&#xff0c;也称为…

专利申请的价值

独占市场 一种产品只要授权专利权&#xff0c;等于在市场上拥有独占权。 政策奖励 各地方政府均出台响应文件&#xff0c; 对专利申请者进行奖励或者补助。 申报项目 申报高新技术企业、创新基金等 各类计划、项目的必要前提条件 专利申请 技术保护 防止新的技术与产品被他人 抄…

使用 OpenCV 和 Python 轻松实现人脸检测

目录 一、准备工作 二、加载人脸检测模型 三、读取图像并进行人脸检测 四、处理视频中的人脸检测 五、优化人脸检测效果 六、总结 在人工智能和计算机视觉领域,人脸检测是一项非常基础且重要的技术。通过人脸检测,我们可以在图像或视频中识别并定位人脸,进而进行后续的…

自然语言处理——从原理、经典模型到应用

1. 概述 自然语言处理&#xff08;Natural Language Processing&#xff0c;NLP&#xff09;是一门借助计算机技术研究人类语言的科学&#xff0c;是人工智能领域的一个分支&#xff0c;旨在让计算机理解、生成和处理人类语言。其核心任务是将非结构化的自然语言转换为机器可以…

2025年新开局!谁在引领汽车AI风潮?

汽车AI革命已来。 在2025年伊始开幕的CES展上&#xff0c;AI汽车、AI座舱无疑成为了今年汽车行业的最大热点。其中不少车企在2025年CES上展示了其新一代AI座舱&#xff0c;为下一代智能汽车的人机交互、场景创新率先打样。 其中&#xff0c;东软集团也携带AI驱动、大数据支撑…

YOLO目标检测3

一. 参考资料 《YOLO目标检测》 by 杨建华博士 本篇文章的主要内容来自于这本书&#xff0c;只是作为学习记录进行分享。 二. 搭建YOLOv1的网络 2.1 YOLOv1的网络结构 作者带我们构建的YOLOv1网络是一个全卷积结构&#xff0c;其中不包含任何全连接层&#xff0c;这一点可以…

css3 svg制作404页面动画效果HTML源码

源码介绍 css3 svg制作404页面动画效果HTML源码&#xff0c;源码由HTMLCSSJS组成&#xff0c;记事本打开源码文件可以进行内容文字之类的修改&#xff0c;双击html文件可以本地运行效果 效果预览 源码如下 <!doctype html> <html> <head> <meta charse…

LINUX 平台最快子网路由转发,内核使能选项配置

阅读本文之间&#xff0c;可线性参考以下文献。 Linux 命令行配置为单臂旁路由。_linux单臂路由-CSDN博客 Linux 软路由命令行配置&#xff08;参考&#xff09;_linux软路由-CSDN博客 VGW在 Windows 平台上局域网就绪的旁路由器程序_windows旁路由-CSDN博客 本文介绍 LINUX…

RNN实现阿尔茨海默症的诊断识别

本文为为&#x1f517;365天深度学习训练营内部文章 原作者&#xff1a;K同学啊 一 导入数据 import torch.nn as nn import torch.nn.functional as F import torchvision,torch from sklearn.preprocessing import StandardScaler from torch.utils.data import TensorDatase…

HackTheBox靶机:Sightless;NodeJS模板注入漏洞,盲XSS跨站脚本攻击漏洞实战

HackTheBox靶机&#xff1a;Sightless 渗透过程1. 信息收集常规探测深入分析 2. 漏洞利用&#xff08;CVE-2022-0944&#xff09;3. 从Docker中提权4. 信息收集&#xff08;michael用户&#xff09;5. 漏洞利用 Froxlor6. 解密Keepass文件 漏洞分析SQLPad CVE-2022-0944 靶机介…

docker安装elk6.7.1-搜集java日志

docker安装elk6.7.1-搜集java日志 如果对运维课程感兴趣&#xff0c;可以在b站上、A站或csdn上搜索我的账号&#xff1a; 运维实战课程&#xff0c;可以关注我&#xff0c;学习更多免费的运维实战技术视频 0.规划 192.168.171.130 tomcat日志filebeat 192.168.171.131 …

XML实体注入漏洞攻与防

JAVA中的XXE攻防 回显型 无回显型 cve-2014-3574

【问题解决】el-upload数据上传成功后不显示成功icon

el-upload数据上传成功后不显示成功icon 原因 由于后端返回数据与要求形式不符&#xff0c;使用el-upload默认方法调用onSuccess钩子失败&#xff0c;上传文件的状态并未发生改变&#xff0c;因此数据上传成功后并未显示成功的icon标志。 解决方法 点击按钮&#xff0c;调用…

spring框架之IoC学习与梳理(1)

目录 一、spring-IoC的基本解释。 二、spring-IoC的简单demo&#xff08;案例&#xff09;。 &#xff08;1&#xff09;maven-repository官网中找依赖坐标。 &#xff08;2&#xff09;.pom文件中通过标签引入。 &#xff08;3&#xff09;使用lombok帮助快速开发。 &#xff…

150 Linux 网络编程6 ,从socket 到 epoll整理。listen函数参数再研究

一 . 只能被一个client 链接 socket例子 此例子用于socket 例子&#xff0c; 该例子只能用于一个客户端连接server。 不能用于多个client 连接 server socket_server_support_one_clientconnect.c /* 此例子用于socket 例子&#xff0c; 该例子只能用于一个客户端连接server。…

PCIe 个人理解专栏——【2】LTSSM(Link Training and Status State Machine)

前言&#xff1a; 链路训练和状况状态机LTSSM&#xff08;Link Training and Status State Machine&#xff09;是整个链路训练和运行中状态的状态转换逻辑关系图&#xff0c;总共有11个状态。 正文&#xff1a; 包括检测&#xff08;Detect&#xff09;&#xff0c;轮询&…