3D Globe.gl 的性能问题

如何解决3D Globe.gl 的性能问题

我使用 disease.sh API 和 Globe.gl 实现了 covid-19 数据可视化。

我努力解决性能问题，几分钟后屏幕冻结。

我在谷歌上查看了 PageSeppe Insights，它说“ 降低第三方代码影响第三方代码阻塞主线程25690ms"

这是globe.gl，免费图书馆。 https://unpkg.com/globe.gl@2.22.3/dist/globe.gl.min.js

如果有人给我建议以改善我的一面，我将不胜感激。

public class MainAbilitySlice extends AbilitySlice {

    private DatePicker datePicker;

    @Override

    public void onStart(Intent intent) {

        super.onStart(intent);

        super.setUIContent(ResourceTable.Layout_ability_main);

        initView();

    }



    private void initView() {

        if (findComponentById(ResourceTable.Id_data_picker) instanceof DatePicker) {

            datePicker = (DatePicker) findComponentById(ResourceTable.Id_data_picker);

        }

        if (datePicker != null) {

            // If you select Monday or Sunday as the first day of a week,select the corresponding method. This example selects Monday as the first day of the week

            LocalDateTime mondayForThisWeek = LocalDateTimeUtil.getMondayForThisWeek(LocalDate.Now());

            datePicker.updateDate(mondayForThisWeek.getYear(),mondayForThisWeek.getMonth().getValue(),mondayForThisWeek.getDayOfMonth());

        }

    }

}

var mycData = null;
var NowMode = "Active";
var myWorld = null;

window.onload = function() {
  //covid API data
  var url = 'https://disease.sh/v3/covid-19/countries?yesterday=yesterday';
  fetch(url)
  .then(function (data) {
    return data.json();
  })
  .then(function (cData) {

    mycData = cData;
    //Vaccination informationGet!
    url = 'https://disease.sh/v3/covid-19/vaccine/coverage/countries?lastdays=2&fullData=true';
    fetch(url)
    .then(function (data) {
      return data.json();
    })
    .then(function (cData) {
      for(var i=0;i<mycData.length;i++){
        //console.log(mycData[i]);
        for(var ii=0;ii<cData.length;ii++){
          var Country = cData[ii].country;
          var VaccinationCount = cData[ii].timeline[0].total;
          if(Country == mycData[i].country){
            //console.log(Country + " => " + VaccinationCount);
            mycData[i].vaccination = VaccinationCount;
          }
        }
      }
      makeMap(mycData);
    });
  });
};

// document.getElementById("cases").addEventListener('click',function(){
//   NowMode = "Cases";
//   document.getElementById("CasesColor").style.display ="block";
//   document.getElementById("VaccinationColor").style.display ="none";
//   makeMap(mycData);
// });
document.getElementById("active").addEventListener('click',function(){
  NowMode = "Active";
  document.getElementById("CasesColor").style.display ="block";
  document.getElementById("VaccinationColor").style.display ="none";
  makeMap(mycData);
});

document.getElementById("vaccination").addEventListener('click',function(){
  NowMode = "Vaccination";
  document.getElementById("CasesColor").style.display ="none";
  document.getElementById("VaccinationColor").style.display ="block";
  makeMap(mycData);
});

function makeMap(cData){
  const colorScale = d3.scaleSequentialSqrt(d3.interpolateYlOrRd);
  const getVal = feat => feat.properties.GDP_MD_EST / Math.max(1e5,feat.properties.POP_EST);

  fetch('https://raw.githubusercontent.com/vasturiano/globe.gl/master/example/datasets/ne_110m_admin_0_countries.geojson').then(res => res.json()).then(countries =>

  // fetch('js/countries.geojson').then(res => res.json()).then(countries =>

  {
    const maxVal = Math.max(...countries.features.map(getVal));
    colorScale.domain([0,maxVal]);

    //adding api data to properties match with ISO_A2
    //adjusting data which is not matched,data for -99
    for(var i=0;i<countries.features.length;i++){

      switch(countries.features[i].properties.ADMIN){
        case "France":
          countries.features[i].properties.ISO_A2 = "FR";
          break;
        case "norway":
          countries.features[i].properties.ISO_A2 = "NO";
          break;
        case "Somaliland":
          countries.features[i].properties.ISO_A2 = "SO";
          break;
        case "Turkmenistan":
          countries.features[i].properties.ISO_A2 = "TR";
          break;
      }

      var cExists = false;
      //insert data into array
      for(var ii=0;ii<cData.length;ii++){
        if(countries.features[i].properties.ISO_A2 == cData[ii].countryInfo.iso2){
          cExists = true;
          var c_data = cData[ii];
          countries.features[i].properties["flag"] = c_data.countryInfo.flag; // flag
          countries.features[i].properties["cases"]          = c_data.cases;
          countries.features[i].properties["deaths"]         = c_data.deaths;
          countries.features[i].properties["recovered"]      = c_data.recovered;
          countries.features[i].properties["active"]         = c_data.active;
          countries.features[i].properties["casesPerOneMillion"] = c_data.casesPerOneMillion;
          countries.features[i].properties["vaccination"] = c_data.vaccination;


          switch(NowMode){
            // case "Cases":
            //   countries.features[i].properties["bgColor"]   = getColor(c_data.cases);
            //   break;
            case "Active":
              countries.features[i].properties["bgColor"]   = getColor(c_data.active);
              break;
            case "Vaccination":
              countries.features[i].properties["bgColor"]   = getColorVaccination(c_data.vaccination);
              break;
          }
        }
      }
    }

    if(myWorld != null) myWorld = null;
    myWorld = Globe()
      .globeImageUrl('https://unpkg.com/three-globe@2.18.1/example/img/earth-night.jpg')
      .backgroundColor('#232946')
      .lineHoverPrecision(0)
      .polygonsData(countries.features.filter(d => d.properties.ISO_A2 !== 'AQ'))
      .polygonAltitude(0.06)
      .polygonCapColor(d =>  d.properties.bgColor)
      .polygonSideColor(() => 'rgba(255,215,0.15)') //shadow to globe
      .polygonstrokeColor(() => '#111')
      .polygonLabel(({ properties: d }) => `
      <div class="info-board">
      <span class="flag"><img src="${d.flag}" class="flag"></span>
      <span class="country">${d.ADMIN}</span>
      <hr class="hr-info">
      <div class="info-title-top">Active: ${d.deaths.toLocaleString()} </div>
      <div class="info-title">Total Cases: ${d.cases.toLocaleString()} </div>
      <div class="info-title">Total Recovered: ${d.recovered.toLocaleString()} </div>
      <div class="info-title">Total Deaths: ${d.deaths.toLocaleString()} </div>
      <div class="info-title">Cases Per Million: ${d.casesPerOneMillion.toLocaleString()}</div>
      <hr class="hr-info2">
      <div class="info-title-v">Vaccination: ${d.vaccination.toLocaleString()}</div>
      </div>
    `)

 // (${d.ISO_A2}) if add iso_a2 code to display

      .onpolygonHover(hoverD => myWorld
      .polygonAltitude(d => d === hoverD ? 0.15 : 0.06) //hover height
        //.polygonCapColor(d => d === hoverD ? '#edfaef' : colorScale(getVal(d))) // hover color
      )

      // .polygonsTransitionDuration(3000)

      // .showGlobe(true)


    (document.getElementById('globeViz'))

     // Add auto-rotation
     myWorld.controls().autoRotate = false;
     myWorld.controls().autoRotateSpeed = 0.3;

      // responsive
      window.addEventListener('resize',(event) => {
      myWorld.width([event.target.innerWidth])
      myWorld.height([event.target.innerHeight])
      });

  });
}


function getColor(d) {
    return d > 10000000 ? '#800026' :
            d > 5000000 ? '#BD0026' :
            d > 1000000 ? '#E31A1C' :
            d >  500000 ? '#FC4E2A' :
            d >  100000 ? '#FD8D3C' :
            d >   50000 ? '#FEB24C' :
            d >   10000 ? '#FED976' :
                           '#FFEDA0';
  }


function getColorVaccination(d) {
  return d > 10000000 ? '#084081' :
         d > 5000000 ? '#0868ac' :
         d > 1000000 ? '#2b8cbe' :
         d > 500000 ? '#4eb3d3' :
         d > 100000 ? '#7bccc4' :
         d > 50000 ? '#a8ddb5' :
         d > 10000 ? '#ccebc5' :
         '#e0f3db';
}

html {
  Box-sizing: border-Box;
}
*,*:before,*:after {
  Box-sizing: inherit;
}
html,body {
  /* z-index: 999; */
  margin: 0;
  padding: 0;
  background: #232946;
  overflow: hidden;
  height: 100%;
  font-family: 'Space Mono',monospace !important;
}

h1 {
  font-weight: 700;
  font-size: 34px;
  margin-top:10px;
  margin-bottom:0px;
  color:#fff;
}

@media only screen and (min-width: 600px) and (max-width: 992px) {
  h1 {
    font-weight: 700;
    font-size: 28px;
    margin-top:40px;
    }
}

@media only screen and (max-width: 599px) {
  h1 {
    font-weight: 600;
    font-size: 20px;
    margin-top:40px;
    }
}


h3 {
  font-weight: 500;
  font-size: 26px;
  margin-top:3px;
  margin-bottom:0px;
  color:#fff;
}


p {
  margin-bottom: 10px;
  color:#fff;
}

hr{
border: 1px solid rgba(153,153,0.1);
}

section {
  position: absolute;
  top: 2%;
  text-align: center;
  width: 100%;
  color: rgba(255,255,1.0);
  z-index: 999;
}

@media only screen and (max-width: 992px) {
  section {
    position: absolute;
    top: 0%;
    text-align: center;
    width: 100%;
    color: rgba(255,1.0);
    z-index: 99;
  }
}


section2 {
  position: absolute;
  top: 20%;
  padding: 0 20px;
  max-width: 300px;
  width: 100%;
  color: rgba(255,1.0);
  line-height: 1.5;
  z-index: 99;
}

@media only screen and (max-width: 992px) {
  section2 {
    position: absolute;
    top: 15%;
    left:15%;
    padding: 0 20px;
    width: 100%;
    color: rgba(255,1.0);
    z-index: 1;
    }
}


section3 {
  position: absolute;
  bottom: 3%;
  padding: 0 20px;
  max-width: 400px;
  width: 100%;
  color: rgba(255,1.0);
  z-index: 99;
  line-height: 1.5;
}

@media only screen and (max-width: 992px) {
  section3 {
    display:none;
    }
}



#globeViz{
  margin-top: 30px;
}

.list{
 margin-left:5px;
}

.info-board{
  font-family: 'Space Mono',monospace;
  background-color:rgba(0,0.7);
  color:#fff;
  padding:20px;
  margin:20px;
  border: 1px solid white;
  border-radius: 15px;
  display:inline-block;
  white-space: Nowrap;
  z-index: 9999 !important;
}

@media only screen and (max-width: 992px) {
  .info-board {
    width: 100%;
    background-color:rgba(0,0.9);
    color:#fff;
    padding:10px;
    margin:10px;
    border: 1px solid white;
    border-radius: 15px;
    /* display:inline-block; */
    white-space: Nowrap;
    z-index: 9999;
  }
}

.flag {
  text-align: left;
  border-radius: 10px;
  display: inline-block;
  Box-shadow: 0px 0px 20px -5px rgba(0,0.8);
  padding-bottom:3px;
  margin-right:20px;
  margin-left:10px;
  margin-bottom:8px;
  background-position: center ;
  width:70px;
  height:45px;
  vertical-align: middle;
}

.country{
  font-size:30px;
  text-transform: uppercase;
    vertical-align: sub;
}

.info-title-top{
 font-size:18px;
 margin-top: 20px;
 margin-right:20px;
 margin-left:20px;
}

.info-title{
 font-size:18px;
 margin-top: 10px;
 margin-right:20px;
 margin-left:20px;
}

.info-title-v{
 color:#33ffff;;
 font-size:18px;
 margin-top: 10px;
 margin-bottom: 10px;
 margin-right:20px;
 margin-left:20px;
}

.new{
  font-size:14px;
  margin-left:0px;
}

.hr-info{
  border:none;
  border-top:1px dashed #fff;
  height:1px;
  width:90%;
}

.hr-info2{
  border:none;
  border-top:1px dashed #fff;
  height:1px;
  width:90%;
  margin-top:20px;
  margin-bottom:10px;

}

.red{
  color:rgba(255,99,132);
}

.blue{
   color:rgba(51,0.9);
}

@media only screen and (max-width: 992px) {

  .country{
    font-size:24px;
    text-transform: uppercase;
    vertical-align: sub;
  }

  .info-title-top{
   font-size:14px;
   margin-top: 16px;
   margin-right:10px;
   margin-left:10px;
  }

  .info-title{
    font-size:14px;
   margin-top: 10px;
   margin-right:10px;
   margin-left:10px;
  }

  .info-title-v{
   color:#33ffff;;
   font-size:14px;
   margin-top: 10px;
   margin-bottom: 10px;
   margin-right:10px;
   margin-left:10px;
  }

  .new{
    font-size:12px;
    margin-left:0px;
  }
}


/*====== list ======*/

.legend .legend-title {
    text-align: left;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 80%;
}
.legend .legend-scale ul {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
}
.legend .legend-scale ul li {
    display: block;
    float: left;
    width: 40px;
    margin-bottom: 6px;
    text-align: center;
    font-size: 60%;
    list-style: none;
}
.legend ul.legend-labels li span {
    display: block;
    float: left;
    height: 15px;
    width: 40px;
}
.legend .legend-source {
    font-size: 70%;
    color: #999;
    text-align: left;
    clear: both;
}
.legend a {
    color: #777;
}

.legend-set{
    /* margin-top:40px; */
    margin-left:25px;
}

@media only screen and (max-width: 992px) {
.legend-set {
    display:none;
    }
}

.card1 {
  width:100%;
  padding: 20px 15px;
  border-radius: 10px;
  Box-shadow: 0 1px 10px 0 rgba(255,0.1);
  background: rgba(0,0.2);
  border: 1px solid rgba(221,221,0.1);
}

@media only screen and (max-width: 992px) {
.card1 {
  width:100%;
  padding: 10px 15px;
  border-radius: 10px;
  Box-shadow: 0 1px 10px 0 rgba(255,0.5);
  border: 1px solid rgba(221,0.1);
  z-index: -1
}
}

.switch-menu {
    display: inline-block;
    margin-bottom:  10px ;
  }

    @media only screen and (max-width: 992px) {
        .switch-menu {
                display: inline-block;
                padding:  0px;
            }
    }

  hr.none-m {
    margin-bottom: 15px!important;
      }

  @media only screen and (max-width: 992px) {
    .none-m {
        display: none;
      }
  }


.icon{
  width:37px;
  height:37px;
  margin-right: 10px;
  vertical-align: text-bottom;
}

.card2 {
  width:100%;
  margin-top:30px;
  padding: 10px 15px;
  border-radius: 10px;
  Box-shadow: 0 1px 10px 0 rgba(255,0.1);
  z-index: 100;
}

.card3 {
  width:100%;
  margin-top:30px;
  padding: 10px 15px;
  border-radius: 10px;
  Box-shadow: 0 1px 10px 0 rgba(255,0.1);
  z-index: 100;
}

.card4 {
  width:100%;
  margin-top:30px;
  padding: 10px 8px 10px 8px;
  border-radius: 10px;
  Box-shadow: 0 1px 10px 0 rgba(255,0.1);
  z-index: 100;
}


hr.mt{
  margin-top: 10px!important;
}

.chart-area {
  position: relative;
  height: 100%;
  width: 100%;
  margin-top:7px;
}

.casetitle{
    font-size: 22px;
  text-align: center;
  margin-bottom: 10px
}

.c-no{
  text-align: center;
  margin:10px 0px;
  color:rgba(255,132);
  font-size: 24px;
  font-weight: 100;
}


.v-no{
  text-align: center;
  margin:10px 0px;
  color:rgba(51,1.0);
  font-size: 24px;
  font-weight: 100;x
}

/* ***drag suggestion*** */

.drag{
text-align: center;
color:rgba(255,0.2);
margin-bottom: 0px;
}

@media only screen and (max-width: 992px) {
.drag {
  display: none;
 }
}

.left-m {
    display: inline-block;
    padding:  10px;
    animation: move 1s linear infinite;
  }

    @media only screen and (max-width: 992px) {
        .left-m {
                display: inline-block;
                padding:  0px;
            }
    }

  .center-m {
      display: inline-block;
      padding:  10px;
    }

    @media only screen and (max-width: 992px) {
        .center-m {
                display: inline-block;
                padding:  0px;
            }
    }

    .right-m {
        display: inline-block;
        padding:  10px;
        animation: move1 1s linear infinite;

      }

        @media only screen and (max-width: 992px) {
            .right-m {
                    display: inline-block;
                    padding:  0px;
                }
        }


      @keyframes move {
        50% {
          transform: translateX(-10px);
          opacity: 0.5;
        }
        100% {
          transform: translateX(-10px);
          opacity: 0;
        }
      }

      @keyframes move1 {
        50% {
          transform: translateX(10px);
          opacity: 0.5;
        }
        100% {
          transform: translateX(10px);
          opacity: 0;
        }
      }


    .mb-3{
      margin-bottom:30px;
    }


@media only screen and (max-width: 992px) {
.title {
    padding-top: 10px;
    }
}


.mobile{
  display:none;
}

@media only screen and (max-width: 992px) {
  .mobile {
    display:block;
    margin-top:15px;
    }

  hr.toggle-menu{
    margin-top: 30px!important;
  }
}

  /*** pop up ***/
.main{
  margin: 10px;
}

p {
  margin-bottom: 10px;
}

.red{
  color:rgba(255,132);
}

.blue{
   color:#17a2b8;
}