原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Custom%20Geocoder.html&label=All

效果如下视频所示：

示例代码如下：

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
/**
 * 此类是自定义地理编码器的一个示例。
 * 它通过 OpenStreetMap Nominatim 服务提供地理编码。
 * @alias OpenStreetMapNominatimGeocoder
 * @constructor
 */
function OpenStreetMapNominatimGeocoder() {}

/**
 * 调用此地理编码服务进行地理编码的功能。
 *
 * @param {string} input The query to be sent to the geocoder service
 * @returns {Promise<GeocoderService.Result[]>}
 */
OpenStreetMapNominatimGeocoder.prototype.geocode = function (input) {
  const endpoint = "https://nominatim.openstreetmap.org/search";
  const resource = new Cesium.Resource({
    url: endpoint,
    queryParameters: {
      format: "json",
      q: input,
    },
  });

  return resource.fetchJson().then(function (results) {
    let bboxDegrees;
    return results.map(function (resultObject) {
      bboxDegrees = resultObject.boundingbox;
      return {
        displayName: resultObject.display_name,
        destination: Cesium.Rectangle.fromDegrees(
          bboxDegrees[2],
          bboxDegrees[0],
          bboxDegrees[3],
          bboxDegrees[1],
        ),
      };
    });
  });
};

const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: new OpenStreetMapNominatimGeocoder(),
});

viewer.geocoder.viewModel.searchText = "Philadelphia";
viewer.geocoder.viewModel.search();