Mars3d 信息提示类控件

• Html 文本（{content）部分，整体展示的DOM由template和Htm属性共同组成
• template 公共部分外框部分html内容，需要加2处： (1)用于填充html的地方写上{content}标识； (2)关闭按钮加class样式：closeButton。 传空字符串或false时，不用内置模版

• Tooltip Popup都是继承DivGraphic

divGraphic案例

• DivGraphic pointerEvents:false// false时不允许拾取和触发任意鼠标事件

Popup文档
Popup.StyleOptions文档

鼠标悬浮Tooltip提示

bindTooltip(content,options)

// 绑定Tooltip
graphic.bindTooltip(this.getInnerHtml, {
  direction: "top",
  template:`{content}`,//全局公共样式
  horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
  verticalOrigin: Cesium.VerticalOrigin.CENTER,
  offsetX:-155,
  offsetY:-150,
}).openTooltip();

getInnerHtml(event) {
  const attr = event.graphic.attr;
  let content = `<div class="siteWrap" >
                    <div class="siteTit" >${attr.stationName}</div>
                    <div class="siteCont">
                        <div class="siteList">
                            <div>${attr.waitingNum}人</div>
                            <div>当前预约人数</div>
                        </div>
                    </div>
                 </div>`;
  return content
},

• 绑定的时候就 openTooltip() 否则每次显示的内容都是绑定的上一次值的Tooltip

• 解除绑定的时候就 unbindTooltip() - 单个graphic或者整体图层都可以接触绑定

Tooltip点击事件

js自定义dom点击事件是获取挂在window.functiom Popup也有自带的点击事件

graphic.on(mars3d.EventType.tooltipOpen, function (event) {
  const container = event.container // popup对应的DOM
  console.log("打开了tooltip", container)
  const btnDetails = container.querySelector("#btnDetails")
  if (btnDetails) {
    btnDetails.addEventListener("click", (e) => {
      showXQ()
    })
  }
})
graphic.on(mars3d.EventType.tooltipClose, function (event) {
  const container = event.container // tooltip对应的DOM
  console.log("移除了tooltip", container)
})

鼠标点击bindPopup提示

graphic.bindPopup(getInnerHtml(content), {
  direction: "right",
  template:content,
  horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
  verticalOrigin: Cesium.VerticalOrigin.CENTER,
  offsetX:fontSize.f20,
  offsetY:-fontSize.f50
}).openPopup()

• 绑定的时候就 openPopup() 否则每次显示的内容都是绑定的上一次值的Tooltip

• 解除绑定的时候就 unbindPopup() - 单个graphic或者整体图层都可以接触绑定

Popup自定义dom内部的点击事件

js自定义dom点击事件是获取挂在window.functiom Popup也有自带的点击事件

function getInnerHtml(event) {
  // let attr = event.graphic.attr
  const inthtml = `<button id="btnDetails">更多</button>`
  return inthtml
}
graphic.on(mars3d.EventType.popupOpen, function (event) {
  const container = event.container // popup对应的DOM
  console.log("打开了popup", container)
  const btnDetails = container.querySelector("#btnDetails")
    btnDetails.addEventListener("click", (e) => {
    })
})
graphic.on(mars3d.EventType.popupClose, function (event) {
  const container = event.container // popup对应的DOM
  console.log("移除了popup", container)
})

Popup

Popu文档

let rspPopupLayer =  new mars3d.layer.GraphicLayer();
this.map.addLayer(rspPopupLayer);
const graphic = new mars3d.graphic.Popup({
  position: rspMarkPosition,
  style: {
    template:`<div style="display: flex;flex-direction: column;align-items: center;">
    <div class="ispt_0">${currentRspName}</div>
    <div  class="ispt_1" ></div>
    </div>`,
    closeButton: false,
    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), // 按视距距离显示
  },
  attr: { remark: "示例8" }
})
this.rspPopupLayer.addGraphic(graphic)
setTimeout(() => {
  this.rspPopupLayer.clear()
}, 5000)