Cesium学习笔记（三）创建实例

最新推荐文章于 2024-04-18 23:06:39 发布

Lafitteee拉菲

最新推荐文章于 2024-04-18 23:06:39 发布

阅读量1.2k

点赞数

分类专栏： Cesium

本文链接：https://blog.csdn.net/weixin_43889028/article/details/110563866

版权

Cesium 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

第一个实例

用矩形绘出俄怀明州（Wyoming）的范围：

var viewer = new Cesium.Viewer('cesiumContainer');

var wyoming = viewer.entities.add({
  polygon : {
  	//hierarchy定义矩形环，Cartesian3:直角坐标
    hierarchy : Cesium.Cartesian3.fromDegreesArray([
                              -109.080842,45.002073,
                              -105.91517,45.002073,
                              -104.058488,44.996596,
                              -104.053011,43.002989,
                              -104.053011,41.003906,
                              -105.728954,40.998429,
                              -107.919731,41.003906,
                              -109.04798,40.998429,
                              -111.047063,40.998429,
                              -111.047063,42.000709,
                              -111.047063,44.476286,
                              -111.05254,45.002073]),
    height : 0,
    material : Cesium.Color.RED.withAlpha(0.5),//0.5:半透明
    outline : true,
    outlineColor : Cesium.Color.BLACK
  }
});

viewer.zoomTo(wyoming);

在这里插入图片描述

形状和立体

绘制立方体

var viewer = new Cesium.Viewer("cesiumContainer");

var blueBox = viewer.entities.add({
  name: "Blue box",
  position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
  box: {
    dimensions: new Cesium.Cartesian3(40000.0, 300000.0, 500000.0),//修改长宽高
    material: Cesium.Color.BLUE,
  },
});

var redBox = viewer.entities.add({
  name: "Red box with black outline",
  position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
  box: {
    dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
    material: Cesium.Color.RED.withAlpha(0.5),
    outline: true,
    outlineColor: Cesium.Color.BLACK,
  },
});

var outlineOnly = viewer.entities.add({
  name: "Yellow box outline",
  position: Cesium.Cartesian3.fromDegrees(-100.0, 40.0, 300000.0),
  box: {
    dimensions: new Cesium.Cartesian3(40000.0, 300000.0, 500000.0),
    fill: false,
    outline: true,
    outlineColor: Cesium.Color.YELLOW,
  },
});

viewer.zoomTo(viewer.entities);

在这里插入图片描述

material属性和outline属性

material属性控制是否填充颜色，outline属性控制是否绘制轮廓。

var entity = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
  ellipse : {//椭圆形
    semiMinorAxis : 250000.0,
    semiMajorAxis : 400000.0,
    material : Cesium.Color.BLUE.withAlpha(0.5)//可以在此处替换为图片URL，椭圆填充效果即变为图片填充
  }
});
viewer.zoomTo(viewer.entities);

var ellipse = entity.ellipse; // For upcoming examples

在这里插入图片描述

可以自定义填充图案，比如：

棋盘格填充：

var checkerBoard = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0),
  ellipse:{
    semiMinorAxis: 250000.0,
    semiMajorAxis: 400000.0,
    //自定义棋盘格填充：
    material: new Cesium.CheckerboardMaterialProperty({
      evenColor: Cesium.Color.WHITE,
      oddColor: Cesium.Color.BLACK,
      repeat: new Cesium.Cartesian2(4, 4),
    }),
  },
});

在这里插入图片描述

网格填充

ellipse.material = new Cesium.GridMaterialProperty({
  color : Cesium.Color.YELLOW,
  cellAlpha : 0.2,//透明度，和上面的withAlpha效果相同
  lineCount : new Cesium.Cartesian2(8, 8),
  lineThickness : new Cesium.Cartesian2(2.0, 2.0)
});

cellAlpha=0.1(default)

cellAlpha=0.5
在这里插入图片描述

轮廓
outlineWidth属性在Windows系统下固定为1，不能修改。

ellipse.fill = false;
ellipse.outline = true;
ellipse.outlineColor = Cesium.Color.YELLOW;
ellipse.outlineWidth = 2.0;

多段线

var entity = viewer.entities.add({
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray([-77, 35,
                                                        -77.1, 35]),
    width : 5,
    material : Cesium.Color.RED
}});
viewer.zoomTo(viewer.entities);

var polyline = entity.polyline //

在这里插入图片描述
还可以绘制荧光多段线：

polyline.material = new Cesium.PolylineGlowMaterialProperty({
    glowPower : 0.2,
    color : Cesium.Color.BLUE
});

在这里插入图片描述

Camera Control

使用viewer.zoomTo命令来查看一个特定的实体，或者使用viewer.flyTo方法动态地将镜头转移到一个特定实体上。这些方法可以用在实体、实体集合、数据源、或者实体数组上。
镜头视角默认朝向北方，45度角俯视，可以使用HeadingPitchRange来修改：

var heading = Cesium.Math.toRadians(90);
var pitch = Cesium.Math.toRadians(-30);
viewer.zoomTo(wyoming, new Cesium.HeadingPitchRange(heading, pitch));

在上面的代码中，Math.toRadians()将度转换为弧度。Cesium.HeadingPitchRange(heading, pitch, range)中第一个参数是朝向角，朝北为0，顺时针方向角度增加；第二个参数是俯仰角(pitch angle)，正俯仰角代表在平面上方，负俯仰角代表在平面以下；第三个参数是视角范围。
zoomTo和flyTo方法是异步的，不保证它们在返回之前就已经完成。

有时，特别是在处理时间动态数据时，我们希望相机保持在实体的中心，而不是在地球上。这是通过设置view . trackedentity来完成的。跟踪实体需要设置位置。

wyoming.position = Cesium.Cartesian3.fromDegrees(-107.724, 42.68);
viewer.trackedEntity = wyoming;

在这里插入图片描述
通过将viewer.trackedEntity设置为undefined或者双击实体旁边来取消实体追踪，或者调用zoomTo和flyTo也可以取消实体追踪。

Managing Entities

EntitiesCollection是一个用于管理和监视一组实体的关联数组。viewer.entities就是一个EntitiesCollection，EntitiesCollection包含add，remove，removeAll等方法来管理实体。
有时候我们需要更新之前创建的实体。每个实体都有一个独一无二的ID，我们可以指定这个ID，或者系统自动生成。

viewer.entities.add({
    id : 'uniqueId'
});

使用getById(unique ID)来拿到实体，如果该ID不存在，则返回undefined。

var entity = viewer.entities.getById('uniqueId');

使用getOrCreateById(unique ID)来拿到实体，如果该ID不存在，则创建实体。

var entity = viewer.entities.getOrCreateEntity('uniqueId');

Picking

/**
 * Returns the top-most entity at the provided window coordinates
 * or undefined if no entity is at that location.
 *
 * @param {Cartesian2} windowPosition The window coordinates.
 * @returns {Entity} The picked entity or undefined.
 */
function pickEntity(viewer, windowPosition) {
  var picked = viewer.scene.pick(windowPosition);
  if (defined(picked)) {
    var id = Cesium.defaultValue(picked.id, picked.primitive.id);
    if (id instanceof Cesium.Entity) {
      return id;
    }
  }
  return undefined;
};

/**
 * Returns the list of entities at the provided window coordinates.
 * The entities are sorted front to back by their visual order.
 *
 * @param {Cartesian2} windowPosition The window coordinates.
 * @returns {Entity[]} The picked entities or undefined.
 */
function drillPickEntities(viewer, windowPosition) {
  var i;
  var entity;
  var picked;
  var pickedPrimitives = viewer.scene.drillPick(windowPosition);
  var length = pickedPrimitives.length;
  var result = [];
  var hash = {};

  for (i = 0; i < length; i++) {
    picked = pickedPrimitives[i];
    entity = Cesium.defaultValue(picked.id, picked.primitive.id);
    if (entity instanceof Cesium.Entity &&
        !Cesium.defined(hash[entity.id])) {
      result.push(entity);
      hash[entity.id] = true;
    }
  }
  return result;
};

点，广告牌，标签

可以在地图上创建图形点或标签。

var viewer = new Cesium.Viewer('cesiumContainer');

var citizensBankPark = viewer.entities.add({
    name : 'Citizens Bank Park',
    position : Cesium.Cartesian3.fromDegrees(-75.166493, 39.9060534),
    point : {
        pixelSize : 5,
        color : Cesium.Color.RED,
        outlineColor : Cesium.Color.WHITE,
        outlineWidth : 2
    },
    /*将图形点更换为广告牌标志
    billboard : {
    image : '//cesium.com/images/docs/tutorials/creating-entities/Philadelphia_Phillies.png',
    width : 64,
    height : 64
  },
  	*/
    label : {
        text : 'Citizens Bank Park',
        font : '14pt monospace',
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        outlineWidth : 2,
        verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
        pixelOffset : new Cesium.Cartesian2(0, -9)
    }
});

viewer.zoomTo(viewer.entities);

在这里插入图片描述

3D模型

加载3D模型

var viewer = new Cesium.Viewer('cesiumContainer');
var entity = viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706),
    model : {
    //添加3D模型路径
        uri : '../../../../Apps/SampleData/models/GroundVehicle/GroundVehicle.glb'
    }
});
viewer.trackedEntity = entity;

默认模型是直立朝东的，通过修改Entity.orientation属性来更改朝向、俯仰角、旋转角等。

var viewer = new Cesium.Viewer('cesiumContainer');
var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706);
var heading = Cesium.Math.toRadians(45.0);
var pitch = Cesium.Math.toRadians(15.0);
var roll = Cesium.Math.toRadians(0.0);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, new Cesium.HeadingPitchRoll(heading, pitch, roll));

var entity = viewer.entities.add({
    position : position,
    orientation : orientation,
    model : {
        uri : '../../../../Apps/SampleData/models/GroundVehicle/GroundVehicle.glb'
    }
});
viewer.trackedEntity = entity;

Lafitteee拉菲

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Cesium学习笔记（三）创建实例

第一个实例用矩形绘出俄怀明州（Wyoming）的范围：var viewer = new Cesium.Viewer('cesiumContainer');var wyoming = viewer.entities.add({ polygon : { //hierarchy定义矩形环，Cartesian3:直角坐标 hierarchy : Cesium.Cartesian3.fromDegreesArray([ -109.0
复制链接

扫一扫