cesium实现自定义弹窗

原创

已于 2023-02-03 08:15:06 修改 · 2.5k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2023-02-01 20:05:54 首次发布

文章详细描述了一个使用Cesium库创建自定义弹窗的过程，包括弹窗内容的Vue组件渲染、位置更新以及如何处理因场景拖动导致的弹窗偏移问题。通过调整底部偏移高度和监控场景渲染事件，确保弹窗能正确跟随地图坐标显示。

cesium实现自定义弹窗

弹窗内容渲染类

/**
 * @descripion: 弹窗渲染类
 */

import Vue from "vue";

export default class Bubble {
   
   

    /**
     *
     * @param viewer 场景
     * @param position  弹窗位置
     * @param propsData 弹窗内部的属性数据值 {k:v}
     * @param bubbleType 弹窗类型 vue组件
     * @param offsetHeight 底部偏移高度，弹窗底部偏移高度需要设置一个合适的值，否则很容易导致场景拖动的时候，弹窗存在偏移
     */
    constructor(viewer, position, bubbleType, propsData, offsetHeight) {
   
   
        this.viewer = viewer;
        this.offsetHeight = offsetHeight;
        this.position = position;

        // 判断弹窗内容是否是vue组件文件
        if (!bubbleType || !bubbleType['beforeCreate'] || !bubbleType['render']) {
   
   
            throw new Error('弹窗类型不正确!')
        }

        let WindowVm = Vue.extend(bubbleType);

        // 根据模板创建一个面板
        this.vmInstance = new WindowVm({
   
   
            propsData: propsData
        }).$mount();
        this.vmInstance.closeEvent = e => {
   
   
            this.close();
        }
        // 将字符串模板生成的内容添加到DOM上
        this.viewer.cesiumWidget.container.appendChild(this.vmInstance.$el);

        this.addPostRender();
    }

    //添加场景事件
    addPostRender() {
   
   
        this.viewer.scene.postRender.addEventListener(this