1、tooltipcss//工具提示样式.tooltipdiv-inner{padding:3px8px;}/*向左*/.toolTip-left{position:absolute;宽度：300px；最小高度：80px；border:4pxsolidrgba(19,159,255,1);边界半径：20px；背景色：rgba(30,49,74,0.6);}.toolTip-left:before{content:"";显示：块；位置：绝对；左：-20px；顶部：50%；变换：翻译Y(-50%)；border-top:20px实心透明；border-bottom:20px实心透明；border-right:20pxsolidrgba(19,159,255,1);}//内容样式.con{font-size:28px;颜色：#ffff；line-height:80px;}//工具提示样式.tooltipdiv-inner{padding:3px8px;}/*向左*/.toolTip-left{position:absolute;宽度：300px；最小高度：80px；border:4pxsolidrgba(19,159,255,1);边界半径：20px；背景色：rgba(30,49,74,0.6);}.toolTip-left:before{content:"";显示：块；位置：绝对；左：-20px；顶部：50%；变换：翻译Y(-50%)；border-top:20px所以盖子透明；border-bottom:20px实心透明；border-right:20pxsolidrgba(19,159,255,1);}//contentstyle.con{font-size:28px;颜色：#ffff；line-height:80px;}//2.使用函数动态创建tooltip的dom结构tooltip.jsvarTooltipDiv=(function(){varisInit=false;function_(){};_.initTool=function(frameDiv){if(isInit){return;}vardiv=document.createElement('DIV');div.className="toolTip-left";////vararrow=document.createElement('DIV');//arrow.className="tooltipdiv-arrow";//div.appendChild(arrow);vartitle=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){如果(!isInit){返回;}if(position&&message){this.setVisible(true);this._title.innerHTML=消息；this._div.style.position="绝对"this._div.style.left=position.x+60+"px";this._div.style.top=(position.y-this._div.clientHeight/2)+"px";}};return_;})();exportdefaultTooltipDiv//在页面导入cesium界面tooltip.jsimportTooltipDivfrom"../../assets/tooltip.js"varviewer=newCesium.Viewer('cesiumContainer',{imageryProvider:newCesium.UrlTemplateImageryProvider({url:'http://www.google.cn/maps/vt?lyrs=y&x={x}&gl=cn&y={y}&z={z}',tilingScheme:newCesium.WebMercatorTilingScheme()}),creditContainer:"cesiumContainer",selectionIndicator:false,animation:false,baseLayerPicker:false,geocoder:false,timeline:false,sceneModePicker:true,navigationHelpButton:false,infoBox:false,fullscreenButton:true});//绘制广告牌letimg=require("../assets/images/life.png")viewer.scene.globe.depthTestAgainstTerrain=true;varbillboard=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,宽度:32,高度:145,pixelOffset:newCesium.Cartesian2(0,-72),}});viewer.zoomTo(billboard);varscene=viewer.scene;varhandler=newCesium.ScreenSpaceEventHandler(scene.canvas);TooltipDiv.initTool(viewer.cesiumWidget.container);//鼠标进入自定义弹出框handler.setInputAction(function(movement){if(scene.mode!==Cesium.SceneMode.MORPHING){varpickedObject=scene.pick(movement.endPosition);console.log(pickedObject,'gggggg')if(scene.pickPositionSupported&&Cesium.ddefined(pickedObject)&&pickedObject.id._id==='111111'){TooltipDiv.showAt(movement.endPosition,`
