mapbox全局空间过滤状态管理

贴个群号

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 } = data
    if (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.geometryFilter
          switch(type){
            case 'region':
                param = {
                  ...param,
                  'addvcd':node.id,
                  'levelnumber': node.levelnumber,
                  'rvcd':'',
                }
              break
            case 'river':
                param = {
                  ...param,
                  'addvcd':'',
                  'levelnumber':'',
                  'rvcd':node.wscd,
                  'hscd':node.wscd,
                }
              break
          }
      }
      return param
    },