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