【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（包含自定义的材质类，可以运行的完整源码）