Three line between two geopoints

[hugosoli]

Hi, The tutorial explains how to put a Three js object into the map with anchor. Howerver, imagine that you want to draw a line between two points. The way I draw one line was with the positions of the ThreeJS gemotry set to Zero and then use map Anchor but In the case of the line I would need two geographics references.
Am I forgeting something?

This example draw a line but I can not change it to two grographics points.
Thanks for the help

points.push(new THREE.Vector3(0, 0, 0));
points.push(new THREE.Vector3(0, 0, -altura));
const geometryl = new THREE.BufferGeometry().setFromPoints(points);
const line = new THREE.Line(geometryl, lineMaterial);
line.anchor = new GeoCoordinates(lat, lng, 100);
mapView.mapAnchors.add(line);

[nzjony]

@hugosoli , we don't have a way to draw a link between two map anchor points currently.

Why not use geojson to render the line? If you need to add the geometry programatically, you can use the FeaturesDataSource, see: https://www.harp.gl/docs/master/examples/#datasource_features_lines-and-points.html

Or go to: https://www.harp.gl/docs/master/examples/#geojson-viewer.html

And try something like:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            0,
            0
          ],
          [
            90  ,
            45
          ]
        ]
      }
    }
  ]
}

[hugosoli]

First of all, thank you for your replies. Well, The idea about the line is just an example to simplify the situation. At the end I want to create sophisticated arcs and geometric figures all along two points in the map. Therefore the idea about the FeaturesDataSources won't work. There is a clue that may lead to some potential solution.

1. The tutorial fives a solution about inserting a Threejs object. The position vector of the object is 0,0,0 but the position is set by the map.anchor. What would happen if you change the position of the mesh object and adjust the anchor.

2. The example of tht threejs_raycast.ts (next code) has another solution and set the position converting screen coordinates into geo coordinates. That make me think that I it may be possible to do the inverse and get geometric coordinates from a geo coordinate. If a threejs object can be set into an specific geopoint. Then you could create a more complex threejs object (let say a line) with two point in two geopoints. My feeling is that it should be possible. Isn it?
   cheers.

const worldPoint = new THREE.Vector3();
// Pick results is sorted by distance, so we choose the first point in 3D.
for (const pick of pickResults) {
if (pick.point instanceof THREE.Vector3) {
worldPoint.copy(pick.point);
// Points returned from the intersectMapObjects are in local space, hence we
// transform to actual world space.
worldPoint.add(map.worldCenter);
break;
}
}
// snippet:harp_gl_threejs_raycast_1.ts

[nzjony]

yes, the position of the object is set to the geo coordinate projected to world coordinates, but you could add a child object with some offset and that would stay relative to the geo coordinate.

I don't understand:

That make me think that I it may be possible to do the inverse and get geometric coordinates from a geo coordinate.

You can use the different Projection classes to convert a GeoCoordinate (lat/long), to a world coordinate and vice versa, and the conversion to screen is also possible using. MapView also has a method getWorldPositionAt which converts screen coordinates to world coordinates.

[hugosoli]

Yes, based on the recomendation of @nzjony I dig arround the projections classes. This solution work for me.

function drawLineBetween(poin1, point2) {
// let zocalo = new GeoCoordinates(19.4326018, -99.1332049);
const currentPosition = mapView.target;
const points = [];
points.push(mapView.projection.projectPoint(poin1));
points.push(mapView.projection.projectPoint(point2));
const geometryl = new THREE.BufferGeometry().setFromPoints(points);
const line = new THREE.Line(geometryl, lineMaterial);
line.anchor = new THREE.Vector3();
mapView.mapAnchors.add(line);
mapView.update();
}

cheers

[nzjony]

Glad it worked out @hugosoli