vasturiano / three-globe

WebGL Globe Data Visualization as a ThreeJS reusable 3D object
https://vasturiano.github.io/three-globe/example/links/
MIT License
1.19k stars 145 forks source link

The ability to specify the number of the dot marker segments and change the altitude of the start/end points of the Arc #94

Open ElviraKukhtaruk opened 3 months ago

ElviraKukhtaruk commented 3 months ago

Problem 1:

The number of labelDot segments is fixed (16).

Solution:

Added labelDotSegments function to change the default (16) labelDot number of segments:

const Globe = new ThreeGlobe()
        .labelSize('size')
        .labelDotRadius(2)
        .labelColor('color')
        .labelDotSegments(32)

Also, rollup import assertions (the assert keyword) have been removed from node starting in v22.0.0. Using with instead.

Problem 2:

I had some problems with Arc layer when using polygonsData method with polygonAltitude set to 0.01 and labelsData with labelAltitude set to 0.011 because the start/end points of the Arc were under the polygons layer so two label points were not 'connected' with Arc. At small distances, the arc is not even visible.

Example Arc between Frankfurt and Prague:

 let arc = [{
      startLat: 50.1008, startLng: 14.26,
      endLat: 50.033333, endLng: 8.570556
 }];
 globe
    .polygonAltitude(0.01)
    .labelsData(...)
    .labelText(...)
    .labelAltitude(0.011)
    .arcsData(arc)

screenshot_2024-07-03-111508

Solution:

I added the ability to change the altitude of the start/end points of the Arc:

let arc = [{
       startLat: ..., startLng: ..., startAlt: 0.011,
       endLat: ..., endLng: ..., endAlt: 0.011
}];
const Globe = new ThreeGlobe()
      .arcsData(arc)

Example

globe
    .polygonAltitude(0.01)
    .labelsData(...)
    .labelText(...)
    .labelAltitude(0.011)
    .arcsData(arc)
    .arcStartAlt(0.011)
    .arcEndAlt(0.011)

screenshot_2024-07-03-111733

I added these lines of code so that when the arcStartAlt/arcEndAlt is not set, it defaults to 0. Then the existing code will not "break" if the arcStartAlt/arcEndAlt is not set (src/layers/arcs.js):

  // Set default altitude
  if(!curveD.startAlt) curveD.startAlt = 0;
  if(!curveD.endAlt) curveD.endAlt = 0;