Mapbox实现蒙版掩膜效果

news2024/11/25 6:53:57

成果图

在这里插入图片描述

原理

原理其实是利用geojson的polygon空心圆
在这里插入图片描述
理论上必须在coordinates里面,第一个坐标数组要是最外圈的,套住后面坐标数组,这样就可以实现空心圆的效果,但是实际上,如果两个坐标数组在拓扑关系是不相交的话也没问题,如果相交的话可能会出bug。

代码

如果不想贴的这么严丝合缝的话,可以加一个缓冲区,利用turf

  res= turf.buffer(res, 0.5, {units: 'miles'});
        map.addLayer({
          //蒙版图层   //通过边界数据反选 达到挖洞效果
          id: 'mb',
          type: 'fill',
          source: {
            type: 'geojson',
            data: {
              type: 'Feature',
              geometry: {
                type: 'Polygon',
                coordinates: [
                  [
                  // 多边形外围 需要进行遮罩的点 这里是给世界地图加遮罩 所以是世界的四个端点
                    [-180, 90],
                    [180, 90],
                    [180, -90],
                    [-180, -90],
                  ],
                  // 第 1个孔 ,这个坐标数组就是你的边界坐标,用上面的世界坐标挖去这个边界坐标就能达到空心的效果,也就是蒙版
                  res,
                ],
              },
            },
          },
          paint: {
            'fill-color': 'rgba(200,202,199,.90)',
          },
          layout: {
            visibility: 'visible',
          },
        });

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

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

相关文章

springboot 集成dubbo

上一篇我们一起认识了Dubbo与RPC,今天我们就来一起学习如何使用Dubbo,并将Dubbo集成到Spring Boot的项目中。我们来看下今天要使用到的软件及版本: 软件 版本 说明 Java 11 Spring Boot 2.7.13 Spring Boot 3.0版本开始,最…

揭榜!年度智能汽车「软件/座舱/车联」TOP10供应商奖项官宣

过去几年,在特斯拉及新势力的带动下,车企的盈利模式正在寻求从“一次售卖”转变为“硬件预埋+软件付费解锁”,背后是驱动汽车软件架构的迭代,即从面向信号的软件架构,过渡至面向服务的SOA架构。 同时&…

uni-app 之 目录结构

目录结构: 工程简介 | uni-app官网 (dcloud.net.cn) pages/index/index.vue 页面元素等 static 静态文件,图片 字体文件等 App.vue 应用配置,用来配置App全局样式以及监听 应用生命周期 index.html 项目运行最终生成的文件 main.js 引用的…

JVM之程序计数器和栈

Java虚拟机(JVM)是运行Java程序的关键组件,它负责将Java源代码转换为可执行的字节码,并在运行时管理内存、执行程序等。在JVM的内部,有许多重要的组成部分,如下图: 1. JVM程序计数器 程序计数器…

电脑硬盘数据恢复一般需要收费多少钱

随着电子信息时代的发展,个人和企业对电脑硬盘中存储的数据越发重视。然而,由于各种原因,硬盘数据丢失的情况屡见不鲜。如果您正陷入这样的困境,您可能会好奇恢复失去的数据需要花费多少钱。本文将为您介绍电脑硬盘数据恢复的一般…

Unity ShaderGraph教程——进阶shader(水面、积雪)

1.水面(一) 公式:场景深度 节点深度 — 屏幕空间位置的W向量 半透明物体与不透明物体的相交边缘 原理:场景深度 节点深度包含透明像素,屏幕空间w向量不包含透明像素。 注意:需要在UniversalRP-xxxQuali…

Linux常用命令——cu命令

在线Linux命令查询工具 cu 用于连接另一个系统主机。 补充说明 cu命令用于连接另一个系统主机。cu(call up)指令可连接另一台主机&#xff0c;并采用类似拨号终端机的接口工作&#xff0c;也可执行简易的文件传输作业。 语法 cu [dehnotv][-a<通信端口>][-c<电话…

vue页面添加水印(可用于H5,APP)

vue页面添加水印 背景实现新建vue组件使用效果 尾巴 背景 最近实现了一个小功能&#xff0c;就是给页面添加背景水印。实现思路就是定义一个宽高充满屏幕的组件&#xff0c;然后使用绝对定位并通过层级控制让水印显示在页面的最前端。 实现 代码相对简单&#xff0c;相信有点…

如何熟练使用vector?

&#x1f388;个人主页:&#x1f388; :✨✨✨初阶牛✨✨✨ &#x1f43b;推荐专栏1: &#x1f354;&#x1f35f;&#x1f32f;C语言初阶 &#x1f43b;推荐专栏2: &#x1f354;&#x1f35f;&#x1f32f;C语言进阶 &#x1f511;个人信条: &#x1f335;知行合一 &#x1f…

ue5 物理场的应用

cable mat wpo particle 流体粒子 choas 破损 刚体 布料 cloud abp blueprint riggedbody 体积雾 毛发 全局的 局部的 非均匀的 连续变化的 也可以多个叠加 从全局 到 范围

软件安全检测相关政策法规及安全测试的作用

安全测试 一、软件安全检测相关政策法规&#xff1a; 《网络安全法》 《网络产品和服务安全审查办法&#xff08;试行&#xff09;》 《政府信息系统安全检查办法》&#xff08; 国办发〔2009〕28 号&#xff09; 《国务院办公厅关于开展重点领域网络与信息安全检查行动的…

ssm+vue亿互游在线平台源码和论文

ssmvue亿互游在线平台源码和论文118 开发工具&#xff1a;idea 数据库mysql5.7 数据库链接工具&#xff1a;navcat,小海豚等 技术&#xff1a;ssm 摘 要 随着旅游业的迅速发展&#xff0c;传统的旅游资讯查询方式&#xff0c;已经无法满足用户需求&#xff0c;因此&#x…

2023开学礼山东财经大学《乡村振兴战略下传统村落文化旅游设计》许少辉新财经图书馆

2023开学礼山东财经大学《乡村振兴战略下传统村落文化旅游设计》许少辉新财经图书馆

SQL sever中用户管理

目录 一、用户管理常见方法 二、用户管理方法示例 2.1. 创建登录账户&#xff1a; 2.1.1 检查是否创建账户成功&#xff1a; 2.2. 创建数据库用户&#xff1a; 2.2.1检查用户是否创建成功&#xff1a; 2.3. 授予权限&#xff1a; 2.3.1授予 SELECT、INSERT 和 U…

nacos 配置中心配置优先级

默认配置文件&#xff1a; 这的默认配置名为&#xff1a;com.tulingmall.order 名称的properties文件 如果不是properties需修改下图配置 默认配置文件只需名称对应 类型就算不为properties也无需加后缀名称 后面级别更低的为配置文件引入的多文件配置

机器人中的数值优化(八)——拟牛顿方法(上)

本系列文章主要是我在学习《数值优化》过程中的一些笔记和相关思考&#xff0c;主要的学习资料是深蓝学院的课程《机器人中的数值优化》和高立编著的《数值最优化方法》等&#xff0c;本系列文章篇数较多&#xff0c;不定期更新&#xff0c;上半部分介绍无约束优化&#xff0c;…

1.14 手工插入ShellCode反弹

PE格式是 Windows下最常用的可执行文件格式,理解PE文件格式不仅可以了解操作系统的加载流程,还可以更好的理解操作系统对进程和内存相关的管理知识,而有些技术必须建立在了解PE文件格式的基础上,如文件加密与解密,病毒分析,外挂技术等&#xff0c;本次的目标是手工修改或增加节…

【单片机】有人 WH-LTE-7S1 4G cat1 模块连接服务器,教程,记录。GPRS模块连接服务器教程。socket编程。

文章目录 4G cat1 模块封装引脚名称功能拓扑图串口模块调试WH-LTE-7S1公网服务器建立python程序服务服务器程序WH-LTE-7S1 模块连接服务器与多个模块建立TCP长连接的服务器程序 本文主要介绍了一个4G Cat1模块&#xff0c;该模块具有多种功能和特性。文章接下来展示了4G Cat1模…

手把手教你Typora大纲如何显示序号(支持六级标题栏序号)

1 打开偏好设置 2 新建 base.user.css文件 3 复制代码&#xff08;重启typora生效&#xff09;&#xff1a; /************************************** * Header Counters in TOC **************************************//* No link underlines in TOC */ .md-toc-inner { …

第四章:照相机模型与增强实现

文章目录 第四章&#xff1a;照相机模型与增强实现4.1 针孔照相机模型4.1.1 照相机矩阵4.1.2 三维点的投影4.1.3 照相机矩阵的分解4.1.4 计算照相机中心 4.2 照相机标定4.3 以平面和标记物进行姿态估计4.4 增强现实4.4.1 PyGame 和 PyOpenGL4.4.2 从照相机矩阵到 Open…