Cesium线条穿过地形模型变虚线

效果

实现

import cesiumUtils from '@/utils/cesium/cesiumUtils.js'
export default {
    name: 'depthDetection',
    components: {},
    data() {
        return {
            points: [],
        }
    },
    mounted() {
        this.initViewer()
    },
    beforeDestroy() {
        cesiumUtils.destroy();
    },
    methods: {
        initViewer() {
            this.viewer = cesiumUtils.initViewer("init-viewer-wrapper", {terrain: true});
            const tileset = cesiumUtils.load3DModelAdvanced('/model/terra_b3dms1/tileset.json');

            if (tileset) {
                cesiumUtils.zoomTo3DModel(tileset);
            }
            this.handleclick()
        },
        handleclick(){
            let that = this;
            const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
            handler.setInputAction(function (movement) {
                that.addPoint(movement.position);
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        },
        addPoint(screenPosition){
            let cartesian = null;
            const pickedObject = this.viewer.scene.pick(screenPosition);

            if (Cesium.defined(pickedObject)) {
                cartesian = this.viewer.scene.pickPosition(screenPosition);
            } else {
                const ray = this.viewer.camera.getPickRay(screenPosition);
                cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);
            }

            if (!Cesium.defined(cartesian)) {
                console.warn('无法拾取位置');
                return;
            }

            const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
            const point = {
                cartesian: cartesian,
                cartographic: cartographic,
                lng: Cesium.Math.toDegrees(cartographic.longitude),
                lat: Cesium.Math.toDegrees(cartographic.latitude),
                height: cartographic.height
            };

            this.points.push(point);

            this.drawPoint(cartesian, this.points.length)

            if(this.points.length > 1){
                this.drawLine()
            }
        },
        drawPoint(position, index = 0) {
            this.point = this.viewer.entities.add({
                position: position,
                point: {
                    pixelSize: 8,
                    color: Cesium.Color.YELLOW,
                    outlineColor: Cesium.Color.BLACK,
                    outlineWidth: 2,
                },
                label: {
                    text: index.toString(),
                    font: '14pt sans-serif',
                    fillColor: Cesium.Color.WHITE,
                    outlineColor: Cesium.Color.BLACK,
                    outlineWidth: 2,
                    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                    pixelOffset: new Cesium.Cartesian2(0, -30),
                }
            });
        },
        drawLine() {
            // 清除旧的线段
            if (this.line) {
                this.viewer.entities.remove(this.line);
            }
            
            const positions = this.points.map(p => p.cartesian);
            this.line = this.viewer.entities.add({
                polyline: {
                    positions: positions,
                    width: 3,
                    material: Cesium.Color.YELLOW,
                    clampToGround: false,
                    depthFailMaterial: new Cesium.PolylineDashMaterialProperty({  //(被建筑遮挡部分具有穿透效果、虚线)
                        color: Cesium.Color.YELLOW,
                    }),
                }
            });
        },
    }
}
</script>