reearth / resium

React components for 🌏 Cesium
https://resium.reearth.io
MIT License
727 stars 134 forks source link

resium geocoder #585

Open onacione opened 1 year ago

onacione commented 1 year ago

hi there,

I want to add custom geoder in resium.

I found this code. it is work in sandcastle cesium but it is not work in resium.

function OpenStreetMapNominatimGeocoder() {}

/**
 * The function called to geocode using this geocoder service.
 *
 * @param {String} input The query to be sent to the geocoder service
 * @returns {Promise<GeocoderService.Result[]>}
 */

OpenStreetMapNominatimGeocoder.prototype.geocode = async (input) => {
  console.log(input);
  const endpoint = 'https://maps.googleapis.com/maps/api/geocode/json?address=${{input}}';
  const resource = new Cesium.Resource({
    url: endpoint,
    address : input,
    outputFormat: 'json',
    key: 'AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg',
  });

  const results = await resource.fetchText();
  console.log(results.toString());
    let bboxDegrees;
    return results?.map(resultObject => {
      console.log(resultObject);
      bboxDegrees = [
        parseFloat(resultObject.lon),
        parseFloat(resultObject.lat)
      ];
      return {
        displayName: resultObject.display_name,
        destination: Cesium.Cartesian3.fromDegrees(
          // No matter which line below is used, after searching a location
          // camera end position is always the same height as long as
          // createWorldTerrain() is used in the viewer as terrainProvider:

          // bboxDegrees[0], bboxDegrees[1], 0.0
          bboxDegrees[0], bboxDegrees[1], 50.0
          // bboxDegrees[0], bboxDegrees[1], 15000.0
          // bboxDegrees[0], bboxDegrees[1], 50000.0
        ),
      };
    });
};

My code is below.

<Viewer
         geocoder = { new OpenStreetMapNominatimGeocoder}
>
</viewer>

When I write the code in this way, I do not know how to get an infiniteLoop error.

As another method, I tried this

viewer.geocoder.geocoderService =[new OpenStreetMapNominatimGeocoder()]

but is not work. again querying the cesium api. can you help me please.

rot1024 commented 1 year ago
const g = useMemo(() => new OpenStreetMapNominatimGeocoder()}, []);

return <Viewer geocoder={g} />