上一篇中提到，空间搜索小部件是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] 搜索小部件——使用更多数据源的更多相关文章

  1. ArcGIS API for JavaScript 4.2学习笔记[18] 搜索小部件

    这个例子很简单,作为开学后(暴露出学生党的本质)的开胃菜是再合适不过了. 不过,博主提前警告一下:接下来的例子会相当的长.烦.难.我还会用"引用"-"函数参数骨架&quo ...

  2. ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录

    放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 4.2全线基础学习请点击[直达] 4.3及更高版本的补充学习请关注我的博客. ArcGIS API for JavaScr ...

  3. ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图

    ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...

  4. ArcGIS API for JavaScript 4.2学习笔记[5] 官方API大章节概述与内容转译

    内容如上,截图自ESRI官网,连接:ArcGIS API for JavaScript 4.2 [Get Started] 类似于绪论一样的东西,抽取了最需要关注的几个例子.如:加载Map和View, ...

  5. ArcGIS API for JavaScript 4.2学习笔记[21] 对3D场景上的3D要素进行点击查询【Query类学习】

    有人问我怎么这个系列没有写自己做的东西呢? 大哥大姐,这是"学习笔记"啊!当然主要以解读和笔记为主咯. 也有人找我要实例代码(不是示例),我表示AJS尚未成熟,现在数据编辑功能才简 ...

  6. ArcGIS API for JavaScript 4.4学习笔记[新] AJS4.4和AJS3.21新特性

    ESRI官网悄无声息突然更新4.4和3.21,公众号也没有什么消息.照例,给大家看看这次更新有什么新特性吧. 1. AJS 4.4 官方更新日志:点我,比较详细.我在这里抽一些主干作为说明. 1.1 ...

  7. ArcGIS API for JavaScript 4.2学习笔记[12] View的弹窗（Popup）

    看本文前最好对第二章(Mapping and Views)中的Map和View类有理解. 视图类有一个属性是Popup类型的popup,查阅API知道这个就是视图的弹窗,每一个View的实例都有一个p ...

  8. ArcGIS API for JavaScript 4.2学习笔记[17] 官方第七章Searching（空间查询）概览与解释

    空间分析和空间查询是WebGIS有别于其他Web平台的特点.到这一章,就开始步入空间分析的内容了. [Search widget] 介绍空间查询的核心小部件"Search". [S ...

  9. ArcGIS API for JavaScript 4.2学习笔记[16] 弹窗自定义功能按钮及为要素自定义按钮（第五章完结）

    这节对Popups这一章的最后两个例子进行介绍和解析. 第一个[Popup Actions]介绍了弹窗中如何自定义工具按钮(名为actions),以PopupTemplate+FeatureLayer ...

随机推荐

  1. Zabbix 3.0 基础介绍 [一]

    zabbix 简介 Zabbix 是一个高度集成的网络监控解决方案,可以提供企业级的开源分布式监控解决方案,由一个国外的团队持续维护更新,软件可以自由下载使用,运作团队靠提供收费的技术支持赢利 zab ...

  2. Nova计算节点安装配置

    Nova计算节点安装配置 openstack pike 安装 目录汇总 http://www.cnblogs.com/elvi/p/7613861.html ## Nova计算节点安装配置 #基本配置 ...

  3. Linux运维项目实战系列

    Linux运维项目实战系列 项目实战1-LNMP的搭建.nginx的ssl加密.权限控制的实现 项目实战2-项目实战2-实现基于LVS负载均衡集群的电商网站架构 2.1项目实战2.1-nginx 反向 ...

  4. SolrJ 复杂查询 高亮显示

    SolrJ 复杂查询 高亮显示 上一章搭建了Solr服务器和导入了商品数据,本章通过SolrJ去学习Solr在企业中的运用.笔者最先是通过公司的云客服系统接触的Solr,几百万的留言秒秒钟就查询并高亮 ...

  5. RBAC(Role-Based Access Control,基于角色的权限访问控制)—权限管理设计

    RBAC模型的核心是在用户和权限之间引入了角色的概念,将用户和权限进行解耦,采用用户确定角色,角色分配权限,进而间接达到给用户分配角色的目的 这样采用的方式优点在于 (1)降低管理成本--由于一个角色 ...

  6. page 简单易懂 分页

    基础分页功能 <?php class Page{  //$count是用户设定的值      public $a;    function pages($count,$page_num,$url ...

  7. 在外围获取APP的机密信息

    叶孤城原创,转载须授权. 小白:偷窥狂,不,叶城主,怎么还不发起攻击,还在外围搞什么? 叶孤城:闭嘴,能外围解决的问题就不要破解,你以为你会天外飞仙啊! 小白:-- 本文解决一个问题:通过抓包分析出重 ...

  8. 调参过程中的参数 学习率，权重衰减，冲量(learning_rate , weight_decay , momentum)

    无论是深度学习还是机器学习,大多情况下训练中都会遇到这几个参数,今天依据我自己的理解具体的总结一下,可能会存在错误,还请指正. learning_rate , weight_decay , momen ...

  9. java多线程编程核心技术——第二章

    第一节synchronized同步方法目录 1.1方法内的变量为线程安全的 1.2实例变量非线程安全 1.3多个对象多个锁 1.4synchronized方法与锁对象 1.5脏读 1.6synchro ...

  10. 【Codeforces 837D】Round Subset

    http://codeforces.com/contest/837/problem/D 分解质因数,即第i个数的因子2的个数为c2[i],因子5的个数为c5[i],末尾零的个数就是min{Σc2[i] ...