Question

不知道为什么 我只要挂载了这个dom 周围的图层就变颜色的 原本不是这个颜色的，好像是被盖了一层。请我有人遇到过嘛，

Answer 1

您好

您是否有单独加载过这个DOM缓存呢？

单独加载是否是其他颜色呢

两种颜色叠加可能会有其他颜色的效果

Comments

/**
 * @descripion:
 * @param {Viewer} viewer
 * @param {Cartesian2} position
 * @param {String} title
 * @param {String} id
 * @return {*}
 */

import Vue from "vue";
import Label from "./index.vue";

let WindowVm = Vue.extend(Label);
export default class SzyBubble {

    constructor(val) {
        this.viewer = window.viewer;
        //  this.height = val.height;
        this.position = val.position._value;
        let title = val.name;
        let swStep = val.swStep;
        let llStep = val.llStep
        this.vmInstance = new WindowVm({
            propsData: {
                title,
                swStep,
                llStep
            }
        }).$mount(); //根据模板创建一个面板

        this.vmInstance.closeEvent = e => {
            this.windowClose();
        }
        this.vmInstance.flyEvent = e => {
            this.flyToPoint(val)
        }
        window.viewer.cesiumWidget.container.appendChild(this.vmInstance.$el);
        this.addPostRender();
    }

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

    //场景渲染事件 实时更新窗口的位置 使其与笛卡尔坐标一致
    postRender() {
        if (!this.vmInstance.$el || !this.vmInstance.$el.style) return;
        const canvasHeight = this.viewer.scene.canvas.height;
        const windowPosition = new Cesium.Cartesian2();
        Cesium.SceneTransforms.wgs84ToWindowCoordinates(
            this.viewer.scene,
            this.position,
            windowPosition
        );
        const elHight = this.vmInstance.$el.offsetHight;
        this.vmInstance.$el.style.bottom =
            canvasHeight - windowPosition.y + 260 + "px";
        const elWidth = this.vmInstance.$el.offsetWidth;
        this.vmInstance.$el.style.left = windowPosition.x - elWidth / 2 + 180 + "px";

        const camerPosition = this.viewer.camera.position;
        let height = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(camerPosition).height;
        height += this.viewer.scene.globe.ellipsoid.maximumRadius;
        if ((!(Cesium.Cartesian3.distance(camerPosition, this.position) > height)) && this.viewer.camera.positionCartographic.height < 50000000) {
            this.vmInstance.$el.style.display = "block";
        } else {
            this.vmInstance.$el.style.display = "none";
        }
    }

    //关闭
    windowClose() {
        if (this.vmInstance) {
            this.vmInstance.$el.remove();
            this.vmInstance.$destroy();
        }
        this.viewer.scene.postRender.removeEventListener(this.postRender, this); //移除事件监听
    }

    //飞入
    flyToPoint(val) {
        let point = {
            lat: val.monitoItems.data.vlat,
            lng: val.monitoItems.data.vlng,
            level: val.monitoItems.data.level,//高
            heading: val.monitoItems.data.heading,//角度旋转
            pitch: val.monitoItems.data.pitch,//倾斜角度
            roll: val.monitoItems.data.roll,//倾斜角度
            x: val.monitoItems.data.x,
            y: val.monitoItems.data.y,
            z: val.monitoItems.data.z,
        }
        this.vmInstance.$bus.emit('flyto', point)
    }
}

我尝试过只挂载一个dom 还是会出现这样这个颜色。周围图层这个颜色我不知道是哪来的，因为我没有设置周围图层的颜色。如果我不挂载dom 就不会出现这个颜。 

---

代码加载没问题，这个DOM在桌面加载是否有问题

DOM在iserver预览是否有问题呢

---

没有问题 dom加载正常

---

我用注释排除法 

window.viewer.cesiumWidget.container.appendChild(this.vmInstance.$el);

发现就是这段代码影响了 只要挂载dom 图层周围莫名就会变颜色 似乎就是被盖了一层

---

如果iserver预览DOM加载没问题

仅仅只在您现在的项目里加载有问题

那可能是包的版本的问题

建议更换其余版本的前端包

---

好的谢谢