mapbox图层层级问题

news2024/11/19 0:49:48

如果在项目之初我们没有设计好图层的问题,那么大概率我们会与到预期图层在别的图层下面的问题,这是需要使用addlayer、movelayer方法来调整图层的位置了。

一般而言先添加的图层在显示的时候在后添加图层的下面,例如下面的代码:

map.addLayer({
    'id': 'wholesearch_pologonborder_layer',
    'type': 'line',
    'source': 'wholeSearch_geojson_border',
    'paint': {
        'line-color': '#cedbf2',
        'line-width': 2,
        'line-dasharray': [2, 1],
    },
    'layout': {
        'visibility': 'visible'
    }
})
map.addLayer({
    'id': 'wholesearch_line_layer',
    'type': 'line',
    'source': 'wholeSearch_geojson_info',
    'paint': {
        'line-color': '#f6cccc',
        'line-width': 3,
        'line-dasharray': [2, 2]
    },
    'layout': {
        'visibility': 'visible'
    }
})

我用map.getStyle() 方法获取mapbox的所有图层:

console.log('图层', map.getStyle())

 可以看到'wholesearch_pologonborder_layer' 在 'wholesearch_line_layer' 之前。

如果我们调用movelayer 方法可以看到二者的位置发生了变化,会将第一个参数的图层放到后一个参数之前。

addLayer原理是相同的不过是在图层创建的时候变化位置。

 

 

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

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

相关文章

ChatGPT伪原创文章的应用与发展

ChatGPT是一种基于人工智能技术的自然语言处理模型,它能够生成逼真的、具有上下文连贯性的文本。近年来,ChatGPT在各个领域的应用越来越广泛,其发展潜力也逐渐被人们所认识。本文将从多个方面对ChatGPT的应用与发展进行详细阐述。 ChatGPT在…

人脸考勤签到进阶篇

目录 签到业务流程说明 一、需求介绍 二、如何获取地理信息? 三、如何判定某地区新冠疫情的风险等级? 开通腾讯位置服务 二、腾讯位置服务SDK 把定位坐标转换成真实地址 一、获取定位坐标 uni.authorize(OBJECT) 二、编辑签到页面 在Docker中…

如何在 Spring Boot 中使用反向代理

如何在 Spring Boot 中使用反向代理 介绍 在分布式系统中,反向代理是一项非常重要的技术。通过反向代理,可以将客户端的请求转发到后端的多台服务器上,实现负载均衡和故障转移等功能。本文将介绍如何在 Spring Boot 应用中使用反向代理。 环…

微信小程序判断用户是否授权定位

1、判断用户是否授权定位 checkLocationAuth() {let that thiswx.getSetting({success: (res) > {let authSetting res.authSettingif (authSetting[scope.userLocation]) {that.getCurrentLocation()} else if (authSetting[scope.userLocation] false) {wx.showModal(…

yxcms弱口令至getshell 漏洞复现

为方便您的阅读,可点击下方蓝色字体,进行跳转↓↓↓ 01 环境部署02 漏洞配置03 利用方式04 修复方案 01 环境部署 (1)yxcms yxcms 基于 PHPMySQL 开发,这是一个采用轻量级 MVC 设计模式的网站管理系统。轻量级 MVC 设…

【wifi模块应用】基于路由模块SKW92A的4G转WiFi、无线中继、视频传输方案

在家用WiFi,外出用4G,已经成为时下很多人的常规操作,尤其在室内环境中,无论是办公、居家,还是在高铁站、飞机场,亦或是酒店、咖啡馆等公共场所,我们都会下意识地主动连上WiFi。据悉,…

lenovo联想Yoga 13s 2021 AMD平台ACN版(82CY)原厂预装Win11系统镜像原装OEM恢复出厂状态

LENOVO联想笔记本电脑,Yoga 13s 2021 AMD平台ACN版(82CY)原装出厂Windows11系统,恢复原厂OEM预装专用系统 系统自带所有驱动、出厂主题壁纸LOGO、Office办公软件、联想电脑管家等预装程序 所需要工具:16G或以上的U盘 文件格式:…

星辰秘典:探索Python项目的神秘力量——贪吃蛇

✨博主:命运之光 🌸专栏:星辰秘典:探索Python项目的神秘力量 🐳专栏:web开发(html css js) ❤️专栏:Java经典程序设计 ☀️博主的其他文章:点击进入博主的主…

Hive(10):Hive分桶表

1 分桶表的概念 分桶表也叫做桶表,叫法源自建表语法中bucket单词,是一种用于优化查询而设计的表类型。分桶表对应的数据文件在底层会被分解为若干个部分,通俗来说就是被拆分成若干个独立的小文件。在分桶时,要指定根据哪个字段将数据分为几桶(几个部分)。2 分桶表的规则 …

torch.cuda模块获取信息

判断GPU是否可用 import torch print(torch.cuda.is_available())如果输出True则表示可以使用GPU 输出可使用GPU的数量 import torch print(torch.cuda.device_count())输出1就表示只有一块可以用 输出GPU的名字 import torch print(torch.cuda.get_device_name())如果有…

如何在 VSCode 去调试 Redis源码

学习使用 Redis 时,从 GitHub 下载 Redis 源码是个不错的选择。在下载后,通过创建 task.json 和 launch.json 两个文件,可以方便地在本地进行 Redis 的编译、运行和调试。通过这些步骤,你可以更好地理解 Redis 的内部实现&#xf…

小程序 css flex的子元素图片被周边元素text挤压变形

flex下子元素会自动拉伸,第一个子元素image设置了100 * 100还是被后面的text过长文字挤压了。 解决: 方法1: 让图片不自动拉伸加上 flex:noe 方法2: flex下面所有的子元素都设置宽度,这个会比较麻烦,需要…

如何在Microsoft Excel中迅速冻结首行和末行

如果你正在处理一个大型电子表格,那么冻结某些行或列会很有用,这样当你滚动浏览工作表的其余部分时,它们会留在屏幕上。 当你在 Excel 中滚动浏览大的工作表时,你可能希望保留一些行或列,例如页眉。Excel 允许你通过以…

useReducer可配合react-redux方案

接下来 我们来看 useReducer 这个属性 配合 react-redux 就会非常好用 那么 我们编写一段这样代码 import React, { useState } from react;const ContDom () > {const [count, setCount] useState(0);return (<div>cont值{ count }<button onClick {()>{ …

DevSecOps实践:如何在研发过程中做好供应链安全

DevSecOps与供应链安全 很多企业都建立了DevOps流程&#xff0c;但安全基本还处在流程之外&#xff0c;没有融入传统DevOps流程&#xff0c;导致安全一直都是敏捷交付的瓶颈。本篇内容我们将从DvSecOps和软件供应链安全的角度来谈谈研发过程中的安全问题。 01 DevSecOps——供…

Self-Instruct 论文解读:利用大模型自己给自己生成指令数据,指令数据自动生成

总览 大规模“指令调整”的语言模型&#xff0c;即指令微调的LLM&#xff0c;已经表现出非凡的零样本能力&#xff0c;尤其是推广新任务上。 然而&#xff0c;这些模型严重依赖于人类编写的指令数据&#xff0c;而这些数据通常在数量、多样性和创造力方面受到限制&#xff0c;…

Elasticsearch:result

排序 es支持对搜索结果排序&#xff0c;默认是根据相关度算分(_score)来排序。可以排序的字段类型有&#xff1a;keyword、数值、地理坐标、日期等类型。 语法 GET /indexName/_search {"query": {"match_all": {}},"sort": [{"FIELD&quo…

视频融合平台EasyCVR迁移数据库报错1146是什么原因?该如何解决?

EasyCVR视频融合平台基于云边端协同架构&#xff0c;具有强大的数据接入、处理及分发能力。平台支持多协议接入&#xff0c;包括&#xff1a;国标GB28181、RTMP、RTSP/Onvif、海康Ehome、海康SDK、大华SDK、宇视SDK等&#xff0c;对外可分发多格式视频流&#xff0c;包括RTSP、…

SSM 开放式实验管理系统 -计算机毕设 附源码78512

SSM 开放式实验管理系统 摘 要 我国高校开放式实验管理普遍存在实验设备使用率较低、管理制度不完善,实验设备共享程度不高等诸多问题。要在更大范围推行开放式实验管理,就必须在开放式实验教学管理流程中,通过引入信息化管理加大信息技术在其中的应用,才能真正发挥这种教学模…