how to re initialize webglglobe with vue

227 Views Asked by At

I am using http://www.webglearth.org/api for a globe on my vue app. I have a route called globe that initializes the globe with new WE.map. when I change routes and go back it re initializes but re adds scripts to my head which jam up the globe tiles from loading. Is there a way to keep and re use an instantiated object? Or any tips that could help with this

I tried saving my created globe in the store and re using it though it wont reload without doing a WE.map and that method adds the headers

this method is being called on vue create

initialize(data) {
  var earth =  WE.map("earth_div");
  WE.tileLayer(
    "https://webglearth.github.io/webglearth2-offline/{z}/{x}/{y}.jpg",
    {
      tileSize: 256,
      bounds: [[-85, -180], [85, 180]],
      minZoom: 0,
      maxZoom: 16,
      attribution: "WebGLEarth example",
      tms: true
    }
  ).addTo(earth);

  data.forEach(doc => {
    let latlng = [];
    console.log(typeof doc.data().images);
    console.log(doc.data().galleryTitle);
    latlng[0] = doc.data().lat;
    latlng[1] = doc.data().lng;
    console.log(latlng);
    var marker = WE.marker(latlng).addTo(earth);
    marker.element.id = doc.data().safeTitle;
    let popup = `${doc.data().location}`;
    marker
      .bindPopup(popup, { maxWidth: 150, closeButton: true })
      .openPopup();

    marker.element.onclick = e => {
      console.log(e.target.parentElement.id);
      var gallery = e.target.parentElement.id;
      this.$router.push({ path: "/gallery/" + gallery });
    };
  });

  // Start a simple rotation animation
  var before = null;
  requestAnimationFrame(function animate(now) {
    console.log('animating')
    var c = earth.getPosition();
    var elapsed = before ? now - before : 0;
    before = now;
    earth.setCenter([c[0], c[1] + 0.1 * (elapsed / 30)]);
    // requestAnimationFrame(animate);
  });
  earth.setView([46.8011, 8.2266], 3);
  this.$store.commit('setEarth',earth)
},

I would like the globe to re initiate without re adding headers.

0

There are 0 best solutions below