cesium自定义气泡窗口infoWindow
一、自定义气泡窗口与cesium默认窗口效果对比: 1.cesium点击弹出气泡窗口显示的位置固定在地必威现金回扣的右上角,默认效果: 2.对于习惯arcgis或者openlayer气泡窗口样式的giser来说,感觉不太适应,加上公司的领导也想要arcgis气泡窗口的那种样式效果,所以...
- 作者:oolili来源:oolili|2017年01月29日
一、自定义气泡窗口与cesium默认窗口效果对比:
1.cesium点击弹出气泡窗口显示的位置固定在地必威现金回扣的右上角,默认效果:
2.对于习惯ARCGIS或者openlayer气泡窗口样式的giser来说,感觉不太适应,加上公司的领导也想要ARCGIS气泡窗口的那种样式效果,所以自定义了类似ARCGIS模板的气泡窗口模式,可以随着地必威现金回扣移动而移动,简单版本样式效果如下:
二、具体实现思路:
1.气泡窗css样式
/*自定义气泡窗口样式模板*/ .closeButton{width:12px;height:12px;float:right;cursor:pointer;margin-top:4px;background:url(images/mainImage.png) no-repeat -31px -54px;} .infowin3DContent{pointer-events:auto;} .infowin3D{ width:300px; border:2px solid #CCC; position:absolute; background-color:#FFF;display:none;} .arrow{ position:absolute; width:40px; height:40px; bottom:-40px;} .arrow *{ display:block; border-width:20px; position:absolute; border-style:solid dashed dashed dashed; font-size:0; line-height:0; } .arrow em{border-color:#CCC transparent transparent;} .arrow span{border-color:#FFF transparent transparent; top:-3px;}
2.想要在地必威现金回扣显示气泡窗口样式的div挺容易的,但是想要实现气泡窗口随地必威现金回扣移动而移动,这点需要监听地必威现金回扣的范围变化事件以及移动监听事件才行。由于个人的研究cesium时间不久以及水平有限,尝试了这种思路,动手开发了一段时间,但是未能实现,还是比较遗憾的。可是这种效果又是领导想要的,逼急了,无意中发现了cesium的选中是随着地必威现金回扣拖动而拖动的,F12扑捉看看,发现是SVG绘制出来的效果,放在cesium-selection-wrapperdiv里面。所以,个人决定从cesium源代码修改下手,新增气泡窗口div在里面,其实这种投机取巧的做法,不太推荐,破坏了源代码的原始性了。
修改源代码之处:SelectionIndicator构造函数里面,新增部分如下:
//自定义部分 var infowin = document.createElement('div'); infowin.className= 'infowin3D'; el.appendChild(infowin); //箭头 var arrow = document.createElement('div'); arrow.className= 'arrow'; infowin.appendChild(arrow); var em = document.createElement("em"); var span = document.createElement("span"); arrow.appendChild(em); arrow.appendChild(span); //气泡窗口内容div var content = document.createElement('div'); content.setAttribute('id', 'infowin3DContent'); content.className= 'infowin3DContent'; infowin.appendChild(content); //自定义部分结束
3.上面的步骤只是实现了一个空div气泡窗口,里面并没有内容信息的,内容是调用气泡窗口时候动态构造的,所以自己封装了一个调用气泡窗口的函数:
/** * 弹出气泡窗口 * @method infoWindow * @param obj{position(必填):屏幕坐标,destination(必填):跳转目的点,content(必填):气泡窗口内容,css(可填):设置css的width,height} * @return 返回选中的模型Entity */ infoWindow: function (obj) { var picked = this.cesiumViewer.scene.pick(obj.position); if (Cesium.defined(picked)) { var id = Cesium.defaultValue(picked.id, picked.primitive.id); if (id instanceof Cesium.Entity) { if(obj.destination){ this.cesiumViewer.camera.flyTo({//初始化跳转某个地方 destination : obj.destination }); } //填充内容 $(".cesium-selection-wrapper").show(); $("#infowin3DContent").empty(); $("#infowin3DContent").append(obj.content); //css存在情况下,设置css if(obj.css && obj.css.width) $(".infowin3D").css("width",obj.css.width); if(obj.css && obj.css.height) $(".infowin3D").css("height",obj.css.height); $(".infowin3D").css("margin-top",-($(".infowin3D").height()-30)); $(".arrow").css("left",($(".infowin3D").width()/2-20)); $(".infowin3D").css("margin-left",-($(".infowin3D").width()/2-76)); $(".infowin3D").show(); $("#infoClose3D").click(function () { $(".cesium-selection-wrapper").hide(); $(".infowin3D").hide(); }); return id; } } }
4.调用:
//调用接口-气泡窗口 var handler3D = new Cesium.ScreenSpaceEventHandler(cesium.cesiumViewer.scene.canvas); handler3D.setInputAction(function(movement) { //点击弹出气泡窗口 var pick = cesium.cesiumViewer.scene.pick(movement.position); if(pick && pick.id){//选中某模型 var cartographic = Cesium.Cartographic.fromCartesian(pick.id._position._value);//世界坐标转地理坐标(弧度) var point=[ cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180];//地理坐标(弧度)转经纬度坐标 var destination=Cesium.Cartesian3.fromDegrees(point[0], point[1], 3000.0); var content ="<div style='border-bottom: 1px solid #C6CBCE;'>"+ "<span style='margin-left: 5px;'>测试测试1</span>"+ "<div id='infoClose3D' class='closeButton' style='margin-right: 4px;'></div>"+ "</div>"+ "<div>"+ "<label>测试1:</label><label>测试1</label></br>"+ "<label>测试2:</label><label>测试2</label></br>"+ "<label>测试3:</label><label>测试3</label></br>"+ "</div>"; var obj = {position:movement.position,destination:destination,content:content}; cesium.infoWindow(obj); } }, Cesium.ScreenSpaceEventType.LEFT_CLICK);