javascript - 如何在 ArcGIS esri 搜索中进行查询？

Question

我在搜索中有自己的查询，如何禁用 ArcGIS 搜索微件中的默认搜索功能并应用我的查询？

我当前的代码

const location = () => {
   const map = new Map({
        basemap: 'arcgis-light-gray',
       
      });
      const view = new MapView({
        center: [123.5504, 12.3574], // Longitude, latitude
        container: mapDiv.current,
        map: map,
        zoom: 2, // Zoom level
        ui: {
          components: ["attribution"] // removes default widgets except for attribution
       }
      });
      var zoom = new Zoom({
        view: view,
        layout: "vertical"
     });
     view.ui.add(zoom, "bottom-right");
     
      view
        .when((r) => {})
        .then(() => {
          mapDiv.current = view;
          search();
        }); 
    }
const search = () => {
      const searchWidget = new Search();

      mapDiv.current.ui.add(searchWidget, { position: "top-left", index: 2 });

}

这是 arcGIS 中的示例搜索小部件，我想覆盖搜索功能，唯一可以搜索的是我查询中的数据，它会像图片中那样显示

资源

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html

Answer 1

您需要创建一个自定义 SearchSource 以从您的数据中提取建议和结果，并将其设置为您的 searchWidget 的来源。

你需要实现的东西:

• SearchSource - 使用您的数据的搜索源。
  • getSuggestions [返回 promise] - 提供来自您的来源的建议列表
  • getResults [返回 promise] - 提供来源的搜索结果列表。

实现:

^{我修改了官方文档提供的这个sample code for search widget with custom source}

如您所见，getSuggestions 和 getResults 都返回一个 promise，因为它旨在通过 api 访问远程数据。但是由于您的数据存储在本地，您需要创建一个解析为您的数据的 promise 对象。

您提供给我的测试数据:

const test_data = {
    allIBLocations: {
      data: [
        {
          id: 'e53be02e-4cdb-11ec-81d3-0242ac130003',
          status: 'Incomplete',
          name: 'Revere - 2',
          externalId: '547e2f43-b950-4b5e-ada4-7fcc110a3785',
          ownerId: '494bd1c4-6d28-4a42-9d98-515129fde2b9',
          owner: {
            id: '494bd1c4-6d28-4a42-9d98-515129fde2b9',
          },
          orgId: 'd7d931d4-289d-49b1-bd88-29d0317b6987',
          deletedBy: null,
          deletedAt: null,
          updatedBy: null,
          updatedAt: '2021-12-15T03:43:00.787Z',
          ibLocationType: {
            name: 'Shared Office',
          },
          ibLocationTypeId: 'e53bca08-4cdb-11ec-81d3-0242ac130003',
          capacity: null,
          phoneNumber: null,
          address: {
            street1: 'Nitzsche Burg',
            street2: 'Emiliano Camp',
            city: 'Rowlandtown',
            state: 'Kentucky',
            zipCode: '41738',
            country: 'Kuwait',
          },
          geoCode:{
            latitude:-23.0633,
            longitude:15.0875
          }
          // geoCode: null,
        },
        {
          id: 'e53be45c-4cdb-11ec-81d3-0242ac130003',
          status: 'Incomplete',
          name: 'Jersey City - 4',
          externalId: '1fb7c170-f794-4c85-9a3b-57b8013a2821',
          ownerId: '494bd1c4-6d28-4a42-9d98-515129fde2b9',
          owner: {
            id: '494bd1c4-6d28-4a42-9d98-515129fde2b9',
          },
          orgId: 'd7d931d4-289d-49b1-bd88-29d0317b6987',
          deletedBy: null,
          deletedAt: null,
          updatedBy: null,
          updatedAt: '2021-12-15T03:43:00.788Z',
          ibLocationType: {
            name: 'Warm Site',
          },
          ibLocationTypeId: 'e53bcf80-4cdb-11ec-81d3-0242ac130003',
          capacity: null,
          phoneNumber: null,
          address: {
            street1: 'Madisen Club',
            street2: 'Cyrus Courts',
            city: 'East Breanamouth',
            state: 'Kentucky',
            zipCode: '05565-8531',
            country: 'Solomon Islands',
          },
          geoCode:{
            latitude:51.6617,
            longitude:-4.5789
          }
          // geoCode: null,
        },
        {
          id: 'e53be510-4cdb-11ec-81d3-0242ac130003',
          status: 'Incomplete',
          name: 'Wellington - 5',
          externalId: '479e2dc0-b55d-42fd-978b-9d9086216a5f',
          ownerId: '494bd1c4-6d28-4a42-9d98-515129fde2b9',
          owner: {
            id: '494bd1c4-6d28-4a42-9d98-515129fde2b9',
          },
          orgId: 'd7d931d4-289d-49b1-bd88-29d0317b6987',
          deletedBy: null,
          deletedAt: null,
          updatedBy: null,
          updatedAt: '2021-12-15T03:43:00.788Z',
          ibLocationType: {
            name: 'Hospital',
          },
          ibLocationTypeId: 'e53bbf40-4cdb-11ec-81d3-0242ac130003',
          capacity: null,
          phoneNumber: null,
          address: {
            street1: 'Carter Pass',
            street2: 'Gutmann Brooks',
            city: 'Paterson',
            state: 'New Jersey',
            zipCode: '79928-2470',
            country: 'Cyprus',
          },
          geoCode: {
            latitude: 51.0899,
            longitude: 67.9272,
          },
        },
        {
          id: 'e53be7e0-4cdb-11ec-81d3-0242ac130003',
          status: 'Incomplete',
          name: 'Doral - 9',
          externalId: 'b096ed12-fed2-4a9b-8e61-5c2639b7b7d8',
          ownerId: '494bd1c4-6d28-4a42-9d98-515129fde2b9',
          owner: {
            id: '494bd1c4-6d28-4a42-9d98-515129fde2b9',
          },
          orgId: 'd7d931d4-289d-49b1-bd88-29d0317b6987',
          deletedBy: null,
          deletedAt: null,
          updatedBy: null,
          updatedAt: '2021-12-15T03:43:00.789Z',
          ibLocationType: {
            name: 'Warehouse',
          },
          ibLocationTypeId: 'e53bcc24-4cdb-11ec-81d3-0242ac130003',
          capacity: null,
          phoneNumber: null,
          address: {
            street1: 'Koelpin Lodge',
            street2: 'Ana Tunnel',
            city: 'Carsonside',
            state: 'Maine',
            zipCode: '44431',
            country: 'Guatemala',
          },
          geoCode: {
            latitude: 0.181,
            longitude: 47.7937,
          },
          //  "geoCode": null
        },
        {
          id: 'e53bec7c-4cdb-11ec-81d3-0242ac130003',
          status: 'Incomplete',
          name: 'Bossier City - 13',
          externalId: '486d4838-bb19-4b29-b4d0-1b492762ebe8',
          ownerId: '494bd1c4-6d28-4a42-9d98-515129fde2b9',
          owner: {
            id: '494bd1c4-6d28-4a42-9d98-515129fde2b9',
          },
          orgId: 'd7d931d4-289d-49b1-bd88-29d0317b6987',
          deletedBy: null,
          deletedAt: null,
          updatedBy: null,
          updatedAt: '2021-12-15T03:43:00.790Z',
          ibLocationType: {
            name: 'Hospital',
          },
          ibLocationTypeId: 'e53bbf40-4cdb-11ec-81d3-0242ac130003',
          capacity: null,
          phoneNumber: null,
          address: {
            street1: 'Lakin Throughway',
            street2: 'Zulauf Island',
            city: 'Casa Grande',
            state: 'Illinois',
            zipCode: '68798',
            country: 'Mayotte',
          },
          geoCode:{
            latitude:84.2091,
            longitude:147.886
          }
          // geoCode: null,
        },
        {
          id: 'f14e81b4-e932-4d8e-900e-bfbff065aa0e',
          status: 'Incomplete',
          name: 'loc3',
          externalId: 'locId3',
          ownerId: 'db1a73a2-498b-43c8-9185-424cda7ea272',
          owner: {
            id: 'db1a73a2-498b-43c8-9185-424cda7ea272',
          },
          orgId: 'd7d931d4-289d-49b1-bd88-29d0317b6987',
          deletedBy: null,
          deletedAt: null,
          updatedBy: null,
          updatedAt: '2021-12-15T03:48:14.815Z',
          ibLocationType: null,
          ibLocationTypeId: null,
          capacity: 0,
          phoneNumber: 0,
          address: {
            street1: 'add1',
            street2: '',
            city: '',
            state: '',
            zipCode: '',
            country: 'Anguilla',
          },
          geoCode: null,
        },
        {
          id: '9ceb84ec-aaeb-43af-9b26-11d8ae360625',
          status: 'Incomplete',
          name: 'loc2',
          externalId: 'locId2',
          ownerId: 'db1a73a2-498b-43c8-9185-424cda7ea272',
          owner: {
            id: 'db1a73a2-498b-43c8-9185-424cda7ea272',
          },
          orgId: 'd7d931d4-289d-49b1-bd88-29d0317b6987',
          deletedBy: null,
          deletedAt: null,
          updatedBy: null,
          updatedAt: '2021-12-15T03:45:12.722Z',
          ibLocationType: null,
          ibLocationTypeId: null,
          capacity: 0,
          phoneNumber: 0,
          address: {
            street1: 'add1',
            street2: '',
            city: '',
            state: '',
            zipCode: '',
            country: 'Albania',
          },
          geoCode: null,
        },
        {
          id: '74b322b3-525f-4e76-b002-2997e9a9a8e1',
          status: 'Incomplete',
          name: 'loc5',
          externalId: 'locId5',
          ownerId: 'db1a73a2-498b-43c8-9185-424cda7ea272',
          owner: {
            id: 'db1a73a2-498b-43c8-9185-424cda7ea272',
          },
          orgId: 'd7d931d4-289d-49b1-bd88-29d0317b6987',
          deletedBy: null,
          deletedAt: null,
          updatedBy: null,
          updatedAt: '2021-12-15T03:57:41.612Z',
          ibLocationType: null,
          ibLocationTypeId: null,
          capacity: 0,
          phoneNumber: 0,
          address: {
            street1: 'add',
            street2: '',
            city: '',
            state: '',
            zipCode: '',
            country: 'Anguilla',
          },
          geoCode: null,
        },
        {
          id: '125b0fc8-b91a-42b2-90b3-c37b9afdfa36',
          status: 'Incomplete',
          name: 'loc1',
          externalId: 'locId1',
          ownerId: 'db1a73a2-498b-43c8-9185-424cda7ea272',
          owner: {
            id: 'db1a73a2-498b-43c8-9185-424cda7ea272',
          },
          orgId: 'd7d931d4-289d-49b1-bd88-29d0317b6987',
          deletedBy: null,
          deletedAt: null,
          updatedBy: null,
          updatedAt: '2021-12-15T03:43:34.697Z',
          ibLocationType: null,
          ibLocationTypeId: null,
          capacity: 0,
          phoneNumber: 0,
          address: {
            street1: 'add1',
            street2: '',
            city: '',
            state: '',
            zipCode: '',
            country: 'Albania',
          },
          geoCode: null,
        },
        {
          id: '3375b2d3-13cd-401c-b79b-21cbdb956b15',
          status: 'Incomplete',
          name: 'loc7',
          externalId: 'locId7',
          ownerId: 'db1a73a2-498b-43c8-9185-424cda7ea272',
          owner: {
            id: 'db1a73a2-498b-43c8-9185-424cda7ea272',
          },
          orgId: 'd7d931d4-289d-49b1-bd88-29d0317b6987',
          deletedBy: null,
          deletedAt: null,
          updatedBy: null,
          updatedAt: '2021-12-15T04:02:11.694Z',
          ibLocationType: null,
          ibLocationTypeId: null,
          capacity: 0,
          phoneNumber: 0,
          address: {
            street1: 'add',
            street2: '',
            city: '',
            state: '',
            zipCode: '',
            country: 'Albania',
          },
          geoCode: null,
        },
        {
          id: '76af916a-d42c-43a8-a945-3832bb9a4047',
          status: 'Incomplete',
          name: 'loc6',
          externalId: 'locId6',
          ownerId: 'b9e7b94f-d3a7-460d-afb7-34e277df3aec',
          owner: {
            id: 'b9e7b94f-d3a7-460d-afb7-34e277df3aec',
          },
          orgId: 'd7d931d4-289d-49b1-bd88-29d0317b6987',
          deletedBy: null,
          deletedAt: null,
          updatedBy: null,
          updatedAt: '2021-12-15T04:00:02.946Z',
          ibLocationType: null,
          ibLocationTypeId: null,
          capacity: 0,
          phoneNumber: 0,
          address: {
            street1: 'add',
            street2: '',
            city: '',
            state: '',
            zipCode: '',
            country: 'Albania',
          },
          geoCode: null,
        },
        {
          id: 'cf688233-f48d-4566-a4e9-5f208d6afb71',
          status: 'Incomplete',
          name: 'loc4',
          externalId: 'locId4',
          ownerId: 'db1a73a2-498b-43c8-9185-424cda7ea272',
          owner: {
            id: 'db1a73a2-498b-43c8-9185-424cda7ea272',
          },
          orgId: 'd7d931d4-289d-49b1-bd88-29d0317b6987',
          deletedBy: null,
          deletedAt: null,
          updatedBy: null,
          updatedAt: '2021-12-15T03:53:28.203Z',
          ibLocationType: null,
          ibLocationTypeId: null,
          capacity: 0,
          phoneNumber: 0,
          address: {
            street1: 'add1',
            street2: '',
            city: '',
            state: '',
            zipCode: '',
            country: 'Albania',
          },
          geoCode: null,
        },
      ],
    },
  };

const testData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(test_data); //test_data = Your data.
  }, 1000);
});

现在您有了一个解析为您的数据的 promise，您可以使用它来获取建议和结果。

const customSearchSource = new SearchSource({
  placeholder: 'Search',
  getSuggestions: (params) => {
    return testData.then((data) => {
      var results = [];
      var toSearch = params.suggestTerm;
      data = data["allIBLocations"]["data"];

      for(var i=0; i<data.length; i++) {
        if(data[i]["name"].indexOf(toSearch)!=-1) {
          results.push(data[i]);
        }
      }
      return results.map((feature) => {
        return {
          key: "name",
          text: feature.name,
          sourceIndex: params.sourceIndex
        };
      })
    });
  },
  getResults: (params) => {
    return testData.then((data) => {
      var results = [];
      var toSearch = params.suggestResult.text;
      data = data["allIBLocations"]["data"];
      for(var i=0; i<data.length; i++) {
        if(data[i]["name"].indexOf(toSearch)!=-1) {
          results.push(data[i]);
        }}
      
      const searchResults = results.map((feature) => {
        console.log(feature)
        const graphic = new Graphic({
          geometry: new Point({
            latitude: feature.geoCode.latitude,
            longitude: feature.geoCode.longitude
          }),
          attributes: feature.address
        });
        const buffer = geometryEngine.geodesicBuffer(
          graphic.geometry,
          100,
          "meters"
        );
        const searchResult = {
          extent: buffer.extent,
          feature: graphic,
          name: feature["name"]
        };
        return searchResult;
      });
      return searchResults;
    });
  }
});

最后将 customSearchSource 设置为 searchWidget 中的源，同时禁用默认源以强制 searchWidget 使用您提供的源.

const searchWidget = new Search({
  view: view,
  sources: [customSearchSource],
  includeDefaultSources: false
});

Live Demo