cesium 学习(五) 加载场景模型
一、前言
现在开始实际的看看效果，目前我所接触到基本上都是使用Cesium加载模型这个内容，以及在模型上进行操作。So，现在进行一些加载模型的学习，数据的话可以去网上找，因为目前使用的都是需要保密的数据，所以不能发在网上。
二、加载Entity类型模型
说到加载Entity模型，内容就有点多了，cesium场景中的点、线、面、label以及模型（gltf、glb）；还有圆、墙体、方体、球等几何对象也都可以使用Entity来加载。下面分别加载试试看。
2.1加载点、线、面
var viewer = new Cesium.Viewer('cesiumContainer'); // 场景查看器对象
// 点的Entity
var pointEntity = new Cesium.Entity({
id: 'point', // id属性
position: Cesium.Cartesian3.fromDegrees(, , ), // 位置
point: { // 点
color: new Cesium.Color.fromCssColorString("#3388ff"), // 点颜色
pixelSize: , // 点大小
outlineColor: new Cesium.Color.fromCssColorString("#ffffff"), // 点的外圈线颜色
outlineWidth: , // 点的外圈线宽度
disableDepthTestDistance: Number.POSITIVE_INFINITY // 被遮挡是否可见（也就是将这个Entity在场景中置顶）
}
});
// 线的Entity
var lineEntity = new Cesium.Entity({
name: "line", // 线的name属性
polyline: { // 线
positions: [Cesium.Cartesian3.fromDegrees(, , ), Cesium.Cartesian3.fromDegrees(, , )], // 由点构线
width: 5.0, // 线的宽度
material: new Cesium.PolylineGlowMaterialProperty({
color: Cesium.Color.GOLD,
}), // 线的材质、样式
depthFailMaterial: new Cesium.PolylineGlowMaterialProperty({
color: Cesium.Color.GOLD,
}), // 视线被遮挡处的材质、样式（和上一个材质一样的话则就不会被遮挡，类似置顶效果）
}
});
// 面的Entity，其他Entity属性可以自行查看API
var polygon = new Cesium.Entity({
polygon: {
height: 0.1,
hierarchy: new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights([, , , , , , , , ])), // 面的顶点坐标集合
material: new Cesium.Color.fromCssColorString("#FFD700").withAlpha(.), // 材质样式
perPositionHeight: true, // 是否支持坐标高度
}
});
2.2加载label
其实label一般和其他一起使用，比如点。
var entity = viewer.entities.add({
id: '',
position: Cesium.Cartesian3.fromDegrees(, , ),
point: {
color: new Cesium.Color.fromCssColorString("#3388ff"),
pixelSize: ,
outlineColor: new Cesium.Color.fromCssColorString("#3388ff"),
outlineWidth: ,
heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
disableDepthTestDistance: Number.POSITIVE_INFINITY
},
label: {
text: 'lable文本',
font: '10px sans-serif', // 字体
style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 样式
fillColor: Cesium.Color.WHITE, // 填充色
outlineWidth: , // 字体外圈线宽度（同样也有颜色可设置）
verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直位置
pixelOffset: new Cesium.Cartesian2(, -), // 中心位置
disableDepthTestDistance: Number.POSITIVE_INFINITY
}
});
2.3加载model
model类型的entity的资源可以是使用max等建模软件做的模型，然后转换成webgl加载的模型——gltf、glb。
var modelentity = viewer.entities.add({
name:'',
description:"<div><img src='Build/Cesium/Assets/Images/cesium_credit.png' /><p>这是一辆大车！</div>", // 这是模型的描述属性，可以是html标签
position : Cesium.Cartesian3.fromDegrees(, ),
model : {
uri : 'Models/GroundVehicle/GroundVehicle.glb' // 资源路径
}
});
三、加载Primitive类型模型
Primitive类型的加载也是比较有趣的，在Entity中不好控制的一些属性，可以在Primitive中很好的控制，比如Entity没有加载完成事件，而Primitive有加载完成事件；entity只能加载一个对象，而Primitive可以一次加载多个对象。
当然Entity类型也是有它独特的好处的，不然官方也不会将其制造出来，明显的就是Entity类封装了很多个几何对象，非常方便的绘制出几何对象来，而如果使用Primitive的话你需要懂的知识不少，比如几何对象的构造。
回到Primitive上，它的好处是高效加载、灵活绘制；Primitive的加载机制要好于Entity，这点我没有去做详细测试，但是网上是有这个测试的；对于其灵活性，主要是它可以不仅是单个几何对象，可以是多个几何对象或是不规则的对象的绘制加载，这点Entity没法做。
好，还是通过几个加载来认识下Primitive。
3.1加载模型
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 0.0)
);
viewer.scene.primitives.add(Cesium.Model.fromGltf({ //fromGltf方法：从Gltf资源加载模型
url: 'Models/GroundVehicle/GroundVehicle.glb',
modelMatrix: modelMatrix,
// minimumPixelSize : 512,
// maximumScale : 200000
})
);
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 30.0)
});
3.2加载动画模型
var controller = viewer.scene.screenSpaceCameraController;
//中心点
var center = new Cesium.Cartesian3();
//模型的偏移参数
var hpRoll = new Cesium.HeadingPitchRoll();
//相机的偏移参数
var hpRange = new Cesium.HeadingPitchRange();
//初始位置
position = Cesium.Cartesian3.fromDegrees(, , 0.08);
//速度向量
var speedVector = new Cesium.Cartesian3();
//生成一个由两个参考系生成的矩阵
var fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator('north', 'west');
//加载模型
peoPrimitive = scene.primitives.add(Cesium.Model.fromGltf({
//这里需要把模型路径改下(如果你用的还是HelloWord.html的话就用这个,不是的话请自行修改)
url: '../Models/GLTF/CesiumMan/Cesium_Man.glb',
modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll, Cesium.Ellipsoid.WGS84, fixedFrameTransform),
//minimumPixelSize: 128
})); //动画播放
peoPrimitive.readyPromise.then(function (model) {
// 以半速循环动画
model.activeAnimations.addAll({
speedup: ,
loop: Cesium.ModelAnimationLoop.REPEAT
});
//r=2*max(模型的半径，相机的最近距离)
r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
//镜头最近距离
controller.minimumZoomDistance = r * 0.5;
//计算center位置(也为下面的镜头跟随提供了center位置)
Cesium.Matrix4.multiplyByPoint(model.modelMatrix, model.boundingSphere.center, center);
//相机偏移角度
var heading = Cesium.Math.toRadians(0.0);
var pitch = Cesium.Math.toRadians(-20.0);
hpRange.heading = heading;
hpRange.pitch = pitch;
hpRange.range = r + ;
//固定相机
camera.lookAt(center, hpRange);
});
3.3加载多个几何对象
var instances = [];
var positions_l = [......]; // Cartesian3坐标集合
positions_l.forEach(position => {
instances.push(new Cesium.GeometryInstance({
geometry: new Cesium.EllipseGeometry({
center: position,
semiMinorAxis: 0.024,
semiMajorAxis: 0.024,
height: ,
extrudedHeight: height1,
material: Cesium.Color.GOLD,
}),
id: { guid: guid, jsj_name: name, name: '立杆' },
attributes: {
color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.GOLDENROD)
}
}));
});
// instances 就是很多个几何对象（这里是圆柱），然后后用primitive统一合并加载
var ganmodel = viewer.scene.primitives.add(new Cesium.Primitive({
geometryInstances: instances,
appearance: new Cesium.MaterialAppearance({
material: Cesium.Material.fromType('Color', {
color: Cesium.Color.GOLD
}),
}),
}));
四、总结
Entity加载方式在一定程度上是比Primitive方式更加方便的，特别是Entity不仅可以加载点、线、面、标签、模型、几何对象，而且是可以同时加载比如点和标签一起加载，如果愿意可以使用一个Entity对象加载一个点、一条线、一个面、一个模型、多个不同的几何对象！当然Primitive方法也是可以的，不过就没有Entity这么方便了。
Primitive主要是更偏底层一些，它可以使用Entity没有的一些属性，然后也更加灵活一些，比如我最后的添加多个立杆模型，Entity方法是没法构造一个Entity对象完成多个立杆的绘制的，有多少个立杆就得创建多少个Entity在内存使用上就稍微弱了。