搜索具有多个源的微件
此示例演示如何使用 搜索微件 根据给定字段搜索多个 图层源 。 搜索微件部件提供了在 图层 中搜索要素或使用 定位器 对位置进行地理编码的功能。 默认情况下，搜索微件设置 搜索结果 的视图。 视图中心的详细程度 （LOD） 取决于数据源，更高质量的数据源返回的范围更接近从搜索中获得的 要素 。
要将多个源与搜索微件一起使用，您必须设置微件的 源 属性。
地理编码服务需要令牌进行身份验证。 此示例使用 apiKey 进行身份验证。 您可以将其替换为您自己的 apiKey，也可以将其删除并在出现提示后登录。 或者，您可以使用其他 身份验证方法 来访问地理编码服务。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Search widget with multiple sources | Sample | GeoScene API for JavaScript 4.22</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css" />
<script src="https://js.geoscene.cn/4.23/"></script>
<script>
require(["geoscene/Map", "geoscene/views/MapView", "geoscene/layers/FeatureLayer", "geoscene/widgets/Search"], (
Map,
MapView,
FeatureLayer,
Search
) => {
const map = new Map({
basemap: "geoscene-blue"
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-97, 38], // lon, lat
scale: 10000000
});
const featureLayerDistricts = new FeatureLayer({
url:
"https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_117th_Congressional_Districts_all/FeatureServer/0",
popupTemplate: {
// autocasts as new PopupTemplate()
title: "Congressional District {DISTRICTID} </br>{NAME}, ({PARTY})",
overwriteActions: true
}
});
const featureLayerSenators = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/US_Senators_2020/FeatureServer/0",
popupTemplate: {
// autocasts as new PopupTemplate()
title: "<a href={Web_Page} target='_blank'> {Name}</a>, ({Party}-{State}) ",
overwriteActions: true
}
});
const searchWidget = new Search({
view: view,
allPlaceholder: "District or Senator",
includeDefaultSources: false,
sources: [
{
layer: featureLayerDistricts,
searchFields: ["DISTRICTID"],
displayField: "DISTRICTID",
exactMatch: false,
outFields: ["DISTRICTID", "NAME", "PARTY"],
name: "Congressional Districts",
placeholder: "example: 3708"
},
{
layer: featureLayerSenators,
searchFields: ["Name", "Party"],
suggestionTemplate: "{Name}, Party: {Party}",
exactMatch: false,
outFields: ["*"],
placeholder: "example: Casey",
name: "Senators",
zoomScale: 500000,
resultSymbol: {
type: "picture-marker", // autocasts as new PictureMarkerSymbol()
url: "/javascript/4.23//sample-code/widgets-search-multiplesource/live/images/senate.png",
height: 36,
width: 36
}
},
{
name: "ArcGIS World Geocoding Service",
placeholder: "example: Nuuk, GRL",
apiKey: "YOUR_API_KEY",
singleLineFieldName: "SingleLine",
locator: "https://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer"
}
]
});
// Add the search widget to the top left corner of the view
view.ui.add(searchWidget, {
position: "top-right"
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>