mapbox全局空间过滤状态管理

embedded/2024/12/22 20:47:52/

贴个群号

WebGIS学习交流群461555818,欢迎大家

实现

在这里实现一个跟对应地图绑定的全局空间过滤状态的管理的思路与代码。

首先需求就是可能系统里面有个工具箱,这个里面可以选择不同的政区,比如对应的省市县,然后下面的一些功能,对应的请求,都是要根据这个来进行过滤的,比如要展示温度站点,如果政区选择的是河北省,那么下面所有的接口都是要根据河北省来的,如果选择的是保定市,那么对应的所有的接口中的政区都要改成保定市,这个需求是很合理的。

而且还要根据不同的地图维护不同的状态,因为我们可能有多个页面,每个页面都是不同的地图实例,各自维护各自的空间过滤状态。

这里我们采用的是vuex,在mutations里面维护了这样一个方法,用以根据ID来保存对应的空间过滤状态,会自己动态的生成对应的state状态。每次改变空间过滤状态的时候,就更新这个方法。

 // 在vuex里存上当前地图的空间过滤条件  type可以是不同的类型,比如政区和流域,node里面就存对应的政区编码或者流域编码,用于接口调用this.$store.commit('GEOMETRY_FILTER',{ mapId: this.mapId, type:‘’,node: {id:‘’,} })
  // 记录全局空间过滤的 选择GEOMETRY_FILTER (state, data) {const { mapId,type,node } = dataif (Object.hasOwnProperty.call(state, mapId+'GeometryFilter')) {state[mapId+'GeometryFilter'] = {type:type,node:node}} else {// 初始化空间过滤Vue.set(state, [mapId+'GeometryFilter'], {type:type,node:node})}},

然后使用的话,会在computed里面定义这样一个变量,用于获取当前地图实例的空间过滤状态

    geometryFilter(){return this.$store.state['你的地图id'+'GeometryFilter']}

每次请求的时候,只需要getParam来重新包裹一下,就可以添加此时的空间过滤状态了

	obj=this.getParam(obj)//根据空间过滤来覆盖请求参数  region为政区  river为流域getParam(param){if(this.geometryFilter){const {type,node} = this.geometryFilterswitch(type){case 'region':param = {...param,'addvcd':node.id,'levelnumber': node.levelnumber,'rvcd':'',}breakcase 'river':param = {...param,'addvcd':'','levelnumber':'','rvcd':node.wscd,'hscd':node.wscd,}break}}return param},

http://www.ppmy.cn/embedded/17037.html

相关文章

vue3的基本特性和底层原理

一、响应式系统 1. Proxy-based 响应式代理 Vue3的核心创新之一是摒弃了Vue2基于Object.defineProperty的响应式系统,转而采用ES6的Proxy来实现数据代理。Proxy可以直接代理整个对象,无需递归遍历其属性,提供了一种更高效、更全面的数据拦截…

计算机网络 --- WebSocket协议 和 Signalr

计算机网络 --- WebSocket协议 和 Signalr 什么是WebSocket什么是SignalrSignalr Example -- SimpleChat 什么是WebSocket HTTP是基于TCP协议的,同一时间里,客户端和服务器只能有一方主动发数据,是半双工通信。 通常,打开某个网页…

如何利用交易形态的失败进行现货黄金?

进行现货黄金理财,除了需要投资者对黄金投资有热情之外,有方法也是很重要的,光有热情而没有技术,我们的资金很可能会成为其他人的囊中之物。但如果有了现货黄金理财的技术,情况就可能扭转过来。下面我们就从买入的角度…

js音频指定扬声器

做音视频开发时候,看到阿里音视频能力,有这个功能,怀着好奇的心去搜索果然发现是有办法做到的,可能比较冷门平时用不到,记录下; const devices await navigator.mediaDevices.enumerateDevices(); const a…

【银角大王——Django课程——创建项目+部门表的基本操作】

Django框架员工管理系统——创建项目部门表管理 员工管理系统创建项目命令行的形式创建Django项目——创建app注册app——在sttings中的INSTALLED_APPS [ ]数组中注册 设计表结构(django)连接数据库——在settings里面改写DATABASESDjango命令执行生成数…

在react配置使用less的最优解

在react配置使用less的最优解 react默认支持用scss,不支持less,直接使用less时会报错,因此当使用less的时候需要进行额外配置。至于技术选型选择less或scss完全取决于你的个人偏好。你当然可以采取别的方式去实现对less的配置。但是我这里只…

Redis入门到通关之数据结构解析-动态字符串SDS

文章目录 Redis数据结构-动态字符串动态扩容举例二进制安全SDS优点与C语言中的字符串的区别 欢迎来到 请回答1024 的博客 🍓🍓🍓欢迎来到 请回答1024的博客 关于博主: 我是 请回答1024,一个追求数学与计算的边界、时间…

Java 基础:设计模式之工厂方法模式

工厂方法模式(Factory Method Pattern)是一种创建型设计模式,它提供了一个创建对象的通用接口,但将实际创建逻辑推迟到子类中实现。这种模式允许客户端使用抽象接口来创建特定类型的对象,而无需了解具体的实现细节。以…