feat: extend plugin API supports get location from screen position

[airslice]

Overview

Plugin need to get the location of certain point on screen.

What I've done

Expose getLocationFromScreen to plugin API.

reearth.scene.getLocationFromScreen(x: number, y:number, withTerrain?:boolean) 
  => LatLngHeight | undefined

type LatLngHeight = {
  lat: number;
  lng: number;
  height: number;
};

What I haven't done

How I tested

Tested with devtool console.
Tested with plugin editor using:

reearth.ui.show(`
  <style>
    html,
    body {
      margin: 0;
      width: 350px;
      font-size: 14px;
    }
    button {
      margin: 0;
    }
    #wrapper {
      height: 100%;
      box-sizing: border-box;
      border-radius: 12px;
      padding: 12px;
      background: white;
    }
    #wrapper {
      box-sizing: border-box;
      border-radius: 12px;
      background: white;
      height: 100%;
    }
    h3{
      margin: 0 0 5px;
    }
    h4{
      margin: 5px 0;
    }
    #currentUnitLine{
      height: 2px;
      background: #000;
      width: 0;
    }
  </style>

  <div id="wrapper">
    <h3>Distance Legend</h3>
    <h4 id="pixelDistance"></h4>
    <h4 id="currentLabel"></h4>
    <div id="currentUnitLine"></div>
  </div>

  <script>
    const distances = [
      1, 2, 3, 5, 10, 20, 30, 50, 100, 200, 300, 500, 1000, 2000, 3000, 5000, 10000,
      20000, 30000, 50000, 100000, 200000, 300000, 500000, 1000000, 2000000,
      3000000, 5000000, 10000000, 20000000, 30000000, 50000000
    ];

    window.addEventListener("message", function (e) {
      if (e.source !== parent) return;

      let pixelDistance = 0;

      if( e.data.payload.point1 && e.data.payload.point2){
        pixelDistance = getDistanceFromLatLonInKm(
          e.data.payload.point1.lat,
          e.data.payload.point1.lng,
          e.data.payload.point2.lat,
          e.data.payload.point2.lng
        ) * 1000;
      };

      document.getElementById("pixelDistance").innerHTML = pixelDistance;
      
      const maxBarWidth = 100;
      let distance = 0;
      for (let i = distances.length - 1; !distance && i >= 0; --i) {
        if (distances[i] / pixelDistance < maxBarWidth) {
          distance = distances[i];
        }
      }

      let label;
      if (distance >= 1000) {
        label = (distance / 1000).toString() + " km";
      } else {
        label = distance.toString() + " m";
      }
      document.getElementById("currentLabel").innerHTML = label;
      document.getElementById("currentUnitLine").style.width = (distance / pixelDistance) + 'px';
    });

    function getDistanceFromLatLonInKm(lat1,lon1,lat2,lon2) {
      var R = 6371.137; // Radius of the earth in km
      var dLat = deg2rad(lat2-lat1);  // deg2rad below
      var dLon = deg2rad(lon2-lon1); 
      var a = 
        Math.sin(dLat/2) * Math.sin(dLat/2) +
        Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * 
        Math.sin(dLon/2) * Math.sin(dLon/2)
        ; 
      var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
      var d = R * c; // Distance in km
      return d;
    }

    function deg2rad(deg) {
      return deg * (Math.PI/180)
    }
  </script>
`);

reearth.on("cameramove", () => {
  reearth.ui.postMessage({
    type: 'getLocations',
    payload: {
      point1: reearth.scene.getLocationFromScreen(reearth.viewport.width / 2, reearth.viewport.height - 1),
      point2: reearth.scene.getLocationFromScreen(reearth.viewport.width / 2 + 1, reearth.viewport.height - 1)
    }
  });
});

Screenshot

Which point I want you to review particularly

Memo

[netlify]

✅ Deploy Preview for reearth-web ready!

Name	Link
🔨 Latest commit	978f2ba
🔍 Latest deploy log	https://app.netlify.com/sites/reearth-web/deploys/636c63bcdb24670008be1f5d
😎 Deploy Preview	https://deploy-preview-350--reearth-web.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[codecov]

Codecov Report

Merging #350 (e57ecea) into main (7b268ba) will increase coverage by 0.11%.
The diff coverage is 59.49%.

❗ Current head e57ecea differs from pull request most recent head 978f2ba. Consider uploading reports for the commit 978f2ba to get more accurate results

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #350      +/-   ##
==========================================
+ Coverage   18.09%   18.20%   +0.11%     
==========================================
  Files         512      512              
  Lines       51055    51131      +76     
  Branches      619      630      +11     
==========================================
+ Hits         9237     9307      +70     
- Misses      41797    41803       +6     
  Partials       21       21              

Impacted Files	Coverage Δ
src/components/molecules/Visualizer/Engine/ref.ts	0.00% <0.00%> (ø)
src/components/molecules/Visualizer/Plugin/api.ts	6.52% <0.00%> (-0.05%)	⬇️
...rc/components/molecules/Visualizer/Plugin/types.ts	0.00% <0.00%> (ø)
src/components/molecules/Visualizer/hooks.ts	0.00% <0.00%> (ø)
src/components/molecules/Visualizer/storybook.tsx	0.00% <0.00%> (ø)
...components/molecules/Visualizer/Plugin/context.tsx	31.36% <66.66%> (+0.96%)	⬆️
...les/Visualizer/Engine/Cesium/useEngineRef.test.tsx	99.81% <100.00%> (+0.01%)	⬆️
...molecules/Visualizer/Engine/Cesium/useEngineRef.ts	69.06% <100.00%> (+0.93%)	⬆️
...nents/molecules/Visualizer/Engine/Cesium/common.ts	44.21% <0.00%> (+3.30%)	⬆️

[rot1024]

Can you rename getLocationFromScreenPosition getLoctionFromScreen?