Cesium编程入门1

1. 绘制形状

1.1 通过entity添加形状

entity的属性：id（唯一标志）、name（名称）、availability（可用性）、show（可见性）、description（描述）、position（位置）、orientation(方向)、viewFrom（初始偏移量）、parent（父节点）

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

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

  }

});



viewer.zoomTo(viewer.entities);

1.2 通过czml添加形状

先来看看官网上的说明，CZML是一种JSON格式的字符串，用于描述与时间有关的动画场景，CZML包含点、线、地标、模型、和其他的一些图形元素，并指明了这些元素如何随时间而变化。某种程度上说, Cesium和CZML的关系就像Google Earth和KML。

var czml = [{

    "id" : "document",

    "name" : "box",

    "version" : "1.0"

},{

    "id" : "shape2",

    "name" : "Red box with black outline",

    "position" : {

        "cartographicDegrees" : [-107.0, 40.0, 300000.0]

    },

    "box" : {

        "dimensions" : {

            "cartesian": [400000.0, 300000.0, 500000.0]

        },

        "material" : {

            "solidColor" : {

                "color" : {

                    "rgba" : [255, 0, 0, 128]

                }

            }

        },

        "outline" : true,

        "outlineColor" : {

            "rgba" : [0, 0, 0, 255]

        }

    }

}];



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

var dataSourcePromise = Cesium.CzmlDataSource.load(czml);

viewer.dataSources.add(dataSourcePromise);

viewer.zoomTo(dataSourcePromise);

2. 添加3D Tiles

3D Tiles数据集以分块、分级渲染，将大数据量三维数据以分块，分层的形式组织起来，可以大量减轻浏览器和GPU的负担是—个优秀的，并且格式公开的数据格式。

3D Tiles将用于流式传输3D内容，包括建筑物，树木，点云和矢量数据。

//数据加载

var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({

    url: url, //数据路径

    maximumScreenSpaceError: 2, //最大的屏幕空间误差

    maximumNumberOfLoadedTiles: 1000, //最大加载瓦片个数

    modelMatrix: m //形状矩阵

}));

通过偏移量更改3D Tiles位置

//直接调用函数，调整高度,height表示物体离地面的高度

function changeHeight(height) {

height = Number(height);

if (isNaN(height)) {

return;

}

var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);

var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);

var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude,height);

var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());

tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);

}

3. 设置材质

Cesium材质相关的类为MaterialProperty，它有以下几个子类:- ColorMaterialProperty

- lmageMaterialProperty

-CheckerboardMaterialProperty

- StripeMaterialProperty

-GridMaterialProperty

- PolylineGlowMaterialProperty

- PolylineOutlineMaterialProperty

//方法一，构造时赋材质

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)//可设置不同的MaterialProperty

  }

});



//方法二，构造后赋材质

var ellipse = entity.ellipse;

ellipse.material = Cesium.Color.RED;

4. 实体entity的操作

4.1 增

//方法一

var entity = new Entity({

    id : 'uniqueId'

});

viewer.entities.add(entity);



//方法一 简写

viewer.entities.add({

    id : 'uniqueId'

});



//方法二

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

4.2 删

//方法一，先查后删

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

viewer.entities.remove(entity)

//方法二，直接删除

viewer.entities.removeById('uniqueId')

//方法三，删除所有

viewer.entities.removeAll()

4.3 改

function onChanged(collection, added, removed, changed){

  var msg = 'Added ids';

  for(var i = 0; i < added.length; i++) {

    msg += '\n' + added[i].id;

  }

  console.log(msg);

}

viewer.entities.collectionChanged.addEventListener(onChanged);

4.4 查

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