Cesium Vue（五）— 绘制多边形

多边形"/>

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