Cesium popup窗、气泡窗、提示窗插件

首先向关注我的各位小伙伴说一声对不起，好久没有更新csdn了，最近因为自己也在看opengl的一些学习资料和Cesium的源码，所以耽搁了，在此也向对小伙伴们说一声对不起。

git下载地址：https://github.com/gitgitczl/popupForCesium.git 记得给个星星啊 写插件不容易。

因为二维地图的插件大部分都带气泡窗，但是三维里不带，所以得重新写。我这里是参照leaflet的气泡风格写的。

最近群里也好，还是网上，经常有人找到我问我Cesium的气泡窗怎么写，我自己也在之前的文章中解释了下原理（地址：https://blog.csdn.net/caozl1132/article/details/86065333），但是随着后面不断的使用，我发现了气泡窗的需求一般分两种：

第一种：是一个随鼠标移动的提示框，效果如下：那个“双击结束，右键取消上一步” 就是一个随鼠标移动时提示框也动态移动的。使用情景比较多的就是用于用户在界面上操作时，对用户进行一个鼠标提示。

 

第二种：是一个固定在地图上某点的弹窗框，效果如下：这种类型的气泡窗主要是为在地图上定点进行属性的展示等。当地球旋转时，该点固定，跟随地球进行旋转。
 

 以上就是气泡窗常见的两种类型，至于其它的用处，目前还没遇到。如果哪位朋友遇到了可以和我说，我拓展下插件。

晒出我的插件结构：

主要就是一个js、一个css，到时做好了大家直接引用就行，我也会写一个简单的使用说明文档。 

以下晒出部分代码：

var MovePrompt = function (viewer, opt) {
    if (!opt) opt = {};
    var randomId = Number((new Date()).getTime());
    this.id = randomId;
    this.style = opt.style;
    this.viewer = viewer;
    if (!this.viewer) return;
    this.scene = this.viewer.scene;
    this.camera = this.viewer.camera;
    this.mapContainer = this.viewer.container.id;
    this.rendHandler = null;
    if (!this.mapContainer) return;

    this.trackPopUpId = "trackPopUp" + randomId;
    this.promptContentId = "promptContent" + randomId;
    this.promptDivId = "promptDiv" + randomId;
    this.trackPopUpContentId = "trackPopUpContent" + randomId;
    this.closeBtnId = "closeBtn" + randomId;

    var infoDiv;
    var max_width = 300;
    var max_height = 500;
    infoDiv = window.document.createElement("div");
    infoDiv.id = this.trackPopUpId;
    infoDiv.className = "trackPopUp";

    this.content = opt.content || ""; //提示框内容
    if (!opt.type || opt.type == 1) {
        infoDiv.innerHTML = '<div id="' + this.trackPopUpContentId + '" class="cesium-popup" style="top:0;left:0;">' +
            '<div class="cesium-prompt-content-wrapper" id="' + this.promptDivId + '">' +
            '<div id="trackPopUpLink" class="cesium-popup-content" style="max-width: ' + max_width + 'px;max-height: ' + max_height + 'px">' +
            '<span class="promptContent" id="' + this.promptContentId + '">' + this.content + '</span>' +
            '</div>' +
            '</div>' +
            '</div>';
    } else {
        infoDiv.innerHTML = '<div id="' + this.trackPopUpContentId + '" class="cesium-popup" style="top:0;left:0;">' +
            '<a class="cesium-popup-close-button" href="javascript:void(0)" id="' + this.closeBtnId + '">×</a>' +
            '<div class="cesium-popup-content-wrapper" id="' + this.promptDivId + '">' +
            '<div id="trackPopUpLink" class="cesium-popup-content" style="max-width: ' + max_width + 'px;max-height: ' + max_height + 'px">' +
            '<span class="popupContent" id="' + this.promptContentId + '">' + this.content + '</span>' +
            '</div>' +
            '</div>' +
            '<div class="cesium-popup-tip-container">' +
            '<div class="cesium-popup-tip"></div>' +
            '</div>' +
            '</div>';
    }

    window.document.getElementById(this.mapContainer).appendChild(infoDiv);
    window.document.getElementById(this.trackPopUpId).style.display = "block";

    this.offset = opt.offset || {};

    this.infoDiv = window.document.getElementById(this.trackPopUpId);
    this.trackPopUpContent = window.document.getElementById(this.trackPopUpContentId);

    this.promptDiv = window.document.getElementById(this.promptDivId);
    this.promptContent = window.document.getElementById(this.promptContentId);
    this.trackPopUpLink = window.document.getElementById(this.promptContentId);

    this.popupCartesian = opt.popupCartesian;
    this.rendHandler = null;
    this.show = (opt.show == undefined ? true : opt.show);
    if (opt.type == 2) {
        if (!this.popupCartesian) {
            console.warn("缺少空间坐标！");
            return;
        }
    }
    if (opt.type && opt.type != 1 && this.popupCartesian) {
        // this.popupCartesian = this.getPosition(this.popupCartesian) || this.popupCartesian;
        var clsBtn = window.document.getElementById(this.closeBtnId);
        var that = this;
        clsBtn.addEventListener("click", function () {
            that.setVisible(false);
        });
        this.rendHandler = this.viewer.scene.postRender.addEventListener(function () {
            if (that.popupCartesian) {
                var px = Cesium.SceneTransforms.wgs84ToWindowCoordinates(that.scene, that.popupCartesian);
                that.trackPopUpContent.style.left = px.x + (that.offset.x || 0) + (Math.ceil(-that.trackPopUpContent.offsetWidth / 2)) + "px";
                that.trackPopUpContent.style.top = px.y + (that.offset.y || 0) + (-that.trackPopUpContent.offsetHeight) + "px";
                var res = false;
                var e = that.popupCartesian,
                    i = that.camera.position,
                    n = that.scene.globe.ellipsoid.cartesianToCartographic(i).height;
                if (!(n += 1 * that.scene.globe.ellipsoid.maximumRadius, Cesium.Cartesian3.distance(i, e) > n)) {
                    res = true;
                }
                if (res && that.show) {
                    if (that.infoDiv) that.infoDiv.style.display = "block";
                } else {
                    if (that.infoDiv) that.infoDiv.style.display = "none";
                }
            }
        });
    }
}

此处就不对代码进行说明了，下周我会修改一下做成一个完整的插件放到github上，到时会把链接给出来，到时大家下载一下就可以直接用了。因为家里电脑配置较差，所以写代码不方便，下周上班的时候我会抽半个小时传上去。

git地址：https://github.com/gitgitczl/popupForCesium.git

到时也麻烦大家给我个星星、关注一下我的csdn，和大家一起进步，一起学习。 

之前开的小专栏，由于和小专栏的管理人员的矛盾（态度恶劣），那边不会维护了，所以那边现在看我的文章免费了，在此也向在小专栏付费关注我的人致歉。