搜索微件提供了一种对定位器服务、地图/要素服务要素图层、具有关联要素图层的 SceneLayers、具有关联要素图层的 BuildingComponentSublayer、GeoJSONLayer、CSVLayer、OGCFeatureLayer 和/或表执行搜索操作的方法。如果将定位器与地理编码服务配合使用,则使用 findAddressCandidates 操作,而 查询 用于要素图层。
默认情况下,搜索微件使用 GeoScene Online地理编码服务:https://www.geosceneonline.cn/geocode/rest/GeoScene/GeocodeServer
。也可以使用 LocatorSearchSource ,此时搜索微件将使用由 LocatorSearchSource.url 属性定义的 URL进行搜索。
搜索微件用于设置搜索结果的视图。视图中心的详细程度(LOD)取决于数据源,质量较高的数据源返回的范围更接近从搜索中获得的 feature
。要在搜索结果中手动定义视图的比例,请使用 LocatorSearchSource 或 LayerSearchSource 的 zoomScale
属性。
搜索微件结果通常根据其与搜索的相关性和相对重要性进行排序。但是,当 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
-
搜索微件的当前活动菜单。
可能的值:"none"|"suggestion"|"source"|"warning"
- 默认值:none
-
-
当前选定的源对象。可以是 LayerSearchSource 或 LocatorSearchSource。
- 默认值:null
-
activeSourceIndex Number
-
所选源的索引。此值是
-1
在选择所有源时。- 默认值:0
-
allPlaceholder String
-
在多个源上搜索时用作输入文本提示的字符串值。请参阅下图,查看此文本在微件上下文中的位置和样式。
- 默认值:"Find address or place"
-
allSources Collection<(LayerSearchSource|LocatorSearchSource)>readonly起始版本:GeoScene API for JavaScript 4.8
-
defaultSources 和源的组合集合。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 API for JavaScript 4.7
-
类的名称。声明的类名格式为
geoscene.folder.className
。
-
defaultSources Collection<(LayerSearchSource|LocatorSearchSource)>readonly起始版本:GeoScene API for JavaScript 4.8
-
一个只读属性,它是 LayerSearchSource 和/或 LocatorSearchSource的集合。此属性可能包含 GeoScene Portal 定位器以及任何 web 地图或 web 场景可配置的搜索源。Web 地图或 web 场景可能包含地图/要素服务要素图层和/或表作为源。
如果未设置源属性,则此属性用于填充搜索 UI。
-
disabled Boolean起始版本:GeoScene API for JavaScript 4.15
-
如果为 true,则微件在视觉上被撤回,并且无法与之交互。
- 默认值:false
-
goToOverride GoToOverride起始版本:GeoScene API 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 API for JavaScript 4.7
-
微件的默认 CSS 图标类。
-
创建微件时分配给构件的唯一 ID。如果未由开发人员设置,它将默认为容器 ID,或者如果不存在,则将自动生成。
-
起始版本:GeoScene API for JavaScript 4.8
-
指示是否在搜索 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 API for JavaScript 4.7
-
微件的默认标注。
-
locationEnabled Boolean起始版本:GeoScene API 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 API for JavaScript 4.8
-
可以搜索指定门户实例的 定位器服务 使用此属性可将此 GeoScene Portal 实例设置为搜索。
-
resultGraphic Graphicreadonly
-
-
resultGraphicEnabled Boolean
-
指示 resultGraphic 是否将显示在所选要素的位置。
- 默认值:true
-
一个对象数组,每个对象都包含搜索中的 SearchResult。
-
searchAllEnabled Boolean
-
指示是否显示搜索所有源的选项。当
true
时,默认情况下显示“全部”选项:当
false
时,没有一次搜索所有源的选项可用时:- 默认值:true
-
searchTerm String
-
搜索框的值输入文本字符串。
-
selectedResult SearchResultreadonly
-
从搜索中选择的结果。
- 另请参阅:
-
sources Collection<SearchSource>autocast
-
搜索微件可用于搜索地图/要素服务要素图层中的要素、具有关联要素图层的 SceneLayers、具有关联要素图层的 BuildingComponentSublayer、GeoJSONLayer、CSVLayer 或 OGCFeatureLayer 或表,或使用定位器对位置进行地理编码。
sources
属性定义要从中搜索由搜索微件实例指定的视图的源。有两种类型的源:这些源的任意组合可以在搜索微件的同一实例中一起使用。
不支持从客户端图形创建的要素图层。
示例:// Default sources[] when sources is not specified [ { url: "https://www.geosceneonline.cn/geocode/rest/GeoScene/GeocodeServer", singleLineFieldName: "SingleLine", outFields: ["Addr_type"], name: "ArcGIS 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://www.geosceneonline.cn/geocode/rest/GeoScene/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/arcgis/rest/services/GeoForm_Survey_v11_live/FeatureServer/0", outFields: ["*"] }), searchFields: ["Email", "URL"], displayField: "Email", exactMatch: false, outFields: ["*"], name: "Point FS", placeholder: "example: esri", 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
-
-
suggestionsEnabled Boolean
-
为微件启用建议。
仅当使用已建议加载功能的 2.0 或更高版本的地理编码服务或支持分页的 2.0 或更高版本的要素图层(即
supportsPagination = true
。- 默认值:true
-
viewModel SearchViewModelautocast
-
此微件的视图模型。这是一个包含控制此微件行为的所有逻辑(属性和方法)的类。请参阅 SearchViewModel 类以访问微件上的所有属性和方法。
-
指示微件是否可见。
如果
false
,则该微件将不再呈现在 web 文档中。这可能会影响文档中其他元素或微件的布局。例如,如果此微件是与视图 UI 右上角关联的三个微件中的第一个,则当此微件变为不可见时,其他微件将重新定位。有关详细信息,请参阅"none"
的 CSS 显示值。- 默认值:true
示例:// Hides the widget in the view widget.visible = false;
方法概述
名称 | 返回类型 | 描述 | 类: | |
---|---|---|---|---|
更多详情 取消微件文本输入的焦点。 | 更多详情 | Search | ||
String | 更多详情 用于为微件的 | 更多详情 | Widget | |
更多详情 清除当前搜索术语、搜索结果、建议结果、图形和图形图层。 | 更多详情 | Search | ||
更多详情 销毁微件实例。 | 更多详情 | Widget | ||
Boolean | 更多详情 在实例上发出事件。 | 更多详情 | Widget | |
更多详情 将焦点放在微件的文本输入上。 | 更多详情 | Search | ||
Boolean | 更多详情 指示实例上是否存在与提供的事件名称匹配的事件侦听器。 | 更多详情 | Widget | |
Boolean | 更多详情
| 更多详情 | Widget | |
Boolean | 更多详情
| 更多详情 | Widget | |
Boolean | 更多详情
| 更多详情 | Widget | |
Object | 更多详情 在实例上注册事件处理程序。 | 更多详情 | Widget | |
更多详情 微件拆解助手。 | 更多详情 | Widget | ||
更多详情 此方法主要由开发人员在实现自定义微件时使用。 | 更多详情 | Widget | ||
Object | 更多详情 此方法主要由开发人员在实现自定义微件时使用。 | 更多详情 | Widget | |
更多详情 立即将微件渲染给 DOM。 | 更多详情 | Widget | ||
更多详情 此方法主要由开发人员在实现自定义微件时使用。 | 更多详情 | Widget | ||
Promise<SearchResponse> | 更多详情 根据指定的源,search() 查询要素图层和/或使用任何指定的定位器执行地址匹配,并返回任何适用的结果。 | 更多详情 | Search | |
Promise<SuggestResponse> | 更多详情 在活动定位器上执行 suggest() 请求。 | 更多详情 | Search | |
Promise | 更多详情
| 更多详情 | Widget |
方法详细信息
-
blur()
-
取消微件文本输入的焦点。
-
起始版本:GeoScene API 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()
-
清除当前搜索术语、搜索结果、建议结果、图形和图形图层。它还会隐藏任何打开的菜单。
-
destroy()inherited
-
销毁微件实例。
-
起始版本:GeoScene API for JavaScript 4.5
-
在实例上发出事件。仅当创建此类的子类时,才应使用此方法。
参数:type String事件的名称。
event Objectoptional事件负载。
返回:类型 说明 Boolean true
如果听取了侦听者的通知
-
focus()
-
将焦点放在微件的文本输入上。
-
起始版本:GeoScene API for JavaScript 4.19
-
isFulfilled()
可用于验证是否满足类的创建实例(已解决或已拒绝)。如果已完成,将返回true
。返回:类型 说明 Boolean 指示是否已完成创建类的实例(已解决或已拒绝)。
-
起始版本:GeoScene API for JavaScript 4.19
-
isRejected()
可用于验证创建类的实例是否被拒绝。如果被拒绝,将返回true
。返回:类型 说明 Boolean 指示创建类的实例是否已被拒绝。
-
起始版本:GeoScene API 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(handles)inherited
-
微件拆解助手。当微件被销毁时,添加到其中的任何句柄都将自动删除。
参数:handles WatchHandle|WatchHandle[]在微件被销毁后标记为删除的句柄。
-
postInitialize()inherited
-
此方法主要由开发人员在实现自定义微件时使用。在微件准备好进行渲染后执行。
-
此方法主要由开发人员在实现自定义微件时使用。它必须由子类实现以进行渲染。
返回:类型 说明 Object 渲染的虚拟节点。
-
renderNow()inherited
-
立即将微件渲染给 DOM。
-
scheduleRender()inherited
-
此方法主要由开发人员在实现自定义微件时使用。计划微件渲染。此方法对于影响 UI 的更改很有用。
-
search(searchTerm){Promise<SearchResponse>}
-
根据指定的源,search() 查询要素图层和/或使用任何指定的定位器执行地址匹配,并返回任何适用的结果。
参数:optional 此搜索项可以是字符串、几何、建议候选对象或[经度、纬度]坐标对数组。如果提供了几何,则它将使用几何而不是文本反转地理代码(定位器)或 findAddressCandidates 。
返回:类型 说明 Promise<SearchResponse> 解析后,返回包含 SearchResult 的 SearchResponse。
-
suggest(value){Promise<SuggestResponse>}
-
在活动定位器上执行 suggest() 请求。它还使用微件或传入的微件的当前值。
如果使用已建议加载功能的 2.0 或更高版本的地理编码服务或支持分页的 2.0 或更高版本的要素图层(即
supportsPagination = true
。参数:value Stringoptional用于在活动定位器或要素图层上 suggest() 的字符串值。如果没有传入任何内容,则取微件的当前值。
返回:类型 说明 Promise<SuggestResponse> 解析后,返回包含结果对象数组的 SuggestResponse。这些结果中的每一个都包含一个 SuggestResult。
-
起始版本:GeoScene API for JavaScript 4.19
-
when()
可以在创建类的实例后利用。此方法采用两个输入参数:callback
函数和errback
函数。在类的实例加载时执行callback
。如果类的实例无法加载,则执行errback
。参数:callback Functionoptional解析 promise 时要调用的函数。
errback Functionoptionalpromise 失败时要执行的函数。
返回:类型 说明 Promise 返回回调结果的新 promise, callback
结果可用于链接其他函数。示例:// 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
-
从 ssearch() 返回的结果对象。
- 属性:
-
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); });