CesiumJs学习笔记2

最新推荐文章于 2024-10-15 11:50:42 发布

alshat

最新推荐文章于 2024-10-15 11:50:42 发布

阅读量406

点赞数

分类专栏： cesium 文章标签：学习笔记

本文链接：https://blog.csdn.net/nihuanfygyuhj/article/details/130679964

版权

cesium 专栏收录该内容

4 篇文章

订阅专栏

此为课程 Three.js可视化企业实战WEBGL课的CesiumJs篇学习笔记

1.添加物体

添加一个点

// 创建一个点
  var point = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 1000),
    // 定位点的图标
    point: {
      pixelSize: 10,
      color: Cesium.Color.RED,
      outlineColor: Cesium.Color.WHEAT,
      outlineWidth: 4
    }
  })

添加3d建筑

  // 添加3d建筑
  const osmBuildings = viewer.scene.primitives.add(new Cesium.createOsmBuildings())

添加标签与广告牌

label 标签
billboard 广告牌

// 添加文字标签和广告牌
  var label = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 750),
    label: {
      text: "广州塔",
      font: "24px sans-serif",
      fillColor: Cesium.Color.WHITE,
      outlineColor: Cesium.Color.BLACK,
      outlineWidth: 4,
      // FILL填充文字，OUTLINE勾勒标签，FILL_AND_OUTLINE填充文字和勾勒标签
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,
      // 设置文字的偏移量
      pixelOffset: new Cesium.Cartesian2(0, -24),
      // 设置文字的显示位置,LEFT /RIGHT /CENTER
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      // 设置文字的显示位置
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    },
    billboard: {
      image: "./texture/gzt.png",
      width: 50,
      height: 50,
      // 设置广告牌的显示位置
      verticalOrigin: Cesium.VerticalOrigin.TOP,
      // 设置广告牌的显示位置
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
    },
  });

3D模型添加与设置

// 添加3D模型
  const airplane = viewer.entities.add({
    name: "Airplane",
    position: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 1500),
    model: {
      uri: "./model/Air.glb",
      // 设置飞机的最小像素
      minimumPixelSize: 128,
      // 设置飞机的轮廓
      silhouetteSize: 5,
      // 设置轮廓的颜色
      silhouetteColor: Cesium.Color.Red,
      // 设置相机距离模型多远的距离显示
      distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000),
    },
  });

2. 创建实体

参考 CesiumJs创建实体

3. Primitive创建图像物体

在这里插入图片描述

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-添加到viewer
  viewer.scene.primitives.add(primitive);

多个实体在同一个primitive

创建多个几何体实例 instance, 并在创建图元的时候加入

	let rectGeometry1 = ...
	let instance1 = ...
	let rectGeometry2 =  ...
    let instance2 = ...
    
    let appearance = ...
    
  // 04-图元
    let primitive = new Cesium.Primitive({
      geometryInstances: [instance1, instance2], // 多个实例
      appearance: appearance,
    });
    // 05-添加到viewer
    viewer.scene.primitives.add(primitive);

修改primitive颜色

在创建实例 instance 的时候加入id属性

 let instance = new Cesium.GeometryInstance({
    id: "redRect", // 加入id属性
    geometry: rectGeometry,
    attributes: {
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(
        Cesium.Color.RED.withAlpha(0.5)
      ),
    },
  });

  // 动态修改图元颜色
  setInterval(() => {
  	// 获取 id 为 redRect 实例的 attributes
    let attributes = primitive.getGeometryInstanceAttributes("redRect");
    attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(
      Cesium.Color.fromRandom({
        alpha: 0.5,
      })
    );
  }, 2000);

鼠标拾取primitive修改颜色
加上鼠标左键拾取事件

  // 拾取
  var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  handler.setInputAction(function (movement) {
    // movement.position 屏幕的二维坐标
    // scene.pick 选中物体
    var pickedObject = viewer.scene.pick(movement.position);
    if (Cesium.defined(pickedObject) && typeof pickedObject.id == "string") {
    	// 修改成黄色
      let attributes = primitive.getGeometryInstanceAttributes(pickedObject.id);
      attributes.color = Cesium.ColorGeometryInstanceAttribute.toValue(
        Cesium.Color.YELLOW.withAlpha(0.5)
      );
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);