Cesium的tooltip（基于div）

tooltip实现方式主要分两种：entity和div。

entity：基于cesium提供的entity接口

优点：地球放大、缩小或移动，位置也会跟着变化；显示灵活，无鼠标悬浮上面丢失焦点的bug
缺点：展示的信息不能是html格式，只能是文本；遮挡问题

div：基于悬浮的div控件

优点：展示的信息可以是html格式；无遮挡问题
缺点：地球放大、缩小或移动，位置不会跟着变化；有鼠标悬浮上面丢失焦点的bug

今天介绍基于div方式：

 .tooltipdiv {
    display: block;
    position:absolute;
    visibility:visible;
    max-width:200px;
    min-width:100px;
    padding: 1px 1px1px 25px;
    font-size: 11px;
    z-index: 1000;
    opacity: 0.8;
    -khtml-opacity:0.8;
    -moz-opacity:0.8;
    filter:alpha(opacity=80);
    }
    .tooltipdiv-inner {
        padding: 3px8px;
        background-color:#000000;
        color: white;
        text-align:center;
        max-width:200px;
        text-decoration:none;
        -webkit-border-radius:4px;
        -moz-border-radius:4px;
        border-radius:4px;
    }


var TooltipDiv = (function () {
    var isInit =false;
 
    function _() {};
 
    _.initTool =function (frameDiv) {
        if(isInit) { return; }
 
        var div = document.createElement('DIV');
        div.className= "tooltipdiv";
 
        var title = 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';
    };
 
   
    _.showAt =function (position, message) {
        if(!isInit) { return; }
        if(position && message) {
            this.setVisible(true);
            this._title.innerHTML= message;
            this._div.style.left= position.x + 10 + "px";
            this._div.style.top= (position.y - this._div.clientHeight / 2) + "px";
        }
    };
 
    return _;
})();

var viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider:new Cesium.UrlTemplateImageryProvider({
        url:'http://localhost:8080/xyz/Satellite_24459/{z}/{x}/{y}.jpg'
    }),
    baseLayerPicker:false
});
 

var scene = viewer.scene;
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
var ellipsoid = scene.globe.ellipsoid; 
var cartesian = null;

TooltipDiv.initTool(viewer.cesiumWidget.container);

// LEFT_CLICK
handler.setInputAction(function(movement) {
    cartesian= viewer.camera.pickEllipsoid(movement.position, ellipsoid);
    if(cartesian) {
        TooltipDiv.showAt(movement.position,'<h5>要展示的信息</h5>');
    }else {
        TooltipDiv.setVisible(false);
    }
},Cesium.ScreenSpaceEventType.LEFT_CLICK);

image.png