Cesium Custom Bubble window Infowindow post-optimization

Http://www.cnblogs.com/giserhome/p/6248858.html
This article implementation of the Custom Bubble window is based on the modification of Cesium source code, this practice is only a measure of reinforcements, make up for, opportunistic, is actually not very suitable, Cesium API update version replacement, you have to manually set up the source code This article is a real implementation of the custom bubble window from another angle, the style definition of the bubble window is leaflet style, the effect is as follows:

Concrete Realization Idea:

1. bubble window CSS Style

/*leaflet style Bubble window style template*/. Leaflet-popup{position:Absolute;text-align:Center;}. Leaflet-popup-close-button{position:Absolute;Top:0; Right:0;padding:4px 4px 0 0;text-align:Center;width:18px;Height:14px;Font:16px/14px Tahoma, Verdana, Sans-serif;Color:#c3c3c3;text-decoration:None;Font-weight:Bold;background:Transparent;}. Leaflet-popup-content-wrapper{text-align:Center;Max-height:200px;overflow-y:Auto;background: White;Box-shadow:0 3px 14px rgba (0,0,0,0.4);padding:1px;text-align: Left;Border-radius:12px;}. Leaflet-popup-content{margin:13px 19px;Line-height:1.4;}. Leaflet-popup-tip-container{margin:0 Auto;width:40px;Height:20px;position:relative;Overflow:Hidden;}. Leaflet-popup-tip{background: White;Box-shadow:0 3px 14px rgba (0,0,0,0.4);width:17px;Height:17px;padding:1px;margin:-10px Auto 0;-webkit-transform:Rotate (45deg);-moz-transform:Rotate (45deg);-ms-transform:Rotate (45deg);-o-transform:Rotate (45deg);Transform:Rotate (45deg);}

2. bubble Window div Panel

//dynamic Add Bubble window divvarInfodiv = ' <div id= "Trackpopup" style= "Display:none;" > ' + ' <div id= "trackpopupcontent" class= "Leaflet-popup" style= "top:5px;left:0;"                               > ' + ' <a class= "Leaflet-popup-close-button" href= "#" >x</a> ' + ' <div class= ' leaflet-popup-content-wrapper ' > ' + ' <div id= ' TRACKPOPUPL Ink "class=" leaflet-popup-content "style=" max-width:300px; " ></div> ' + ' </div> ' + ' <div class= ' Leaflet-pop                               Up-tip-container "> ' + ' <div class=" Leaflet-popup-tip "></div>" + ' </div> ' + ' </div> ' + ' </div> ';$("#" +cesium.mapdivid). Append (Infodiv);

Bubble window div panel to see the actual situation, can also be set in the page HTML, I here because of the need, is in the JS dynamic add in.

3. Core implementation Ideas part: How to dynamically refresh the position of the bubble window

(1) Cesium Click event Cesium.ScreenSpaceEventType.LEFT_CLICK monitor the mouse's current position coordinates, and then dynamically update the display position of the bubble window div according to the current coordinates;

(2) Monitoring cesium Postrender change events, here is particularly important, because you drag the sphere Movement, bubble window Div also to correspond to the mobile, bubble window position changes with the cesium sphere is to be dynamically refreshed;

Attach some key codes:

Cesium Click events to get the current location

 handler3d.setinputaction (function   (move ment) { //  Click the pop-up bubble window  var  pick = Cesium.cesiu                MViewer.scene.pick (movement.position);  if  (pick && pick.id) {// Span style= "color: #008000;" > Select a model   " el                Se  {$ ( ' #trackPopUp '  //  load 3D model  

Update the location of the new bubble window

function Positionpopup (c) {var x = c.x-($ (' #trackPopUpContent '). Width ())/2; var y = c.y-($ (' #trackPopUpContent '). Height ()); $ (' #trackPopUpContent '). CSS (' transform ', ' Translate3d (' + x + ' px, ' + y + ' px, 0) ');}

Postrender Change Events

var removehandler = Viewer.scene.postRender.addEventListener (function  () {var Changedc = Cesium.SceneTransforms.wgs84ToWindowCoordinates (viewer.scene, id._position._value); // If things moved, move the popUp too if ((c.x!== changedc.x) | | (c.y!=== Changedc;}});

Cesium Custom Bubble window Infowindow post-optimization