cesium 添加广告牌和鼠标移入显示弹框

<template>

  <div>

    <div class="top">

      <div class="topContent">

        <div><img :src="leftSvg" /></div>

        <div class="topTitle">煤炭供应</div>

        <div><img :src="rightSvg" /></div>

      </div>

    </div>

    <!-- <iframe :src="titleSvg" width="1920" height="50"></iframe> -->

    <!-- <div class="topTitle">

      <img :src="titleSvg" width="1920" height="70" />

    </div> -->

 

    <div class="centerMap">

      <cesium-map-mei @ready="ready"></cesium-map-mei>

    </div>

    <coal-left>

      <template slot-scope="user" slot="top">

        <div class="tmp1">

          <div class="line"></div>

          <div>{{ user.data }}</div>

        </div>

      </template>

      <template slot-scope="user" slot="middle">

        <div class="tmp2">

          <div class="line"></div>

          <div>{{ user.data2 }}</div>

        </div>

      </template>

    </coal-left>

    <coal-right>

      <template slot-scope="user" slot="rightTop">

        <div class="tmp3">

          <div class="line"></div>

          <div class="titleStyle">

            <div>{{ user.data }}</div>

            <div>博山区</div>

          </div>

        </div>

      </template>

      <template slot-scope="user" slot="rightMiddle">

        <div class="tmp4">

          <div class="line"></div>

          <div class="titleStyle">

            <div>{{ user.data2 }}</div>

            <div>博山区</div>

          </div>

        </div>

      </template>

    </coal-right>

    <!-- <coal-bottom></coal-bottom> -->

  </div>

</template>

 

<script>

import Vue from "vue";

import CoalBottom from "./CoalBottom.vue";

import CoalLeft from "./CoalLeft.vue";

import CoalRight from "./CoalRight.vue";

import Home from "../Home";

import CesiumMapMei from "../../components/CesiumMapMei.vue";

export default {

  name: "CoalSupply",

  components: { CoalLeft, CoalRight, CoalBottom, Home, CesiumMapMei },

  data() {

    return {

      leftSvg: require("../../assets/images/arrow_left.svg"),

      rightSvg: require("../../assets/images/arrow_right.svg"),

      position: {

        degrees: [117.863807, 36.462887, 2599.2725747138],

        heading: 348.75153786682165, //方向

        pitch: -84.74079595488344, //倾斜角度

        roll: 359.96671496629347,

        duration: 1, //持续时间

      },

    };

  },

  mounted() {

    this.addBillboard();

  },

  methods: {

    ready(viewer) {

      Vue.prototype.viewer = viewer;

      this.flyTo(this.position);

      this.showPickedFeatureinfo(viewer);

    },

    addBillboard() {

      this.viewer.entities.add({

        id: "1",

        name: "发电厂",

        // data: { xx: "xxx" },

        position: Cesium.Cartesian3.fromDegrees(117.863807, 36.462887, 30.0),

        billboard: {

          image: require("../../assets/images/icon_coalr.png"),

          width: 50,

          height: 50,

        },

      });

      this.viewer.entities.add({

        id: "2",

        name: "煤矿",

        position: Cesium.Cartesian3.fromDegrees(117.863807, 36.469889, 30.0),

        billboard: {

          image: require("../../assets/images/icon_coal.png"),

          width: 50,

          height: 50,

        },

      });

    },

    showPickedFeatureinfo(viewer) {

      var nameOverlay = document.createElement("div");

      viewer.container.appendChild(nameOverlay);

      nameOverlay.className = "backdrop";

      nameOverlay.style.display = "none";

      nameOverlay.style.position = "absolute";

      nameOverlay.style.bottom = "0";

      nameOverlay.style.left = "0";

      nameOverlay.style["pointer-events"] = "none";

      nameOverlay.style.padding = "4px";

      nameOverlay.style.backgroundColor = "#fff";

      nameOverlay.style.width = "200px";

      nameOverlay.style.height = "200px";

 

      viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {

        var pick = viewer.scene.pick(movement.endPosition);

        let name;

        if (Cesium.defined(pick)) {

          if (pick.id) {

            if (pick.id.name) {

              if (pick.id.name == "发电厂" && pick.id.id == "1") {

                name = "发电厂";

                nameOverlay.style.display = "block";

                nameOverlay.style.color = "#000000";

                nameOverlay.style.bottom =

                  viewer.canvas.clientHeight - movement.endPosition.y + "px";

                nameOverlay.style.left = movement.endPosition.x + "px";

                nameOverlay.textContent = name;

              } else if (pick.id.name == "煤矿" && pick.id.id == "2") {

                name = "煤矿";

                nameOverlay.style.display = "block";

                nameOverlay.style.color = "#000000";

                nameOverlay.style.bottom =

                  viewer.canvas.clientHeight - movement.endPosition.y + "px";

                nameOverlay.style.left = movement.endPosition.x + "px";

                nameOverlay.textContent = name;

              }

            } else {

              nameOverlay.style.display = "none";

            }

          } else {

            nameOverlay.style.display = "none";

          }

        } else {

          nameOverlay.style.display = "none";

        }

      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

    },

  },

};

</script>

 

<style lang="less" scoped>

.top {

  width: 1920px;

  height: 71px;

  // background: linear-gradient(90deg, #0a5f97 0%, rgba(4, 49, 94, 0.2) 100%);

  background: linear-gradient(

    90deg,

    #0a5f97 0%,

    rgba(141, 228, 255, 0.08) 30%,

    #061930 100%

  );

  position: absolute;

  top: 0;

  left: 0;

}

.centerMap {

  width: 1000px;

  height: 653px;

  position: absolute;

  top: 86px;

  left: 450px;

}

.topContent {

  width: 23%;

  height: 71px;

  display: flex;

  flex-direction: row;

  justify-content: space-around;

  align-items: center;

  position: absolute;

  top: 0px;

  left: 20px;

}

.topTitle {

  font-size: 24px;

  font-family: PingFangSC-Medium, PingFang SC;

  font-weight: 500;

  color: #ffffff;

  line-height: 68px;

  letter-spacing: 8px;

  text-shadow: 0px 5px 4px rgba(0, 0, 0, 0.5);

  background: linear-gradient(180deg, #26eafd 0%, #bae3ff 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}

.tmp1 {

  color: #ffffff;

  position: absolute;

  top: 10px;

  left: 10px;

  z-index: 99999999999;

  display: flex;

  flex-direction: row;

  justify-content: center;

  align-items: center;

}

.tmp2 {

  color: #ffffff;

  position: absolute;

  top: 240px;

  left: 10px;

  z-index: 99999999999;

  display: flex;

  flex-direction: row;

  justify-content: center;

  align-items: center;

}

.tmp3 {

  color: #ffffff;

  position: absolute;

  top: -15px;

  left: 10px;

  z-index: 99999999999;

  display: flex;

  flex-direction: row;

  justify-content: center;

  align-items: center;

}

.tmp4 {

  color: #ffffff;

  position: absolute;

  top: 215px;

  left: 10px;

  z-index: 99999999999;

  display: flex;

  flex-direction: row;

  justify-content: center;

  align-items: center;

}

.titleStyle {

  width: 420px;

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  align-items: center;

}

</style>