ArcGIS API for JavaScript 4.2学习笔记[19] 搜索小部件——使用更多数据源
上一篇中提到，空间搜索小部件是Search这个类的实例化，作为视图的ui属性添加进去后，视图就会出现搜索框了。
这节的主体代码和上篇几乎一致，区别就在上篇提及的sources属性。
先看看结果：
由于不太清楚要素图层里有什么东西，随便输了个字母匹配，结果如图，中央出现了一个图案并弹窗。
开始讲课！
给出引用
require(
[
"esri/Map",
"esri/views/MapView",
"esri/widgets/Search",
"esri/layers/FeatureLayer",
"esri/symbols/PictureMarkerSymbol",
"dojo/domReady!"
],
function(){}
);
PictureMarkerSymbol是上图中搜索结果的图案所需的模块。
可见此例子采用了要素图层来进行搜索。
函数参数骨架
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容器差不多）。
看看完整代码：
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:
简单，这就是用一张图片指示出某个点。
这里用到了url、height、width三个属性，不必说多也知道是什么意思了。常用的属性还有xoffset、yoffset等。
总结一下。
如何在搜索小部件中使用多源数据呢？
只需要设置Search类的sources属性即可，可以有两种类型：featureLayerSource和locatorSource。
注意，虽然是这么说，但是写法上还是属于Object类型的。两个类型都需要设置必要的、可选的属性才能赋给sources属性。
最后给出完整的官方代码：
<!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图片文件。
ArcGIS API for JavaScript 4.2学习笔记[19] 搜索小部件——使用更多数据源的更多相关文章
- ArcGIS API for JavaScript 4.2学习笔记[18] 搜索小部件
这个例子很简单,作为开学后(暴露出学生党的本质)的开胃菜是再合适不过了. 不过,博主提前警告一下:接下来的例子会相当的长.烦.难.我还会用"引用"-"函数参数骨架&quo ...
- ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录
放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 4.2全线基础学习请点击[直达] 4.3及更高版本的补充学习请关注我的博客. ArcGIS API for JavaScr ...
- ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图
ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...
- ArcGIS API for JavaScript 4.2学习笔记[5] 官方API大章节概述与内容转译
内容如上,截图自ESRI官网,连接:ArcGIS API for JavaScript 4.2 [Get Started] 类似于绪论一样的东西,抽取了最需要关注的几个例子.如:加载Map和View, ...
- ArcGIS API for JavaScript 4.2学习笔记[21] 对3D场景上的3D要素进行点击查询【Query类学习】
有人问我怎么这个系列没有写自己做的东西呢? 大哥大姐,这是"学习笔记"啊!当然主要以解读和笔记为主咯. 也有人找我要实例代码(不是示例),我表示AJS尚未成熟,现在数据编辑功能才简 ...
- ArcGIS API for JavaScript 4.4学习笔记[新] AJS4.4和AJS3.21新特性
ESRI官网悄无声息突然更新4.4和3.21,公众号也没有什么消息.照例,给大家看看这次更新有什么新特性吧. 1. AJS 4.4 官方更新日志:点我,比较详细.我在这里抽一些主干作为说明. 1.1 ...
- ArcGIS API for JavaScript 4.2学习笔记[12] View的弹窗（Popup）
看本文前最好对第二章(Mapping and Views)中的Map和View类有理解. 视图类有一个属性是Popup类型的popup,查阅API知道这个就是视图的弹窗,每一个View的实例都有一个p ...
- ArcGIS API for JavaScript 4.2学习笔记[17] 官方第七章Searching（空间查询）概览与解释
空间分析和空间查询是WebGIS有别于其他Web平台的特点.到这一章,就开始步入空间分析的内容了. [Search widget] 介绍空间查询的核心小部件"Search". [S ...
- ArcGIS API for JavaScript 4.2学习笔记[16] 弹窗自定义功能按钮及为要素自定义按钮（第五章完结）
这节对Popups这一章的最后两个例子进行介绍和解析. 第一个[Popup Actions]介绍了弹窗中如何自定义工具按钮(名为actions),以PopupTemplate+FeatureLayer ...
随机推荐
- mongodb数据库禁止外网访问以及添加账号
未曾料到被黑客勒索比特币的戏码竟然降临到我的身上,几个月的技术积累付之一炬.怪只怪自己学艺不精,心存侥幸和无知,不过经此一役,方知网络安全防护的重要性. 一直未给自己的mongodb数据库设置账号密码 ...
- RPC是什么
RPC是什么? 通俗的讲就是,调用远程计算机上的服务,就像调用本地服务一样.通常包含传输协议和编码协议. RPC可以基于HTTP或TCP协议,但基于HTTP协议的RPC性能却不如基于TCP协议的RPC ...
- 内网神器-Bettercap
安装bettercap 1 2 root@sch01ar:~# apt-get update root@sch01ar:~# apt-get install bettercap 安装完成后查看一下帮 ...
- #centos7 设置bond、bridge、vlan
#centos7 设置bond.bridge.vlan #centos7 设置bond.bridge.vlan # CentOS7中 nmcli命令由NetworkManager提供 # 可以用于设置 ...
- Netty4.0.24.Final 版本中 IdleStateHandler 使用时的局限性
使用Netty在客户端和服务端建立通讯通道,一般来说,一个连接可能很久没有访问,由于各种各样的网络问题导致连接已经失效,客户端再次发送请求时会产生连接异常. 基于这个原因,需要在客户端和服务端之间建立 ...
- java变量和作用域以及成员变量的默认初始化
Java中的变量有成员变量和局部变量,定义在类中方法之外的变量成为成员变量或者成员字段(域),表示一个类所具有的属性,定义为类的成员变量的变量的作用于是整个类,该变量在定义的时候不需要初始化,在使用前 ...
- Hibernate框架入门
导读 本文主要介绍hibernate的入门,主要包括以下内容:hibernate介绍.hibernate环境搭建.hibernate简单测试.测试涉及的api详解. 一.hibernate介绍 JDB ...
- python项目依赖管理分享迁移后重建开发环境（一）virtualenv 和 pip
作者:Panda Fang 出处:http://www.cnblogs.com/lonkiss/p/rebuild-development-environment-with-virtualenv-an ...
- NIO相关基础篇二
转载请注明原创出处,谢谢! 上篇NIO相关基础篇一,主要介绍了一些基本的概念以及缓冲区(Buffer)和通道(Channel),本篇继续NIO相关话题内容,主要就是文件锁.以及比较关键的Selecto ...
- 【技能大赛笔记01】Zigbee点对点按键控制程序开发
[技能大赛笔记01]Zigbee点对点按键控制程序开发 --2017年"物联网物联网技术应用与维护"任务五题1(中职组) 1.题目要求 2.工程文件 在比赛中,提供了一个基于Bas ...