vue+mars3d点击图层展示炫酷的popup弹窗

展示效果

目录

一：叠加数据图层到地图上，此时需要使用bindPopup绑定popup

二、封装自定义的popup，样式可以自行调整

---

一：叠加数据图层到地图上，此时需要使用bindPopup绑定popup

这里我根据数据不同，展示的信息框内容不同，在这里进行了信息框内容的封装判断

  function arcgisServer(i,d,m,p){
    let list = [];
    let title = "";
    if(d.data == 'Gfqmwfw'){
      list = ['分区号','分区数量','xxxxx','xxx'];
      title = "分区名称"
    }else if(d.data == 'Mqztfw'){
      list = ['面积','数量','xxx','xxx'];
      title = "图层名称"  
    }else{
      list = ['类型','所属分区','xxx','xxx'];
      title = "位置"  
    }
    i[d.data] = new mars3d.layer.ArcGisLayer({
      name:d.label,
      url:p,
      flyTo: true
    })
    m.addLayer(i[d.data])
    i[d.data].on(mars3d.EventType.click,function(e){
      i[d.data].bindPopup(
        addPopupGraphic(m,e.attr[title],e.attr,list,e.cartesian)
      )
    })
  }

二、封装自定义的popup，样式可以自行调整

这里使用DivGraphic，详细属性可以详见：Mars3D 三维可视化平台 | 火星科技 | 地图开发

function addPopupGraphic(m,title,p,list,cartesian) {
  let positions = cartesian3ToLngLat(m,cartesian)//处理的坐标系转换，此行可去掉
  let x = positions.lng;
  let y = positions.lat;
  let s_html = `<div class="marsTiltPanel marsTiltPanel-theme-green">
          <div class="marsTiltPanel-wrap">
              <div class="area">
                  <div class="arrow-lt"></div>
                  <div class="b-t"></div>
                  <div class="b-r"></div>
                  <div class="b-b"></div>
                  <div class="b-l"></div>
                  <div class="arrow-rb"></div>
                  <div class="label-wrap">
                      <div class="title">${title}</div>
                      <div class="label-content">`
            for(let o in p){
              if(list.indexOf(o) != -1){
                s_html+= `
                  <div class="data-li" >
                      <div class="data-label">${o}</div>
                      <div class="data-value"><span class="label-num">${p[o]}</span>
                      </div>
                  </div>`;
                }

            }
            s_html +=`</div>
                  </div>
              </div>
              <div class="b-t-l"></div>
              <div class="b-b-r"></div>
          </div>
          <div class="arrow" ></div>
      </div>`
  graphicLayer_popup = new mars3d.layer.GraphicLayer();
  m.addLayer(graphicLayer_popup)
  let graphic_pop = new mars3d.graphic.DivGraphic({
    position: [x,y],
    style: {
      html: s_html,
      scaleByDistance: new Cesium.NearFarScalar(1000, 1.0, 300000, 0.2),//这里根据需要自行配置：是否按视距缩放
      clampToGround: true,
    },
  })
  graphic_pop.addTo(graphicLayer_popup)
}