当前位置: 首页 > news >正文

openlayers+jsts 实现对行政区以外的区域进行遮罩(兼容多面的情况,兼容不同的ol版本)

先抛效果图,该区域有很多个小面

之前在网上搜到的方式实现

Openlayers 为目标范围以外的区域添加遮罩 - 知乎

核心代码如下,如果您不需要兼容全国的所有省市,而刚好要加地区又是连贯的区域的话,该方法可行,但是如果需要兼容全国的省市县的话,就不要用了,会出现我下面的效果图

然后我就自己找了一种方式去实现

其实加遮罩的思路很简单,就是将世界范围和行政区相交,然后取反就是我们需要加遮罩的区域了

实现代码如下所示(该方法可以兼容所有的情况,而且即便需要对多个省市区以外加遮罩也是可以稍加修改实现的)

 xzqhAddMark(fea){if(!fea) returnlet _this = thisvar globalGeom = new Polygon([[[-180, -90], [-180, 90], [180, 90], [180, -90], [-180, -90]]])_this.maskLayer.getSource().clear()var maskGeometry = fea.getGeometry()var difference = _this.jstsDifference(globalGeom, maskGeometry);var convertFt = new Feature({geometry: difference})_this.maskLayer.getSource().addFeature(convertFt);_this.map.getView().fit(maskGeometry.getExtent());},// 差异分析,可以达到相交取反的效果jstsDifference(geom, geomB){const jstsGeom = OLParser.read(geom);const jstsGeomB = OLParser.read(geomB);const difference = jstsGeom.difference(jstsGeomB);return OLParser.write(difference);},

相关文章:

openlayers+jsts 实现对行政区以外的区域进行遮罩(兼容多面的情况,兼容不同的ol版本)

先抛效果图,该区域有很多个小面 之前在网上搜到的方式实现 Openlayers 为目标范围以外的区域添加遮罩 - 知乎 核心代码如下,如果您不需要兼容全国的所有省市,而刚好要加地区又是连贯的区域的话,该方法可行,但是如果需要兼容全国…...

【MySQL】查询进阶

👑专栏内容:MySQL⛪个人主页:子夜的星的主页💕座右铭:前路未远,步履不停 目录 一、数据库约束1、约束类型2、not null3、unique4、default5、primary key6、foreign key 二、新增三、查询1、聚合查询2、分组…...

C++学习之路(五)C++ 实现简单的文件管理系统命令行应用 - 示例代码拆分讲解

简单的文件管理系统示例介绍: 这个文件管理系统示例是一个简单的命令行程序,允许用户进行文件的创建、读取、追加内容和删除操作。这个示例涉及了一些基本的文件操作和用户交互。 功能概述: 创建文件 (createFile()): 用户可以输入文件名和内…...

Node.js下载安装及配置镜像源

一、进入官网地址下载安装包 https://nodejs.org/dist 选择对应你系统的Node.js版本 这里我选择的是Windows系统、64位 二、安装程序 (1)下载完成后,双击安装包,开始安装Node.js (2)直接点【Next】按钮,此处可根据…...

RAC 下expdp impdp 并行 parallel FK

1. dump 文件非共享下的并行 Customer receives the following errors: ORA-31693: Table data object "<SCHEMA_NAME>"."<TABLE_NAME>" failed to load/unload and is being skipped due to error: ORA-31617: unable to open dump file &qu…...

【数据结构】动态顺序表详解

目录 1.顺序表的概念及结构 2.动态顺序表的实现 2.1创建新项目 2.2动态顺序表的创建 2.3接口的实现及测其功能 2.3.1初始化 2.3.2尾插 2.3.3头插 2.3.4尾删&头删 2.3.5打印&从任意位置插入 2.3.6删除任意位置的数据 2.3.7查找 2.3.8销毁顺序表 3.结语 He…...

Nginx代理https请求的操作过程

理论很简单&#xff0c;过程很曲折&#xff0c;版本适配的问题要小心。 场景&#xff1a; 要和前端进行联调&#xff0c;我本地后端用了https&#xff0c;证书是自制的&#xff0c;主要是页面里面有一些oauth2认证的地方&#xff0c;需要跳转。 比如https://aaa.com/profile.h…...

Linux 面试题(一)

目录 1、绝对路径用什么符号表示&#xff1f;当前目录、上层目录用什么表示&#xff1f;主目录用什么表示? 切换目录用什么命令&#xff1f; 2、怎么查看当前进程&#xff1f;怎么执行退出&#xff1f;怎么查看当前路径&#xff1f; 3、怎么清屏&#xff1f;怎么退出当前命…...

HIVE SQL取整函数汇总

目录 int()round(double a)round(double a,int d)floor()ceil() int() 向零取整&#xff0c;即向接近零的方向取整。 int(5.6)输出&#xff1a;5 int(-5.6)输出&#xff1a;-5 round(double a) 四舍五入取整 select round(5.6)输出&#xff1a;6 select round(-5.6)输出&…...

VMware 虚拟机设置静态IP

1.桥接模式&#xff1a;无线网卡虚拟机可以桥接的&#xff0c;Vmware0是虚拟机默认进入的虚拟网络&#xff0c;打开虚拟网络编辑器把Vmware0桥接到具体的无线网卡上&#xff0c;再打开网卡设置选择桥接模式即可。 2、.NAT模式下 &#xff1a;window下VMnet8: IPv4 地址 . . . …...

pandas 如何获取dataframe的行的数量

pandas的dataframe提供了多种方法获取其中数据的行的数量&#xff0c;本偏文章就是介绍几种获取dataframe行和列出量的方法。 为了能够详细说明如何通过代码获取dataframe的行数和列数&#xff0c;需要先创建一个dataframe如下&#xff1a; import pandas as pdtechnologies …...

css实现图片绕中心旋转,鼠标悬浮按钮炫酷展示

vue模板中代码 <div class"contentBox clearfix home"><div class"circle"><img class"in-circle" src"../../assets/img/in-circle.png" alt""><img class"out-circle" src"../../as…...

C++11的线程

线程的创建 用std::thread创建线程非常简单&#xff0c;只需要提供线程函数或者线程对象即可&#xff0c;并可以同时指定线程函数的参数。下面是创建线程的示例&#xff1a; #include <thread> #include <iostream> using namespace std;void func() {cout <<…...

Deepmind开发音频模型Lyria 用于生成高品质音乐;创建亚马逊新产品评论摘要

&#x1f989; AI新闻 &#x1f680; Deepmind开发音频模型Lyria 用于生成高品质音乐 摘要&#xff1a;Deepmind推出名为Lyria的音频模型&#xff0c;可生成带有乐器和人声的高品质音乐。Lyria模型针对音乐生成的挑战&#xff0c;解决了音乐信息密度高、音乐序列中的连续性维…...

Liunx系统使用超详细(一)

目录 一、Liunx系统的认识 二、Liunx和Windows区别 三、Liunx命令提示符介绍 四、Liunx目录结构 一、Liunx系统的认识 Linux系统是一种开源的、类Unix操作系统内核的实现&#xff0c;它基于Unix的设计原理和思想&#xff0c;并在全球范围内广泛应用。以下是对Linux系统的详…...

C语言标准

1、概述 C语言标准是由ANSI&#xff08;美国国家标准协会&#xff09;和ISO&#xff08;国际标准化组织&#xff09;共同制定的一种语言规范。标准经历过如下更新&#xff1a; C89/C90标准C99标准C11标准C17标准 2、C89/C90标准 (1)这是1989年正式发布的C语言标准&#xff0…...

TI 毫米波雷达开发系列之mmWave Studio 和 Visuiallizer 的异同点雷达影响因素分析

TI 毫米波雷达开发之mmWave Studio 和 Visuiallizer 的异同点 引入整个雷达系统研究的目标分析影响这个目标的因素硬件影响因素 —— 雷达系统的硬件结构&#xff08;主要是雷达收发机&#xff09;AWR1642芯片硬件系统组成MSS 和 DSS 概述MSS 和 DSS 分工BSS的分工AWR1642 组成…...

SpringBoot事务处理

一、事务回顾 回顾地址&#xff1a; 深入理解数据库事务&#xff08;超详细&#xff09;_数据库事务操作_Maiko Star的博客-CSDN博客 事务&#xff1a; 是一组操作的集合&#xff0c;是一个不可分割的工作单位&#xff0c;这些操作要么同时成功&#xff0c;要么同时失败 事…...

网络安全—自学

1.网络安全是什么 网络安全可以基于攻击和防御视角来分类&#xff0c;我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术&#xff0c;而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 2.网络安全市场 一、是市场需求量高&#xff1b; 二、则是发展相对成熟…...

首页以卡片形式来展示区块链列表数据(Web3项目一实战之五)

我们已然在 Web3 分布式存储 IPFS(Web3项目一实战之四) 介绍了什么是IPFS,以及在本地电脑如何安装它。虽然在上一篇讲解了该怎么安装IPFS,也做了相应的配置,但在本地开发阶段,前端总是无法避免跨域这个远程请求api的”家常便饭的通病“。 很显然,对于出现跨域这类常见问…...

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

css实现圆环展示百分比,根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

Zustand 状态管理库:极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

让AI看见世界:MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...