Search 微件提供了一种对定位器服务、地图/要素服务要素图层、具有关联要素图层的 SceneLayers、具有关联要素图层的 BuildingComponentSublayer、GeoJSONLayer、CSVLayer、OGCFeatureLayer 和表执行搜索操作的方法。如果将定位器与地理编码服务配合使用,则使用 findAddressCandidates 操作,而查询用于要素图层。
默认情况下,Search 微件使用 GeoScene 地理编码服务,地址为:https://www.geosceneonline.cn/geocode/rest/GeoScene/GeocodeServer
。
默认情况下,Search 微件设置搜索结果的视图。视图中心的详细程度 (LOD) 取决于数据源,更高质量的数据源返回的范围更接近从搜索中获得的 feature
。要在 Search 结果中手动定义视图的比例,请使用 LocatorSearchSource 或 LayerSearchSource 的 zoomScale
属性。
Search 微件结果通常根据它们与搜索的相关性及其相对重要性进行排序。但是,当 MapView 或 SceneView 的比例小于或等于 300,000 时,操作支持通过传入 location
参数,根据候选项与指定点 (视图中心) 的距离对候选项进行优先级排序。最接近输入位置的要素显示在结果列表中的较高位置。可以使用 localSearchDisabled 属性更改此行为。
- 另请参阅
const searchWidget = new Search({
view: view
});
// Adds the search widget below other elements in
// the top left corner of the view
view.ui.add(searchWidget, {
position: "top-left",
index: 2
});
构造函数
属性概述
属性详细信息
-
activeMenu String
-
Search 微件的当前活动菜单。
可能值:"none"|"suggestion"|"source"|"warning"
- 默认值:none
-
-
当前选定的源对象。可以是 LayerSearchSource 或 LocatorSearchSource。
- 默认值:null
-
activeSourceIndex Number
-
所选源的索引。选择所有源时,此值是
-1
。- 默认值:0
-
allPlaceholder String
-
在多个源上搜索时,用作输入文本提示的字符串值。请参阅下图,查看此文本在微件上下文中的位置和样式。
- 默认值:"Find address or place"
-
allSources Collection<(LayerSearchSource|LocatorSearchSource)>readonly起始版本:GeoScene Maps SDK for JavaScript 4.8
-
defaultSources 和 sources 的组合集合。defaultSources 首先显示在搜索 UI 中。
-
autoSelect Boolean
-
指示是否自动选择并缩放到第一个地理编码结果。如果为
false
,则 findAddressCandidates 操作仍将对输入字符串进行地理编码,但不会选择顶部结果。要使用地理编码结果,您可以设置 search-complete 事件处理程序并通过事件对象获取结果。- 默认值:true
-
-
包含微件的 DOM 元素的 ID 或节点。此属性只能设置一次。以下示例都是使用微件时的有效用例。
示例// Create the HTML div element programmatically at runtime and set to the widget's container const basemapGallery = new BasemapGallery({ view: view, container: document.createElement("div") }); // Add the widget to the top-right corner of the view view.ui.add(basemapGallery, { position: "top-right" });
// Specify an already-defined HTML div element in the widget's container const basemapGallery = new BasemapGallery({ view: view, container: basemapGalleryDiv }); // Add the widget to the top-right corner of the view view.ui.add(basemapGallery, { position: "top-right" }); // HTML markup <body> <div id="viewDiv"></div> <div id="basemapGalleryDiv"></div> </body>
// Specify the widget while adding to the view's UI const basemapGallery = new BasemapGallery({ view: view }); // Add the widget to the top-right corner of the view view.ui.add(basemapGallery, { position: "top-right" });
-
起始版本:GeoScene Maps SDK for JavaScript 4.7
-
类的名称。声明的类名称格式化为
geoscene.folder.className
。
-
defaultSources Collection<(LayerSearchSource|LocatorSearchSource)>readonly起始版本:GeoScene Maps SDK for JavaScript 4.8
-
一个只读属性,它是 LayerSearchSource 和/或 LocatorSearchSource 的集合。此属性可能包含 GeoScene Portal 定位器,以及任何 web 地图或 web 场景可配置的搜索源。web 地图或 web 场景可能包含地图/要素服务要素图层或表作为源。
如果未设置源属性,则此属性用于填充 Search UI。
-
disabled Boolean起始版本:GeoScene Maps SDK for JavaScript 4.15
-
为 true 时,在视图上禁用微件,并且无法与之交互。
- 默认值:false
-
goToOverride GoToOverride起始版本:GeoScene Maps SDK for JavaScript 4.8
-
此函数提供了覆盖 MapView goTo() 或 SceneView goTo() 方法的能力。
示例// The following snippet uses the Search widget but can be applied to any // widgets that support the goToOverride property. search.goToOverride = function(view, goToParams) { goToParams.options.duration = updatedDuration; return view.goTo(goToParams.target, goToParams.options); };
-
iconClass String起始版本:GeoScene Maps SDK for JavaScript 4.7
-
微件的默认 CSS 图标类。
-
创建微件时分配给微件的唯一 ID。如果不是由开发人员设置的,它将默认为容器 Id,或者如果没有容器 ID,则将自动生成。
-
起始版本:GeoScene Maps SDK for JavaScript 4.8
-
指示是否在 Search 微件 UI 中包含 defaultSources。这可以是布尔值或返回搜索源数组的函数。
- 默认值:true
示例// includeDefaultSources passed as a boolean value const searchWidget = new Search({ view: view, sources: [customSearchSource], includeDefaultSources: false }); // includeDefaultSources passed as a function const searchWidget = new Search({ view: view, sources: [customSearchSource], includeDefaultSources: function(sourcesResponse) { return sourcesResponse.defaultSources; } });
-
label String起始版本:GeoScene Maps SDK for JavaScript 4.7
-
微件的默认标注。
-
locationEnabled Boolean起始版本:GeoScene Maps SDK for JavaScript 4.6
-
在微件中启用定位服务。
仅在安全源上支持使用此属性。要使用它,请将您的应用程序切换到安全源,例如 HTTPS。请注意,localhost 被认为是“潜在安全的”,可用于在支持 Window.isSecureContext (当前为 Chrome 和 Firefox) 的浏览器中轻松测试。
- 默认值:true
-
maxResults Number
-
如果源未指定,则为微件返回的最大结果数。
- 默认值:6
-
maxSuggestions Number
-
如果源未指定,则为微件返回的最大建议数。
如果使用默认的 GeoScene Online 地理编码服务,则默认值仍为
5
。- 默认值:6
-
minSuggestCharacters Number
-
如果源未指定,则为搜索所需的最小字符数。
- 默认值:3
-
popupEnabled Boolean
-
- 默认值:true
-
popupTemplate PopupTemplate
-
所选要素的自定义 PopupTemplate。请注意,在 allSources 上定义的任何模板都优先于直接在模板上定义的模板。
-
portal Portal起始版本:GeoScene Maps SDK for JavaScript 4.8
-
可以搜索指定门户实例的定位器服务,使用此属性可将此 GeoScene Portal 实例设置为搜索。
-
resultGraphic Graphicreadonly
-
-
resultGraphicEnabled Boolean
-
指示 resultGraphic 是否将显示在所选要素的位置处。
- 默认值:true
-
一个对象数组,每个对象都包含搜索中的 SearchResult。
-
searchAllEnabled Boolean
-
指示是否显示搜索所有源的选项。为
true
时,默认情况下显示 "All” 选项:为
false
时,一次搜索所有源的选项不可用:- 默认值:true
-
searchTerm String
-
搜索框输入文本字符串的值。
-
selectedResult SearchResultreadonly
-
从搜索中选择的结果。
-
sources Collection<SearchSource>autocast
-
Search 微件可用于搜索地图/要素服务要素图层、具有关联要素图层的 SceneLayers、具有关联要素图层的 BuildingComponentSublayer、OGCFeatureLayer 或表中的要素,或具有定位器的地理编码位置。
sources
属性可定义要从中搜索由 Search 微件实例指定的 view 的源。有两种类型的源:这些源的任意组合均可在 Search 微件的同一实例中一起使用。
不支持从客户端图形创建的要素图层。
示例// Default sources[] when sources is not specified [ { url: "https://geocode-api.arcgis.com/geoscene/rest/services/World/GeocodeServer", singleLineFieldName: "SingleLine", outFields: ["Addr_type"], name: "GeoScene World Geocoding Service", placeholder: "Address", resultSymbol: { type: "picture-marker", // autocasts as new PictureMarkerSymbol() url: this.basePath + "/images/search/search-symbol-32.png", size: 24, width: 24, height: 24, xoffset: 0, yoffset: 0 } } ]
// Example of multiple sources[] const sources = [ { url: "https://geocode-api.arcgis.com/geoscene/rest/services/World/GeocodeServer", singleLineFieldName: "SingleLine", name: "Custom Geocoding Service", placeholder: "Search Geocoder", maxResults: 3, maxSuggestions: 6, suggestionsEnabled: false, minSuggestCharacters: 0 }, { layer: new FeatureLayer({ url: "https://services.arcgis.com/DO4gTjwJVIJ7O9Ca/geoscene/rest/services/GeoForm_Survey_v11_live/FeatureServer/0", outFields: ["*"] }), searchFields: ["Email", "URL"], displayField: "Email", exactMatch: false, outFields: ["*"], name: "Point FS", placeholder: "example: geoscene", maxResults: 6, maxSuggestions: 6, suggestionsEnabled: true, minSuggestCharacters: 0 }, { layer: new FeatureLayer({ outFields: ["*"] }), placeholder: "esri", name: "A FeatureLayer", prefix: "", suffix: "", maxResults: 1, maxSuggestions: 6, exactMatch: false, searchFields: [], // defaults to FeatureLayer.displayField displayField: "", // defaults to FeatureLayer.displayField minSuggestCharacters: 0 } ];
// Set source(s) on creation const searchWidget = new Search({ sources: [] });
// Set source(s) const searchWidget = new Search(); const sources = [{ ... }, { ... }, { ... }]; //array of sources searchWidget.sources = sources;
// Add to source(s) const searchWidget = new Search(); searchWidget.sources.push({ ... }); //new source
-
suggestions SuggestResult[]readonly
-
来自建议方法的结果数组。
如果使用具有建议加载功能的 1.3 或更高版本的地理编码服务,或支持分页 (即
supportsPagination = true
) 的 1.3 或更高版本的要素图层,则可以使用此功能。
-
suggestionsEnabled Boolean
-
为微件启用建议。
仅当使用具有建议加载功能的 1.3 或更高版本的地理编码服务,或支持分页 (即
supportsPagination = true
) 的 1.3 或更高版本的要素图层,可使用此功能。- 默认值:true
-
viewModel SearchViewModelautocast
-
此微件的视图模型。此类包含控制此微件行为的所有逻辑。请参阅 SearchViewModel 类来访问微件上的所有属性和方法。
-
指示微件是否可见。
如果为
false
,微件将不再呈现在 web 文档中。这可能会影响文档中其他元素或微件的布局。例如,如果此微件是与视图 UI 右上角关联的三个微件中的第一个,则当此微件不可见时,其他微件将重新定位。有关更多信息,请参阅 CSS display 值"none"
。- 默认值:true
示例// Hides the widget in the view widget.visible = false;
方法概述
名称 | 返回值类值 | 描述 | 类 |
---|---|---|---|
添加一个或多个与对象的生命周期相关联的句柄。 更多详情 | Accessor | ||
取消微件文本输入的焦点。 更多详情 | Search | ||
String | 用于为微件的 | Widget | |
清除当前 searchTerm、搜索结果、建议结果、图形和图形图层。 更多详情 | Search | ||
销毁微件实例。 更多详情 | Widget | ||
Boolean | 在实例上触发事件。 更多详情 | Widget | |
将焦点放在微件的文本输入上。 更多详情 | Search | ||
Boolean | 指示实例上是否存在与提供的事件名称相匹配的事件监听器。 更多详情 | Widget | |
Boolean | 如果存在指定的句柄组,则返回 true。 更多详情 | Accessor | |
Boolean |
| Widget | |
Boolean |
| Widget | |
Boolean |
| Widget | |
Object | 在实例上注册事件处理程序。 更多详情 | Widget | |
添加一个或多个与微件的生命周期相关联的句柄。 更多详情 | Widget | ||
此方法主要由开发人员在实现自定义微件时使用。 更多详情 | Widget | ||
移除对象拥有的句柄组。 更多详情 | Accessor | ||
Object | 此方法主要由开发人员在实现自定义微件时使用。 更多详情 | Widget | |
立即将微件渲染到 DOM。 更多详情 | Widget | ||
此方法主要由开发人员在实现自定义微件时使用。 更多详情 | Widget | ||
Promise<SearchResponse> | 根据指定的源,search() 可查询要素图层或使用任何指定的 locator(s) 执行地址匹配并返回任何适用结果。 更多详情 | Search | |
Promise<SuggestResponse> | 在活动定位器上执行 suggest() 请求。 更多详情 | Search | |
Promise | 一旦创建了类的实例,就可以使用 | Widget |
方法详细说明
-
addHandles(handleOrHandles, groupKey)inherited起始版本:GeoScene Maps SDK for JavaScript 4.25
-
添加一个或多个与对象的生命周期相关联的句柄。当对象被销毁时,将移除句柄。
// Manually manage handles const handle = reactiveUtils.when( () => !view.updating, () => { wkidSelect.disabled = false; }, { once: true } ); // Handle gets removed when the object is destroyed. this.addHandles(handle);
参数handleOrHandles WatchHandle|WatchHandle[]对象销毁后,标记为要移除的句柄。
groupKey *optional标识句柄应添加到的组的键。组中的所有句柄稍后都可使用 Accessor.removeHandles() 进行删除。如果未提供键,则句柄将被添加到默认组。
-
blur()
-
取消微件文本输入的焦点。
-
起始版本:GeoScene Maps SDK for JavaScript 4.7
-
用于为微件的
class
属性构建值的实用方法。这有助于简化 CSS 类设置。参数repeatable 类名称。
返回类型 描述 String 计算的类名。 - 另请参阅
示例// .tsx syntax showing how to set CSS classes while rendering the widget render() { const dynamicIconClasses = { [CSS.myIcon]: this.showIcon, [CSS.greyIcon]: !this.showIcon }; return ( <div class={classes(CSS.root, CSS.mixin, dynamicIconClasses)} /> ); }
-
clear()
-
清除当前 searchTerm、搜索结果、建议结果、图形和图形图层。它还会隐藏任何打开的菜单。
-
destroy()inherited
-
销毁微件实例。
-
起始版本:GeoScene Maps SDK for JavaScript 4.5
-
在实例上触发事件。仅当创建此类的子类时,才应使用此方法。
参数type String事件的名称。
event Objectoptional事件有效负载。
返回类型 描述 Boolean 如果监听器收到通知,则为 true
-
focus()
-
将焦点放在微件的文本输入上。
-
起始版本:GeoScene Maps SDK for JavaScript 4.25
-
如果存在指定的句柄组,则返回 true。
参数groupKey *optional组键。
返回类型 描述 Boolean 如果存在指定的句柄组,则返回 true
。示例// Remove a named group of handles if they exist. if (obj.hasHandles("watch-view-updates")) { obj.removeHandles("watch-view-updates"); }
-
起始版本:GeoScene Maps SDK for JavaScript 4.19
-
isFulfilled()
可用于验证创建类的实例是否已完成 (已解决或已拒绝)。如果满足,则返回true
。返回类型 描述 Boolean 指示创建类的实例是否已完成 (已解决或已拒绝)。
-
起始版本:GeoScene Maps SDK for JavaScript 4.19
-
isRejected()
可用于验证创建类的实例是否被拒绝。如果被拒绝,则返回true
。返回类型 描述 Boolean 指示创建类的实例是否已被拒绝。
-
起始版本:GeoScene Maps SDK for JavaScript 4.19
-
isResolved()
可用于验证创建类的实例是否已解决。如果已解决,则返回true
。返回类型 描述 Boolean 指示创建类的实例是否已解决。
-
在实例上注册事件处理程序。调用此方法将事件与监听器挂钩。
参数要侦听的事件或者事件数组。
listener Function事件触发时要调用的函数。
返回类型 描述 Object 返回具有 remove()
方法的事件处理程序,可调用该方法来停止侦听事件。属性 类型 描述 remove Function 调用时,从事件中移除侦听器。 示例view.on("click", function(event){ // event is the event handle returned after the event fires. console.log(event.mapPoint); });
-
own(handleOrHandles)inherited起始版本:GeoScene Maps SDK for JavaScript 4.24
-
添加一个或多个与微件的生命周期相关联的句柄。当微件被销毁时,将移除句柄。
const handle = reactiveUtils.when( () => !view.updating, () => { wkidSelect.disabled = false; }, { once: true} ); this.own(handle); // Handle gets removed when the widget is destroyed.
参数handleOrHandles WatchHandle|WatchHandle[]微件销毁后,标记为要移除的句柄。
-
postInitialize()inherited
-
此方法主要由开发人员在实现自定义微件时使用。在微件准备好渲染后执行。
-
removeHandles(groupKey)inherited起始版本:GeoScene Maps SDK for JavaScript 4.25
-
移除对象拥有的句柄组。
参数groupKey *optional要移除的组键或组键的数组或集合。
示例obj.removeHandles(); // removes handles from default group obj.removeHandles("handle-group"); obj.removeHandles("other-handle-group");
-
此方法主要由开发人员在实现自定义微件时使用。它必须由子类实现以进行渲染。
返回类型 描述 Object 渲染的虚拟节点。
-
renderNow()inherited
-
立即将微件渲染到 DOM。
-
scheduleRender()inherited
-
此方法主要由开发人员在实现自定义微件时使用。计划微件渲染。此方法对于影响 UI 的更改非常有用。
-
search(searchTerm){Promise<SearchResponse>}
-
根据指定的源,search() 可查询要素图层或使用任何指定的 locator(s) 执行地址匹配并返回任何适用结果。
参数optional 此 searchTerm 可以是字符串、几何、建议候选对象或 [longitude,latitude] 坐标对数组。如果提供了几何,则它将反向地理编码 (定位器) 或使用几何而非文本执行 findAddressCandidates。
返回类型 描述 Promise<SearchResponse> 解析后,返回包含 SearchResult 的 SearchResponse。
-
suggest(value){Promise<SuggestResponse>}
-
在活动定位器上执行 suggest() 请求。它还使用微件的当前值或传入的值。
如果使用具有建议加载功能的 1.3 或更高版本的地理编码服务,或支持分页 (即
supportsPagination = true
) 的 1.3 或更高版本的要素图层,则可使用建议。参数value Stringoptional用于活动定位器或要素图层上 suggest() 的字符串值。如果没有传入任何内容,则使用微件的当前值。
返回类型 描述 Promise<SuggestResponse> 解析后,返回包含结果对象数组的 SuggestResponse。这些结果中的每一个都包含 SuggestResult。
-
起始版本:GeoScene Maps SDK for JavaScript 4.19
-
一旦创建了类的实例,就可以使用
when()
。此方法接受两个输入参数:callback
函数和errback
函数。callback
在类的实例加载时执行。errback
在类的实例无法加载时执行。参数callback Functionoptional当 promise 解决时调用的函数。
errback Functionoptional当 promise 失败时执行的函数。
返回类型 描述 Promise 为 callback
结果返回一个新的 promise。示例// Although this example uses the BasemapGallery widget, any class instance that is a promise may use when() in the same way let bmGallery = new BasemapGallery(); bmGallery.when(function(){ // This function will execute once the promise is resolved }, function(error){ // This function will execute if the promise is rejected due to an error });
类型定义
-
SearchResponse
-
解决后,在调用 search 后返回此响应。
-
SearchResult
-
从 search() 返回的结果对象。
- 属性
-
extent Extent
返回要素的范围或边界框。该值取决于数据源,更高质量的数据源返回的范围更接近从搜索中获得的
feature
。feature Graphic从搜索中获得的结果要素或位置。
name String结果的名称。
target Graphic结果的目标,它是用于 MapView goTo() 或 SceneView goTo() 导航的图形。
-
SuggestResponse
-
解决后,在调用 suggest 后返回此响应。
-
SuggestResult
-
从 suggest() 返回的结果对象。
事件概述
名称 | 类型 | 描述 | 类 |
---|---|---|---|
当微件的文本输入失去焦点时触发。 更多详情 |
Search | ||
从输入框中清除结果或选择新结果时触发。 更多详情 |
Search | ||
{activeSourceIndex: Number,errors: Error[],numResults: Number,searchTerm: String,results: Object[],results.results: SearchResult[],results.sourceIndex: Number,results.source: Object} |
在调用 search() 方法时触发并返回其结果。 更多详情 |
Search | |
当微件的文本输入设置焦点时触发。 更多详情 |
Search | ||
在启动 search() 方法时触发。 更多详情 |
Search | ||
{result: Object,result.extent: Extent,result.feature: Graphic,result.name: String,source: Object,sourceIndex: Number} |
选择搜索结果时触发。 更多详情 |
Search | |
{activeSourceIndex: Number,errors: Error[],numResults: Number,searchTerm: String,results: Object[],results.results: SuggestResult[],results.sourceIndex: Number,results.source: Object} |
在调用 suggest 方法时触发并返回其结果。 更多详情 |
Search | |
在启动 suggest() 方法时触发。 更多详情 |
Search |
事件详细说明
-
search-blur
-
当微件的文本输入失去焦点时触发。
示例const searchWidget = new Search(); searchWidget.on("search-blur", function(event){ console.log("Focus removed from search input textbox."); });
-
search-clear
-
从输入框中清除结果或选择新结果时触发。
示例const searchWidget = new Search(); searchWidget.on("search-clear", function(event){ console.log("Search input textbox was cleared."); });
-
search-complete
-
在调用 search() 方法时触发并返回其结果。
- 属性
-
activeSourceIndex Number
从中获取搜索结果的源的索引。
从搜索结果返回的错误对象的数组。
numResults Number搜索结果的数量。
searchTerm String搜索的表达式。
表示搜索结果的对象数组。有关结果对象的详细信息,请参阅下面的对象规范表。
- 规范
-
results SearchResult[]
包含搜索结果的对象的数组。
sourceIndex Number当前所选源的索引。
source Object所选结果的源。
示例const searchWidget = new Search(); searchWidget.on("search-complete", function(event){ // The results are stored in the event Object[] console.log("Results of the search: ", event); });
-
search-focus
-
当微件的文本输入设置焦点时触发。
示例const searchWidget = new Search(); searchWidget.on("search-focus", function(event){ console.log("Search input textbox is focused."); });
-
search-start
-
在启动 search() 方法时触发。
示例const searchWidget = new Search(); searchWidget.on("search-start", function(event){ console.log("Search started."); });
-
select-result
-
选择搜索结果时触发。
示例const searchWidget = new Search(); searchWidget.on("select-result", function(event){ console.log("The selected search result: ", event); });
-
suggest-complete
-
在调用 suggest 方法时触发并返回其结果。
- 属性
-
activeSourceIndex Number
从中获取建议的源的索引。选择所有源时,此值是
-1
。从建议结果返回的错误对象数组。
numResults Number建议结果的数量。
searchTerm String用于建议的搜索表达式。
表示建议结果的对象数组。有关此对象的详细信息,请参阅下面的对象规范表。
- 规范
-
results SuggestResult[]
包含建议结果的对象数组。
sourceIndex Number当前所选源的索引。
source Object所选结果的源。
示例const searchWidget = new Search(); searchWidget.on("suggest-complete", function(event){ // The results are stored in the event Object[] console.log("Results of suggest: ", event); });
-
suggest-start
-
在启动 suggest() 方法时触发。
示例const searchWidget = new Search(); searchWidget.on("suggest-start", function(event){ console.log("suggest-start", event); });