如何在 ArcGIS esri 搜索中放置查询？
Posted
技术标签:
【中文标题】如何在 ArcGIS esri 搜索中放置查询？【英文标题】：How to put queries in ArcGIS esri search? 【发布时间】：2022-01-16 15:23:58 【问题描述】：我在搜索中有自己的查询，如何禁用 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
【问题讨论】：
什么是默认搜索行为以及您想要什么行为来代替它？ 在 arcGIS 搜索小部件中已经有一个搜索功能，如果您尝试键入，则会出现一个建议，我想覆盖它。我想使用我的查询覆盖搜索功能，但我不知道如何覆盖它 @K450 我刚刚更新了问题 你试过为suggestions属性提供一个数组吗？
@K450，没有。我不知道怎么做。我不知道如何覆盖建议
【参考方案1】：
您需要创建一个自定义SearchSource，从您的数据中提取建议和结果，并将其设置为您的searchWidget 的来源。
你需要实现的东西：
SearchSource - 使用您的数据的搜索源。
getSuggestions [returns promise] - 提供来自您的来源的建议列表
getResults [returns 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 ***s',
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
【讨论】：
【参考方案2】：您必须使用 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 找到有关如何制作 customSource 的文档
【讨论】：
以上是关于如何在 ArcGIS esri 搜索中放置查询？的主要内容，如果未能解决你的问题，请参考以下文章