cesium的学习
一、学习资料：http://cesiumjs.org/tutorials.html，看完6个教程后对图层加载、控件控制开关、地形数据叠加、模型添加、相机控制、图形绘制有一点了解。这也是cesium的主要功能。
二、下载cesium 1.3的压缩包。
1.模块功能的演示：Apps/Sandcastle/gallery，能更加快速的入门。
2.API查询。Build\Documentation\，对函数、参数有了解。
三、实践：主要实现车辆位置的监控及厂区、道路的显示。
1.初始化控件
var viewer = new Cesium.Viewer('cesiumContainer', {
//baseLayerPicker : false,//图层控制显示
animation: false, //动画控制不显示
timeline: false,//时间线不显示
sceneModePicker: false,//投影方式显示
navigationHelpButton: false//帮助不显示
});2.加载geojson道路和厂区建筑
var billboards = new Cesium.BillboardCollection();//图形集合
scene.primitives.add(billboards);
var labels = new Cesium.LabelCollection();//文字集合
scene.primitives.add(labels); //加载geojson
function loadGeoJson(url) {
var dtd = $.Deferred();//这个Deferred可以看看jquery的资料
var dataSource = new Cesium.GeoJsonDataSource();
viewer.dataSources.add(dataSource);
dataSource.loadUrl(url).then(function () {
var entities = dataSource.entities.entities;
var colorHash = {};
for (var i = 0; i < entities.length; i++) {
var entity = entities[i];
var colorstr = entity.properties["color"];
var ispolygon = entity.polygon;
var ispolyline = entity.polyline;
var color = Cesium.Color.BLUE;
if (colorstr) {
color = colorHash[colorstr];
if (!color) {
color = Cesium.Color.fromRandom({
alpha: 0.6
});//这里采用随机，api中颜色用的是rgba的32位
colorHash[name] = color;
}
}
if (ispolygon)//面处理
{
entity.polygon.material = Cesium.ColorMaterialProperty.fromColor(color);
var height=entity.properties["height"];//要素的属性字段
var x = entity.properties["x"];
var y = entity.properties["y"];
var name = entity.properties["NAME"];
if (height) {
entity.polygon.extrudedHeight = new Cesium.ConstantProperty(height);//拔高
//深入可以考虑材质贴文理
}
if (x && y)
{
if (!height)
{ height = 0; }
if (name) {
buildlabels.add({//添加面的标注
position: Cesium.Cartesian3.fromDegrees(x, y, height+5),
text: name,
scale: 0.8,
translucencyByDistance: new Cesium.NearFarScalar(2000, 1, 3000, 0),//代表2000米，透明度1。3000米，文字透明度0
fillColor: new Cesium.Color(0.6, 0.9, 1.0),
outlineColor: Cesium.Color.BLACK,
outlineWidth: 2,
style: Cesium.LabelStyle.FILL_AND_OUTLINE
});
}
}
}
else if (ispolyline)//线处理
{
entity.polyline.material = Cesium.ColorMaterialProperty.fromColor(color);
}
}
dtd.resolve();
});
return dtd;
} $.when(loadGeoJson('data/road5.geojson'), loadGeoJson('data/build6.geojson'), zoomToCenter(x, y))
.done(function () {
setInterval(refreshCar, 10000);
jBox2.tip("加载完成", 'success');
})
.fail(function () {
jBox2.tip("加载失败", 'error');
}); function createModel2(car) {
var x = car.jin;
var y = car.wei;
var carid = car.carid;
labels.add({//给车子添加标注
position: Cesium.Cartesian3.fromDegrees(x, y, 5),
text: carid,
scale: 0.8,
translucencyByDistance: new Cesium.NearFarScalar(200, 1, 500, 0)
});
billboards.add({
image: 'image/car.gif',
position: Cesium.Cartesian3.fromDegrees(x, y, 0),
scaleByDistance: new Cesium.NearFarScalar(0, 2, 10000, 0)//根据距离放大缩小图片
});
}
function createModel(url, x, y, height, rotate) {
height = Cesium.defaultValue(height, 0.0);
var ellipsoid = viewer.scene.globe.ellipsoid;
var cart3 = ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(x, y, height));
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(cart3);
var quat = Cesium.Quaternion.fromAxisAngle(Cesium.Cartesian3.UNIT_Z, Cesium.Math.toRadians(rotate));
var mat3 = Cesium.Matrix3.fromQuaternion(quat);
var mat4 = Cesium.Matrix4.fromRotationTranslation(mat3, Cesium.Cartesian3.ZERO);
var m = Cesium.Matrix4.multiplyTransformation(modelMatrix, mat4, new Cesium.Matrix4());
var model = scene.primitives.add(Cesium.Model.fromGltf({
url: url,//模型地址
modelMatrix: m,//模型转换矩阵，像角度，之类
minimumPixelSize: 30,//地图上显示最小像素
scale: 10//模型放大比例
}));
// model.readyToRender.addEventListener(function (model) {//如果模型有动画，开启动画
//Play and loop all animations at half-speed
// model.activeAnimations.addAll({
// speedup : 0.5,
// loop : Cesium.ModelAnimationLoop.REPEAT
// });
//
// });
};6,模型处理过程
sketchup下载模型-》导出dae格式-》将图片及dae压缩成zip格式-》 http://cesiumjs.org/convertmodel.html-》转换完成自动下载glTF文件-》copy glTF文件及图片文件到工程目录下。当中碰见过问题是图片格式是bmp，但是glTF中写的是png，可以手动修改下文件中相应图片的后缀。
四、综合
1.cesium基于webgl，实践中性能不佳，特别是模型这块支持不理想。对矢量操作确实不错,商用有差距。
2.官网有些插件可以下载直接使用，如cesium-drawhelper（画图工具）
3.可以参考下这位的博客：http://my.oschina.net/u/1585572/blog/287961