cesium 實現廣告牌移入顯示tooltip

一、tooltip css

// tooltip 樣式
.tooltipdiv-inner {
  padding: 3px 8px;
}
/* 向左 */
.toolTip-left {
  position: absolute;
  width: 300px;
  min-height: 80px;
  border: 4px solid rgba(19, 159, 255, 1);
  border-radius: 20px;
  background-color: rgba(30, 49, 74, 0.6);
}
.toolTip-left:before {
  content: "";
  display: block;
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid rgba(19, 159, 255, 1);
}
// 內容樣式
.con {
  font-size: 28px;
  color: #ffff;
  line-height: 80px;
}

// tooltip 樣式
.tooltipdiv-inner {
  padding: 3px 8px;
}
/* 向左 */
.toolTip-left {
  position: absolute;
  width: 300px;
  min-height: 80px;
  border: 4px solid rgba(19, 159, 255, 1);
  border-radius: 20px;
  background-color: rgba(30, 49, 74, 0.6);
}
.toolTip-left:before {
  content: "";
  display: block;
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid rgba(19, 159, 255, 1);
}
// 內容樣式
.con {
  font-size: 28px;
  color: #ffff;
  line-height: 80px;
}

// 二、經過函數去動態建立tooltip的dom結構
tooltip.js

var TooltipDiv = (function () {

  var isInit = false;

  function _ () { };

  _.initTool = function (frameDiv) {
    if (isInit) { return; }

    var div = document.createElement('DIV');
    div.className = "toolTip-left";//

    // var arrow = document.createElement('DIV');
    // arrow.className = "tooltipdiv-arrow";
    // div.appendChild(arrow);

    var title = document.createElement('DIV');
    title.className = "tooltipdiv-inner";
    div.appendChild(title);

    this._div = div;
    this._title = title;

    frameDiv.appendChild(div);

    isInit = true;
  }

  _.setVisible = function (visible) {
    if (!isInit) { return; }
    this._div.style.display = visible ? 'block' : 'none';
  };

  /*
  position屏幕座標
  顯示在屏幕上
  */
  _.showAt = function (position, message) {
    if (!isInit) { return; }
    if (position && message) {
      this.setVisible(true);
      this._title.innerHTML = message;
      this._div.style.position = "absolute"
      this._div.style.left = position.x + 60 + "px";
      this._div.style.top = (position.y - this._div.clientHeight/2) + "px";
    }
  };

  return _;
})();

export default TooltipDiv

// 在頁面引入cesium界面tooltip.js
import TooltipDiv from "../../assets/tooltip.js"

var viewer = new Cesium.Viewer('cesiumContainer', {
  imageryProvider: new Cesium.UrlTemplateImageryProvider({
    url: 'http://www.google.cn/maps/vt?lyrs=y&x={x}&gl=cn&y={y}&z={z}',
    tilingScheme: new Cesium.WebMercatorTilingScheme()
  }),
  creditContainer: "cesiumContainer",
  selectionIndicator: false,
  animation: false,
  baseLayerPicker: false,
  geocoder: false,
  timeline: false,
  sceneModePicker: true,
  navigationHelpButton: false,
  infoBox: false,
  fullscreenButton: true
});

//繪製廣告牌
let img = require("../assets/images/life.png")
viewer.scene.globe.depthTestAgainstTerrain = true;
var billboard = viewer.entities.add({
  id: '111111',
  name: "程海指揮中心",
  info: {
    name: 'aaaa',
    val: 100
  },
  position: Cesium.Cartesian3.fromDegrees(110.20, 34.55, 3000),
  billboard: {
    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
    image: img,
    verticalOrigin: 0,
    width: 32,
    height: 145,
    pixelOffset: new Cesium.Cartesian2(0, -72),
  }
});

viewer.zoomTo(billboard);

var scene = viewer.scene;
            var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
            TooltipDiv.initTool(viewer.cesiumWidget.container);
            // 鼠標移入自定義彈出框
            handler.setInputAction(function (movement) {
              if (scene.mode !== Cesium.SceneMode.MORPHING) {
                var pickedObject = scene.pick(movement.endPosition);
                console.log(pickedObject, 'gggggg')
                if (scene.pickPositionSupported && Cesium.defined(pickedObject) && pickedObject.id._id === '111111') {
                  TooltipDiv.showAt(movement.endPosition, `<div class="con">名字：${pickedObject.id._name}</div>`);
                } else {
                  TooltipDiv.setVisible(false);
                }
              }
            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

// 本人也是拾人牙慧，若有不對還多多指教
參考文章：樣式https://www.jianshu.com/p/fdf...
顯示隱藏：https://blog.csdn.net/u013270...
感謝大佬的demo: HPUZYZ