当前位置：首页 > news >正文

Entity 的材质（棋盘、条纹、网格）

news 2025/7/1 10:52:25

Entity 的材质

普通物体的材质

import { nextTick, onMounted, ref } from 'vue'
import * as Cesium from 'cesium'
// console.log('Cesium=', Cesium)const viewer = ref<any>(null)onMounted(() => { ... })let material = Cesium.Color.YELLOW.withAlpha(0.5)`Cesium.ColorMaterialProperty` 是 `Cesium.MaterialProperty` 的子类
let material = new Cesium.ColorMaterialProperty(new Cesium.Color(1.0, 1.0, 1.0, 1.0))`棋盘纹理`
let material = new Cesium.CheckerboardMaterialProperty({evenColor: Cesium.Color.RED,oddColor: Cesium.Color.YELLOW,repeat: new Cesium.Cartesian2(4, 4) // 水平2个格、竖直2个格
})`条纹纹理`
let material = new Cesium.StripeMaterialProperty({evenColor: Cesium.Color.WHITE,oddColor: Cesium.Color.BLACK,repeat: 8
})`网格纹理`
let material = new Cesium.GridMaterialProperty({color: Cesium.Color.YELLOW,cellAlpha: 0.5,lineCount: new Cesium.Cartesian2(4, 4), // 横、竖各4个网格lineThickness: new Cesium.Cartesian2(1.0, 1.0) // 线的粗细
})const rectangleEntity = new Cesium.Entity({id: 'rectangleEntity',name: '矩形',rectangle: {coordinates: Cesium.Rectangle.fromDegrees(100, 20, 110, 30),outline: true, // 显示边框outlineColor: Cesium.Color.BLACK, // 边框颜色height: 1, // 矩形在地面的高度，设置为0，意味着矩形将“贴”在地面上// CLAMP_TO_GROUND：如果地形（如山脉）高于矩形设置的高度，矩形将“夹”在地形上，而不是“浮”在其上方。// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND/*500000：定义了矩形沿其法线方向（即垂直向上）的挤出高度。意味着，矩形将不仅仅是一个平面，而是一个从地面开始，垂直向上挤出500000米的三维形状，但请注意，因为，coordinates的纬度高度设置得非常大（50°），所以，此挤出高度可能与矩形的实际大小不匹配或不直观。*/// extrudedHeight: 500000,material: material}
})// 瞬间到达 - 将相机移动到，某位置的上空，并朝向地面
const setView = () => {// const position = Cesium.Cartesian3.fromDegrees(113.25, 23.16, 1000000) // 广州// const position = Cesium.Cartesian3.fromDegrees(116.397428, 39.90923, 100) // 天安门const position = Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 2000) // 广州塔viewer.value.camera.setView({destination: position,orientation: {heading: Cesium.Math.toRadians(0),pitch: Cesium.Math.toRadians(-90),roll: Cesium.Math.toRadians(90)}})
}nextTick(() => {setView()viewer.value.entities.add(rectangleEntity)
})

线的材质


onMounted(() => { ... })let material = Cesium.Color.RED.withAlpha(0.5)`设置虚线材质`
let material = new Cesium.PolylineDashMaterialProperty({dashLength: 60, // 长度color: Cesium.Color.RED
})`设置箭头材质`
let material = new Cesium.PolylineArrowMaterialProperty(Cesium.Color.RED)`设置发光飞线效果`
let material = new Cesium.PolylineGlowMaterialProperty({glowPower: 0.8, // 设置发光程度taperPower: 0.7, // 尾椎缩小程度color: Cesium.Color.RED
})const polyline = new Cesium.Entity({id: 'polyline',polyline: {`因为，线的坐标是由 <多个坐标对> 组成，所以，这里使用 `fromDegreesArray()` 方法批量转换坐标 `positions: Cesium.Cartesian3.fromDegreesArray([112.3, 39.9, // `第一个点`114.4, 100 // `第二个点`]), // 返回笛卡尔坐标数组width: 10,material: material,clampToGround: true, // 是否将线贴地显示（可选）height: 1000,}
})// 瞬间到达 - 将相机移动到，某位置的上空，并朝向地面
const setView = () => {// const position = Cesium.Cartesian3.fromDegrees(113.25, 23.16, 1000000) // 广州// const position = Cesium.Cartesian3.fromDegrees(116.397428, 39.90923, 100) // 天安门const position = Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 2000) // 广州塔viewer.value.camera.setView({destination: position,orientation: {heading: Cesium.Math.toRadians(0),pitch: Cesium.Math.toRadians(-90),roll: Cesium.Math.toRadians(90)}})
}nextTick(() => {setView()viewer.value.entities.add(polyline)
})