多边形"/>
Cesium Vue(五)— 绘制多边形
1. 使用entity创建矩形
var rectangle = viewer.entities.add({rectangle: {coordinates: Cesium.Rectangle.fromDegrees(// 西边的经度90,// 南边维度20,// 东边经度110,// 北边维度30),material: Cesium.Color.GREEN.withAlpha(0.8),},
2. 使用primivite创建矩形
// primivite创建矩形// 01-创建几何体let rectGeometry = new Cesium.RectangleGeometry({rectangle: Cesium.Rectangle.fromDegrees(// 西边的经度115,// 南边维度20,// 东边经度135,// 北边维度30),// 距离表面高度height: 0,vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,});// 02-创建几何体实例let instance = new Cesium.GeometryInstance({geometry: rectGeometry,attributes: {color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED.withAlpha(0.5)),},});// 03-设置外观let appearance = new Cesium.PerInstanceColorAppearance({flat: true,});// 04-图元let primitive = new Cesium.Primitive({geometryInstances: instance,appearance: appearance,});// 05-添加到viewerviewer.scene.primitives.add(primitive);viewer.camera.setView(viewer.entities);
3. 创建多个实体在同一个primitive
// 04-图元let primitive = new Cesium.Primitive({geometryInstances: [instance, instance2],// 在数组geometryInstances 中添加多个实体appearance: appearance,});
4. 修改primitive颜色
// 动态修改图元颜色setInterval(() => {let attributes = primitive.getGeometryInstanceAttributes("blueRect");attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(// Cesium.Color.YELLOW.withAlpha(0.5)Cesium.Color.fromRandom({alpha: 0.5,}));}, 2000);});
5. primitive和entity物体交互
// 拾取var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);handler.setInputAction(function (movement) {// console.log(movement);// scene.pick选中物体var pickedObject = viewer.scene.pick(movement.position);console.log(pickedObject);if (Cesium.defined(pickedObject) && typeof pickedObject.id == "string") {// console.log(pickedObject.id);let attributes = primitive.getGeometryInstanceAttributes(pickedObject.id);attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(Cesium.Color.YELLOW.withAlpha(0.5));}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
更多推荐
Cesium Vue(五)— 绘制多边形
发布评论