地理信息查询之属性查询

欢迎来到 WebGIS 入门系列的第九篇文章！在本文中，我们将探讨地理信息查询的主题，重点介绍属性查询的实现方法。我们将使用 ArcGIS Maps SDK for JavaScript 结合 element-plus UI 库来实现一个简单的属性查询功能。

引入 element-plus UI 库

首先，让我们安装 element-plus UI 库，用于创建搜索框组件。您可以在项目中使用 npm 或 yarn 安装 element-plus：

# 选择一个你喜欢的包管理器

# NPM
npm install element-plus

# Yarn
yarn add element-plus

# pnpm
pnpm install element-plus

然后，在 src/main.ts 文件中通过以下代码来引入 element-plus 及相应的样式文件：

// ......
import ElementPlus from "element-plus"
import "element-plus/dist/index.css"

// ......
app.use(ElementPlus)

// ......

现在，您可以在项目中按需引入 element-plus 的组件，例如搜索框组件：

import { Search } from "@element-plus/icons-vue"

实现 AttributeSearch 组件

在 src/components 目录下新建 AttributeSearch.vue 文件，将下述代码拷贝至此文件中：

<template>
   
  <div class="attribute-search">
       
    <el-input
      v-model="searchValue"
      clearable
      style="width: 300px"
      placeholder="输入关键字查询"
      @clear="handleSearchInputClear"
    >
           
      <template #append
        ><el-button type="primary" :icon="Search" @click="handleSearchBtnClick"
      /></template>
         
    </el-input>
     
  </div>
</template>

<script setup lang="ts">
  import { ref } from "vue"
  import { Search } from "@element-plus/icons-vue"

  const searchValue = ref("")

  function handleSearchInputClear() {
    // 输入框清除时触发
  }

  function handleSearchBtnClick() {
    // 搜索按钮点击时触发
  }
</script>

<style scoped>
  .attribute-search {
    position: absolute;
    top: 16px;
    left: 16px;
    height: 36px;
    box-sizing: border-box;
  }
</style>

然后将 AttributeSearch 组件引入到 MapView 组件并渲染。此时，地图左上角应该会出现一个带搜索图标按钮的输入框。

AttributeSearch

实现属性查询

接下来，让我们结合 ArcGIS Maps SDK for JavaScript 中的 query API 实现属性查询的逻辑。预期效果是：在输入框中输入查询关键字，点击搜索图标按钮之后会进行属性查询，最终弹窗展示查询结果数量。当然，除了上述主要逻辑之外，还附带一些提升用户体验的操作，例如没有输入任何值时点击查询按钮，弹窗提示用户输入；点击输入框的清除按钮时，提示用户查询结果已清除等信息。以下是介绍如何根据用户输入的属性值进行查询：

function handleSearchBtnClick() {
  if (!searchValue.value) {
    openMessage("请输入关键字后再查询", "warning")
    return
  }

  const loading = openLoading("正在查询，请稍后...")
  const queryUrl =
    "https://sampleserver6.arcgisonline.com/arcgis/rest/services/SampleWorldCities/MapServer/0"

  query
    .executeQueryJSON(queryUrl, {
      where: `POP > ${searchValue.value}`, // 查询条件，此处查询人口值大于输入值的信息
      returnGeometry: true,
      outFields: ["*"],
    })
    .then(
      function (results) {
        loading.close()
        openMessage(`成功查询到 ${results.features.length} 条数据`, "success")
      },
      function (error) {
        console.log("属性查询失败", error)
        loading.close()
        openMessage("查询失败，请稍后重试", "error")
      }
    )
}

上述代码中，为了防止代码冗余，对于弹窗提示的代码进行了抽离，单独存放在了 src/libs 目录下的 utils.ts 文件中，如下：

import { ElMessage, ElLoading } from "element-plus"

export const openMessage = (
  text: string,
  type: "success" | "warning" | "error" | "info"
) =>
  ElMessage({
    message: text,
    grouping: true,
    type,
  })

export const openLoading = (text: string) => {
  const loading = ElLoading.service({
    lock: true,
    text: text || "Loading",
    background: "rgba(0, 0, 0, 0.7)",
  })
  return loading
}

上述代码运行后可看到如下效果：

AttributeSearch

小作业：可视化展示查询结果

现在，您可以尝试实现一个简单的可视化组件，用于展示查询后的结果。您可以使用图表、表格等形式来展示查询到的要素信息。

结语

通过本文的指导，您已经学会了如何使用 ArcGIS Maps SDK for JavaScript 结合 element-plus UI 库实现地理信息查询中的属性查询功能。通过小作业，您也有机会实践可视化展示查询结果的操作。希望本文能够帮助您更好地理解和应用属性查询，从而为您的 WebGIS 应用增添更多实用功能。祝您在 WebGIS 开发的旅程中取得成功！