vue + arcgis api for js 使用querytask 空间查询并将结果以表格形式返回

好的，下面是一个简单的示例：

1. 在 Vue 项目中安装 arcgis for js 和 axios：

npm install --save @arcgis/core axios

2. 在需要使用查询功能的组件中引入模块：

import * as esriLoader from "@arcgis/core"; // 引入 arcgis for js
import axios from "axios"; // 引入 axios

3. 在组件的 `mounted()` 生命周期中初始化地图和查询任务：

mounted() {
  // 初始化地图
  esriLoader.loadModules(["esri/Map", "esri/views/MapView"]).then(([Map, MapView]) => {
    const map = new Map({
      basemap: "streets-navigation-vector",
    });

    const view = new MapView({
      container: "map-container",
      map: map,
      center: [-118.80500, 34.02700],
      zoom: 13,
    });
  });

  // 初始化查询任务
  esriLoader.loadModules(["esri/tasks/QueryTask", "esri/tasks/support/Query"]).then(([QueryTask, Query]) => {
    this.queryTask = new QueryTask({
      url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3", // 查询图层的 URL
    });

    this.query = new Query();
    this.query.returnGeometry = false; // 不返回几何对象
    this.query.outFields = ["*"]; // 返回所有字段
  });
},

4. 在查询按钮的点击事件中执行查询：

methods: {
  onQuery() {
    const whereClause = "STATE_NAME = 'California'"; // 查询条件
    this.query.where = whereClause;

    this.queryTask.execute(this.query).then((result) => {
      const features = result.features;
      const data = features.map((feature) => {
        return feature.attributes;
      });

      this.tableData = data; // 将查询结果赋值给表格数据
    });
  },
},

5. 在模板中添加查询按钮和表格：

<div id="map-container"></div>

<button @click="onQuery">查询</button>

<table>
  <thead>
    <tr>
      <th v-for="field in fields">{{ field }}</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="row in tableData">
      <td v-for="field in fields">{{ row[field] }}</td>
    </tr>
  </tbody>
</table>

6. 在 `data` 中定义表格数据和字段列表：

data() {
  return {
    queryTask: null,
    query: null,
    tableData: [],
    fields: ["STATE_NAME", "POP2000", "POP2007"],
  };
},

这样就可以在 Vue 中使用 arcgis for js 的查询功能，并将查询结果以表格形式返回。