【Cesium】自定义材质，添加带有方向的滚动路线

🍖 前言

【Cesium】自定义材质，添加带有方向的滚动路线

🎶一、实现过程

1. 自定义材质类PolylineImageTrailMaterialProperty
2. 创建一个Polyline，调用自定义的材质类
3. 结合Vue，实现路线的静态、动态转换

✨二、代码展示

以下是组件源码（未包含自定义的材质类）：

<template>
    <div id="cesiumContainer">
        <div class="toolbar"><span>静态</span><el-switch v-model="status"></el-switch><span>动态</span></div>
    </div>
</template>
<script>
const Cesium = window.Cesium;
let viewer = undefined;
import PolylineImageTrailMaterialProperty from "@/utils/map/PolylineImageTrailMaterialProperty.js";
export default {
    data() {
        return {
            status: false,
            speed: 0.000001,
            entity: undefined
        };
    },
    mounted() {
        let key = window.global.key;
        Cesium.Ion.defaultAccessToken = key;
        window.viewer = viewer = new Cesium.Viewer("cesiumContainer", {
            imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
                url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
            }),
            // terrainProvider: Cesium.createWorldTerrain(),
            geocoder: true,
            homeButton: true,
            sceneModePicker: true,
            baseLayerPicker: true,
            navigationHelpButton: true,
            animation: true,
            timeline: true,
            fullscreenButton: true,
            vrButton: true,
            //关闭点选出现的提示框
            selectionIndicator: true,
            infoBox: true
        });
        viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权

        this.initData();
    },
    watch: {
        status: {
            handler(newVal) {
                if (newVal) {
                    this.speed = 10.0
                } else {
                    this.speed = 0.00000001
                }
                this.entity.polyline.material._speed = this.speed;
            }
        }
    },
    methods: {
        initData() {
            this.entity = viewer.entities.add({
                polyline: {
                    clampToGround: true,
                    positions: Cesium.Cartesian3.fromDegreesArray([
                        113.9, 30, 114.4, 30.70, 115.0, 30.4, 116.0, 31.4,
                    ]),
                    material: new PolylineImageTrailMaterialProperty({
                        color: Cesium.Color.YELLOW,
                        speed: this.speed,
                        image: require("@/assets/imgs/starp.png"),
                        repeat: { x: 50, y: 1 }
                    }),
                    width: 20,
                },
            });

            this.initCamera();
        },
        initCamera() {
            viewer.camera.flyTo({
                destination: new Cesium.Cartesian3.fromDegrees(
                    114.9, 30, 400000
                ),
                orientation: {
                    heading: 0.005342248184040166,
                    pitch: -1.3759883623507303,
                    roll: 0.000001,
                },
                duration: 3,
            });

        }
    },
};
</script>
<style lang="scss" scoped>
$--el-color-primary: rgb(48, 93, 241);

#cesiumContainer {
    width: 100%;
    height: 100%;
    position: relative;
}

.toolbar {
    position: absolute;
    top: 60px;
    right: 40px;
    z-index: 999;
    background: white;
    padding: 3px 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgba(102, 102, 102, 1);
}

:deep(.el-switch__core) {
    width: 40px !important;
    height: 18px !important;
}
</style>

在这里插入图片描述

🏀三、运行结果

运行成功展示:

🏆四、知识点提示

1.自定义材质
2.结合关键帧实现滚动
3.需要源码的请留言或者看图1（包含自定义的材质类，可以运行的完整源码）