2019-07-16

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

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

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

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

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

文章作者:ibrucekong

文章字数:1,427字

阅读时长:7分钟

全站字数:71.0k字

发布时间:2019年07月16日 - 18时05分

最后更新:2019年07月16日 - 18时05分

原始链接:https://ibrucekong.github.io/posts/1025956195/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。