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

Entity 的材质

普通物体的材质

javascript 复制代码

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)
})

线的材质

javascript 复制代码

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)
})