MapGIS Client for JavaScript如何实现要素服务的分页查询

前言

分页查询是数据查询中非常常见的一种方式，对于大数据量的查询，分页查询可以大大提高查询效率，降低服务器的压力。本文将介绍如何在要素服务中实现分页查询。

实现思路

分页查询的关键是获取查询结果的总条数total，通过总条数和每页显示的条数pageSize，计算出总页数totalPage，然后根据当前页码currentPage和每页显示的条数pageSize，计算出查询的起始位置startIndex和结束位置endIndex。最后，根据startIndex和endIndex进行查询，即可得到当前页的数据。

实现步骤

1. 获取查询结果的总条数total。
   queryFeatures、queryFeaturesInLayers方法都有一个returnCountOnly参数，可以控制返回结果的类型。如果returnCountOnly为true，则返回结果中只包含总条数，不包含要素数据。因此，我们可以通过设置returnCountOnly为true，来获取查询结果的总条数total。

      const features = await featureServer.queryFeatures({
        layerId: '4',
        method: 'POST',
        where: "OID>12", // 查询条件
        returnCountOnly: true,// 是否只返回数量
      })

2. 计算偏移量。
   总页数totalPage可以通过总条数total和每页显示的条数pageSize计算得到（queryFeatures、queryFeaturesInLayers方法中的resultRecordCount即为pageSize。）。如果总条数total能够被每页显示的条数pageSize整除，则总页数totalPage等于总条数total除以每页显示的条数pageSize；否则，总页数totalPage等于总条数total除以每页显示的条数pageSize再加1。

方法中的resultOffset属性则等于（currentPage-1）* pageSize。

3. 构建分页器，进行分页查询。
   通过设置returnCountOnly为true获取到total后，即可构建出分页器所需的参数。再通过将分页器视图的pageSize、currentPage参数换算为查询所需的resultOffset，设置returnCountOnly为false，再次查询，即可获取到要素数据。

// queryFeature.vue
<template>
  <div >
      <!-- 其他逻辑-->
      <!-- 分页器-->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[20, 30, 100, 200]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'QueryFeature',
  data() {
    return {
      currentPage: 0,
      pageSize: 20,
      total: 0,
    };
  },

  methods: {
    // 其他逻辑...
    // 单图层查询
    async queryLayer(id, geometry, resultRecordCount = 20, resultOffset = 0) {
      const firstLayer = await featureServer.queryFeatures({
        layerId: id,
        geometry,
        resultRecordCount,
        resultOffset,
      });
    },   
// 点击上一页、下一页时重新发送请求
    handleCurrentChange(val) {
      this.currentPage = val;
      this.queryLayer(
        this.layerTabIndex,
        this.geometry,
        this.pageSize,
        this.currentPage * this.pageSize
      );
    },
    // 切换每页显示的条数时重新发送请求
    handleSizeChange(val) {
      this.pageSize = val;
      this.queryLayer(
        this.layerTabIndex,
        this.geometry,
        this.pageSize,
        this.currentPage * this.pageSize
      );
    },
  },
};
</script>

总结

要素服务的分页查询实现的关键在于计算偏移量，并根据偏移量进行查询。
通过设置returnCountOnly为true，可以获取查询结果的总条数，然后根据总条数和每页显示的条数，计算出总页数和偏移量，最后根据偏移量进行查询，即可得到当前页的数据。