用vue做网站的实例,天蓝色系网站设计,企业内部培训app软件,网站建设岗位能力评估表【Cesium】自定义材质#xff0c;添加带有方向的滚动路线 #x1f356; 前言#x1f3b6;一、实现过程✨二、代码展示#x1f3c0;三、运行结果#x1f3c6;四、知识点提示 #x1f356; 前言
【Cesium】自定义材质#xff0c;添加带有方向的滚动路线 #x1f3b6;一、… 【Cesium】自定义材质添加带有方向的滚动路线 前言一、实现过程✨二、代码展示三、运行结果四、知识点提示 前言
【Cesium】自定义材质添加带有方向的滚动路线 一、实现过程
自定义材质类PolylineImageTrailMaterialProperty创建一个Polyline调用自定义的材质类结合Vue实现路线的静态、动态转换
✨二、代码展示
以下是组件源码未包含自定义的材质类
templatediv idcesiumContainerdiv classtoolbarspan静态/spanel-switch v-modelstatus/el-switchspan动态/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 langscss 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包含自定义的材质类可以运行的完整源码
