展示效果

目录

一：叠加数据图层到地图上，此时需要使用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)
}