ArcGIS API for JavaScript 4.2学习笔记[19] 搜索小部件——使用更多数据源

1,427 7

ArcGIS API for JavaScript 4.x:
从3.x版本升级到4.x,变化比较大,学习、开发体验也会不一样。

本系列是转载至博客园原创作者-秋意正寒-致敬!

原地址:https://www.cnblogs.com/onsummer/p/6421297.html


上一篇中提到,空间搜索小部件是Search这个类的实例化,作为视图的ui属性添加进去后,视图就会出现搜索框了。

这节的主体代码和上篇几乎一致,区别就在上篇提及的sources属性。

先看看结果:

img

img

由于不太清楚要素图层里有什么东西,随便输了个字母匹配,结果如图,中央出现了一个图案并弹窗。

开始讲课!


给出引用

1
2
3
4
5
6
7
8
9
10
11
require(
[
"esri/Map",
"esri/views/MapView",
"esri/widgets/Search",
"esri/layers/FeatureLayer",
"esri/symbols/PictureMarkerSymbol",
"dojo/domReady!"
],
function(){}
);

PictureMarkerSymbol是上图中搜索结果的图案所需的模块。

可见此例子采用了要素图层来进行搜索。

函数参数骨架

1
2
3
4
5
6
7
8
9
function(Map, MapView, Search, FeatureLayer, PictureMarkerSymbol){
var map = new Map({...});
var view = new MapView({...});
var searchWidget = new Search({
...
sources: [{...},{...}]
}
view.ui.add(searchWidget, {...});
)

上一节提到Search这个类有一个重要的属性sources,它是Collection类型(同对象数组容器,与.NET中list容器差不多)。

看看完整代码:

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
sources: [{
featureLayer: new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/CongressionalDistricts/FeatureServer/0",
popupTemplate: {
title: "Congressional District {DISTRICTID} </br>{NAME}, {PARTY}",
overwriteActions: true
}
}),
searchFields: ["DISTRICTID"],
displayField: "DISTRICTID",
exactMatch: false,
outFields: ["DISTRICTID", "NAME", "PARTY"],
name: "Congressional Districts",
placeholder: "example: 3708",
}, {
featureLayer: new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/US_Senators/FeatureServer/0",
popupTemplate: {
title: "<a href={Web_Page} target='_blank'> {Name}</a>, ({Party}-{State}) ",
overwriteActions: true
}
}),
searchFields: ["Name", "Party"],
suggestionTemplate: "{Name}, Party: {Party}",
exactMatch: false,
outFields: ["*"],
name: "Senators",
zoomScale: 500000,
resultSymbol: new PictureMarkerSymbol({
url: "images/senate.png",
height: 36,
width: 36
})
}]

我这里没有缩起来,原因就是已经很明显了——

sources给了一个Object数组,数组内有两个{}对象。

每个{}对象拥有以下属性:【featureLayer,searchFields,suggestionTemplate,exactMatch,outFields,name,zoomScale,resultSymbol】

查阅API,得知sources接受以下数据类型作为搜索源:

featureLayerSource

locatorSource

在上面,sources[{…},{…}]中的每个大括号对象就是featureLayerSource类型的。这里有点拗口,featureLayerSource和locatorSource不是js中的类,而是一种“说法”,因为sources接受的是Object数组作为参数,只不过本例以featureLayerSource作为示范而已。

【featureLayerSource】可选参数

displayField(String):用于显示结果的字段(名)

exactMatch(Boolean):是否精确搜索,默认是否(false)。

featureLayer(FeatureLayer):这个参数必须需要,因为是数据源啊。

searchFields(String[]):用于搜索的字段(名)。

searchQueryParams(Object):包括outSpatialReference、returnGeometry、num、outFields、where、maxAllowableOffset、objectIds

suggestQueryParams(Object):包括outSpatialReference、returnGeometry、num、outFields、where

以上两个Object类型的参数不知道是干嘛用的,前一个似乎是搜索时的默认选项,后一个是请求建议时的默认选项(与Search类的suggest()方法有关)?

suggestionTemplate(String):displayField有多个时,需要有格式地显示,就用这个。例子:suggestionTemplate: “Name: {OWNER}, Parcel: {PARCEL_ID}”

再看看locatorSource:

【locatorSource】可选参数

categories(String[])

countryCode(String)

localSearchOptions(Object)

locationToAddressDistance(Number)

searchTemplate(String)

locator(Locator)

singleLineFieldName(String)

关于locatorSource就不说多了,这个数据源是对Locator(定位)类熟练运用才能使用的,因为前面的笔记没有对Locator有多余的描述,故仅仅在此记录。

回到sources[{…},{…}]的代码部分。

这样思路就清晰了,使用featureLayerSource作为搜索数据源,就要定义赋值上面提到的属性。

在featureLayer属性中,使用了popupTemplate方便输出。

在第二个featureLayerSource中,出现了一个新的东西——“resultSymbol”,它是PictureMarkerSymbol类的属性。查询API:

img

简单,这就是用一张图片指示出某个点。

这里用到了url、height、width三个属性,不必说多也知道是什么意思了。常用的属性还有xoffset、yoffset等。


总结一下。

如何在搜索小部件中使用多源数据呢?

只需要设置Search类的sources属性即可,可以有两种类型:featureLayerSource和locatorSource。

注意,虽然是这么说,但是写法上还是属于Object类型的。两个类型都需要设置必要的、可选的属性才能赋给sources属性。

最后给出完整的官方代码:

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
<!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 - 4.2</title>

<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>

<link rel="stylesheet" href="https://js.arcgis.com/4.2/esri/css/main.css">
<script src="https://js.arcgis.com/4.2/"></script>

<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Search",
"esri/layers/FeatureLayer",
"esri/symbols/PictureMarkerSymbol",
"dojo/domReady!"
], function(
Map,
MapView,
Search, FeatureLayer, PictureMarkerSymbol) {

var map = new Map({
basemap: "dark-gray"
});

var view = new MapView({
container: "viewDiv",
map: map,
center: [-97, 38], // lon, lat
scale: 10000000
});

var searchWidget = new Search({
view: view,
allPlaceholder: "District or Senator",
sources: [{
featureLayer: new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/CongressionalDistricts/FeatureServer/0",
popupTemplate: { // autocasts as new popupTemplate()
title: "Congressional District {DISTRICTID} </br>{NAME}, {PARTY}",
overwriteActions: true
}
}),
searchFields: ["DISTRICTID"],
displayField: "DISTRICTID",
exactMatch: false,
outFields: ["DISTRICTID", "NAME", "PARTY"],
name: "Congressional Districts",
placeholder: "example: 3708",
}, {
featureLayer: new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/US_Senators/FeatureServer/0",
popupTemplate: { // autocasts as new popupTemplate()
title: "<a href={Web_Page} target='_blank'> {Name}</a>, ({Party}-{State}) ",
overwriteActions: true
}
}),
searchFields: ["Name", "Party"],
suggestionTemplate: "{Name}, Party: {Party}",
exactMatch: false,
outFields: ["*"],
name: "Senators",
zoomScale: 500000,
resultSymbol: new PictureMarkerSymbol({
url: "images/senate.png",
height: 36,
width: 36
})
}]
});

// 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>

注意与html同级别下有一个image文件夹,里面存有senate.png图片文件。


关注公众号

当前网速较慢或者你使用的浏览器不支持博客特定功能,请尝试刷新或换用Chrome、Firefox等现代浏览器