搜索微件与自定义源

此示例演示如何创建自定义搜索源以与搜索微件一起使用。搜索微件提供向第三方服务提供搜索要素的能力。默认情况下，搜索微件设置搜索结果的视图。视图中心的详细程度（LOD）取决于数据源，更高质量的数据源返回的范围更接近从搜索中获得的 要素 。

要在搜索微件中使用自定义源，必须使用自己的自定义源设置微件的 sources 属性。

要创建自定义搜索源，您需要构造一个搜索源，其中的 on 对象包含两个函数: getSuggestions 和 getResults 。

在这两个函数中，您可以确定如何返回在搜索微件中显示的建议列表，以及如何获取和返回结果。

const customSearchSource = new SearchSource({
  placeholder: "example: 8 Boulevard du Port",
  // Provide a getSuggestions method
  // to provide suggestions to the Search widget
  getSuggestions: (params) => {
    // You can request data from a
    // third-party source to find some
    // suggestions with provided suggestTerm
    // the user types in the Search widget
    return geosceneRequest(url + "search/", {
      query: {
        q: params.suggestTerm.replace(/ /g, "+"),
        limit: 6,
        lat: view.center.latitude,
        lon: view.center.longitude
      },
      responseType: "json"
    }).then((results) => {
      // Return Suggestion results to display
      // in the Search widget
      return results.data.features.map((feature) => {
        return {
          key: "name",
          text: feature.properties.label,
          sourceIndex: params.sourceIndex
        };
      });
    });
  },
  // Provide a getResults method to find
  // results from the suggestions
  getResults: (params) => {
    // If the Search widget passes the current location,
    // you can use this in your own custom source
    const operation = params.location ? "reverse/" : "search/";
    let query = {};
    // You can perform a different query if a location
    // is provided
    if (params.location) {
      query.lat = params.location.latitude;
      query.lon = params.location.longitude;
    } else {
      query.q = params.suggestResult.text.replace(/ /g, "+");
      query.limit = 6;
    }
    return geosceneRequest(url + operation, {
      query: query,
      responseType: "json"
    }).then((results) => {
      // Parse the results of your custom search
      const searchResults = results.data.features.map((feature) => {
        // Create a Graphic the Search widget can display
        const graphic = new Graphic({
          geometry: new Point({
            x: feature.geometry.coordinates[0],
            y: feature.geometry.coordinates[1]
          }),
          attributes: feature.properties
        });
        // Optionally, you can provide an extent for
        // a point result, so the view can zoom to it
        const buffer = geometryEngine.geodesicBuffer(graphic.geometry, 100, "meters");
        // Return a Search Result
        const searchResult = {
          extent: buffer.extent,
          feature: graphic,
          name: feature.properties.label
        };
        return searchResult;
      });

      // Return an array of Search Results
      return searchResults;
    });
  }
});

searchWidget

MapView

Geocode

SearchSource

4.11

GeoScene API for JavaScript示例中心

搜索微件与自定义源