0

我在我的 vue 应用程序中使用http://www.webgearth.org/api作为地球仪。我有一条名为地球的路线，它用新的 WE.map 初始化地球。当我更改路线并返回时，它会重新初始化，但会在我的脑海中重新添加脚本，这些脚本会阻塞地球图块的加载。有没有办法保留和重新使用实例化的对象？或任何可以帮助解决此问题的提示

我尝试将创建的地球仪保存在商店中并重新使用它，尽管它不会在不执行 WE.map 的情况下重新加载，并且该方法会添加标题

这个方法在 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)
},

我希望地球在不重新添加标题的情况下重新启动。

4

0 回答 0