Mars3D+vue2弹窗；根据路由判断弹窗是否显示

一、引入Mars3D库

//安装mars3d主库
npm install mars3d --save   
 
//安装mars3d插件（按需安装）
npm install mars3d-space --save

在main.js引入Mars3D类库全局应用

import Vue from 'vue'
import App from './App.vue'
//在main.js中加入下面代码
import 'mars3d/dist/mars3d.css'
import * as mars3d from 'mars3d'
 
//导入mars3d插件（按需使用，需要先npm install）
import 'mars3d-space'
 
//可以绑定下vue原型链，可以全局使用
Vue.prototype.mars3d = mars3d;
 
//在具体使用的vue等文件中
//直接使用 this.mars3d 进行相关调用。
window.mars3d= mars3d
Vue.config.productionTip = false
 
new Vue({
  render: h => h(App),
}).$mount('#app')

二、Mars3D添加地球及引入弹窗

//引入弹窗文件
import storeList from "@/views/index/components/popFrame/storeList";
import carPop from "@/views/car/components/pop/pop";
//mounted函数引入
mounted() {
    this.initMap();
  },

//在methods方法构建地图
initMap() {
      mars3d.Util.fetchJson({ url: this.url }).then((data) => {
        // 构建地图
        this.initMars3d({
          ...data.map3d,
          ...this.options,
        });
      });
    },

// 创建三维地球场景
      var map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions);
      this[`map${this.mapKey}`] = map;
      storeList.map = map;
      carPop.map = map;
      this.onMapload(map);//加载地图传值
    },

// 地图加载
    onMapload(map) {
      const graphicLayer = new mars3d.layer.GraphicLayer();
      this.graphicLayerMap = graphicLayer;
      map.addLayer(graphicLayer);
      storeList.layer = graphicLayer;
      carPop.layer = graphicLayer;
      this.addCenterCity(graphicLayer);
}, 3000);
    },

// 添加示范城市的相关对象
    addCenterCity(graphicLayer) {
      const cityList = [];//相关对象数组，包括坐标、图片、名称等数据
      cityList.forEach((item) => {//循环数组并传值给需要弹窗的函数
        this.divGraphic(item, graphicLayer);
      });

/**
     * 添加图形
     *
     * @param {Object} point - 图形的点坐标
     * @param {Object} graphic - 待添加的图形
     */
    divGraphic(item, graphicLayer) {
      const graphic = new mars3d.graphic.BillboardEntity({
        position: item.point,
        style: {
          image: defaultBorder,
          scale: 1,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          label: {
            text: item.name,
            font_size: 18,
            color: "#ffffff",
            pixelOffsetY: -50,
          },
        },
        attr: { remark: "示例4" },
      });
      graphicLayer.addGraphic(graphic);
       //存储值到弹框函数
      storeList.graphic = graphic;
      carPop.graphic = graphic;
      carPop.cityList.push(item.name);
      storeList.cityList.push(item.name);
    },

三、引入3d地图的storeList.js文件

storeList文件同引入的carPop文件

import "./storeList.css";//引入样式文件
const storeList = {
//传入的值存储
  layer: null,
  map: null,
  cityList: [],
  graphic: null,

  // 弹窗方法：routerItem是否显示，item传入的值，graphic：3d对象
  addDemoGraphic3: (routerItem, item, graphic) => {
    const info = require("./img/info-img.png");
    const monitor = require("./img/monitor.png");
    if (routerItem !== true) return false;
    // 进入前清空
    // graphic.clear();
    let innerHtml = `<div class="info-windo">
      <div class="info-head">
        <div class="info-title fstyle">${item}</div>
        <div class="monitor">
          <img src=${monitor} />
        </div>
      </div>
      <!-- 内容 -->
      <div class="content">
        
        <!-- 图片 -->
        <div class="content-img">
          <span>AAAA级</span>
          <img src=${info} />
        </div>
        <div>
          简介:xxxxxxxxxxx
        </div>
        <div class="content-shi">
          <span>实时客流</span>
          <div>4461人</div>
        </div>
        <!-- 进度条 -->
        <div class="progress-bar">
          <div></div>
        </div>
        <div>
          景区最大承载量：<span>2000</span>人
        </div>
        <div>
          未来五天游客预约数：<span>2000</span>人
        </div>
        <div>游玩项目推荐</div>
        <!-- 按钮 -->
        <div class="btn">
          <div>项目1</div>
          <div>项目2</div>
          <div>项目3</div>
        </div>
      </div>
    </div>`;
    // 移入或移除弹窗展示
    // graphic.on(mars3d.EventType.tooltipOpen, function (event) {
    //   const container = event.container; // popup对应的DOM
    //   console.log(333);
    //   // console.log("打开了popup");
    // });
    // graphic.on(mars3d.EventType.tooltipClose, function (event) {
    //   const container = event.container; // popup对应的DOM
    //   // console.log("关闭了popup");
    // });
    // 绑定Tooltip打开或关闭
    graphic.bindTooltip(innerHtml, { offsetY: -40, pointerEvents: false });
  },
};

export default storeList;

四、需要展示弹窗的组件

computed方法写法：

computed: {
    layer() {
      return deviceStore.layer;
    },
  },

watch见听到变化执行：

watch: {
    layer: {
      handler(newVal) {
        if (newVal) {
          deviceStore.cityList.map((item) => {
            deviceStore.addDemoGraphic3(true, item, newVal);
          });
          // this.init();
        }
      },
      immediate: true,
    },
  },

组件初加载展示弹窗（可省略）

mounted() {
    // 设置延迟时间，等待数据返回
    setTimeout(() => {
      this.init();
    }, 1000);
  },
  methods: {
    // 初始化展示弹窗
    init() {
      deviceStore.cityList.map((item) => {
        deviceStore.addDemoGraphic3(true, item, deviceStore.layer);
      });
    },
  },

五、Mars3d文件根据路由判断弹窗是否展示

通过监听路由变化来判断是否显示弹窗

computed: {
    routerItem() {
      return this.$route.path;
    },
  },
  watch: {
    routerItem: {
      // 根据路由判断是否解除弹窗绑定
      handler(val) {
        if (val != "/index" && val != "/car") {
          if (storeList.layer && carPop.layer) {
            storeList.layer.unbindTooltip();
            carPop.layer.unbindTooltip();
          }
        }
      },
      immediate: true,
    },
  },

六、关闭组件时需要销毁地图

  beforeDestroy() {
    const map = this[`map${this.mapKey}`];
    if (map) {
      map.destroy();
      delete this[`map${this.mapKey}`];
    }
    // console.log(">>>>> 地图卸载完成 >>>>");
  },