logo标签列表

如何在ArcGIS esri搜索中输入查询？

javascriptreactjsesriarcgis-js-api
4
我可以帮助您翻译这段内容。这是一篇关于编程的问题，询问如何禁用ArcGIS搜索小部件的默认搜索功能并应用自己的查询。以下是需要翻译的内容：

我在搜索中有自己的查询，如何禁用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中的示例搜索小部件，我希望覆盖搜索功能，只能搜索我的查询数据，并且它将像图片中显示的那样出现。

enter image description here

资源

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

默认的搜索行为是什么？你想要替换它的行为是什么？ - K450
在arcGIS搜索小部件中已经有一个搜索功能，如果您尝试输入内容，会出现建议。我想要覆盖它。我想使用我的查询来覆盖搜索功能，但我不知道如何覆盖它。 - user15404864
@K450 我刚刚更新了问题。 - user15404864
你尝试过将一个数组提供给suggestions属性吗？ - K450
等一下，你想覆盖搜索的源吗？就像用户只能从您提供的数据中进行搜索？ - K450
显示剩余3条评论
2个回答
2
您需要创建一个自定义的SearchSource，从您的数据中提取建议和结果，并将其设置为searchWidget的来源。
需要实现的内容：
  • SearchSource - 使用您的数据的搜索源。
    • getSuggestions [返回promise] - 提供来自您的源的建议列表
    • getResults [返回promise] - 提供来自您的源的搜索结果列表。
实现方法：

我修改了官方文档提供的带有自定义源的搜索小部件的示例代码

如您所见，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
});

现场演示

0

您需要使用ArcGIS JS API创建自定义源，并将其添加为源，同时将标志设置为includeDefaultSources为false，以便仅使用您的源。

https://developers.arcgis.com/javascript/latest/sample-code/widgets-search-customsource/

在这里有一个 CodePen 的例子：https://codepen.io/pen?editors=1000 请注意，他们是如何添加自定义源并在搜索小部件实例化时将其作为源添加到其中的。
        // Create Search widget using custom SearchSource
        const searchWidget = new Search({
          view: view,
          sources: [ customSearchSource ],
          includeDefaultSources: false
        });

您可以在这里找到有关如何创建自定义源的文档https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search-SearchSource.html。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接