cesium的学习

一、学习资料：http://cesiumjs.org/tutorials.html，看完6个教程后对图层加载、控件控制开关、地形数据叠加、模型添加、相机控制、图形绘制有一点了解。这也是cesium的主要功能。

二、下载cesium 1.3的压缩包。

1.模块功能的演示：Apps/Sandcastle/gallery，能更加快速的入门。

2.API查询。Build\Documentation\，对函数、参数有了解。

三、实践：主要实现车辆位置的监控及厂区、道路的显示。

1.初始化控件

1. <span style="white-space:pre">    </span>var viewer = new Cesium.Viewer('cesiumContainer', {
2. //baseLayerPicker : false,//图层控制显示
3. animation: false, //动画控制不显示
4. timeline: false,//时间线不显示
5. sceneModePicker: false,//投影方式显示
6. navigationHelpButton: false//帮助不显示
7. });

2.加载geojson道路和厂区建筑

1. <span style="white-space:pre">    </span>    var billboards = new Cesium.BillboardCollection();//图形集合
2. scene.primitives.add(billboards);
3. var labels = new Cesium.LabelCollection();//文字集合
4. scene.primitives.add(labels);

1. <span style="white-space:pre">    </span>   //加载geojson
2. function loadGeoJson(url) {
3. var dtd = $.Deferred();//这个Deferred可以看看jquery的资料
4. var dataSource = new Cesium.GeoJsonDataSource();
5. viewer.dataSources.add(dataSource);
6. dataSource.loadUrl(url).then(function () {
7. var entities = dataSource.entities.entities;
8. var colorHash = {};
9. for (var i = 0; i < entities.length; i++) {
10. var entity = entities[i];
11. var colorstr = entity.properties["color"];
12. var ispolygon = entity.polygon;
13. var ispolyline = entity.polyline;
14. var color = Cesium.Color.BLUE;
15. if (colorstr) {
16. color = colorHash[colorstr];
17. if (!color) {
18. color = Cesium.Color.fromRandom({
19. alpha: 0.6
20. });//这里采用随机，api中颜色用的是rgba的32位
21. colorHash[name] = color;
22. }
23. }
24. if (ispolygon)//面处理
25. {
26. entity.polygon.material = Cesium.ColorMaterialProperty.fromColor(color);
27. var height=entity.properties["height"];//要素的属性字段
28. var x = entity.properties["x"];
29. var y = entity.properties["y"];
30. var name = entity.properties["NAME"];
31. if (height) {
32. entity.polygon.extrudedHeight = new Cesium.ConstantProperty(height);//拔高
33. <span style="white-space:pre">                </span>//深入可以考虑材质贴文理
34. }
35. if (x && y)
36. {
37. if (!height)
38. { height = 0; }
39. if (name) {
40. buildlabels.add({//添加面的标注
41. position: Cesium.Cartesian3.fromDegrees(x, y, height+5),
42. text: name,
43. scale: 0.8,
44. translucencyByDistance: new Cesium.NearFarScalar(2000, 1, 3000, 0),//代表2000米，透明度1。3000米，文字透明度0
45. fillColor: new Cesium.Color(0.6, 0.9, 1.0),
46. outlineColor: Cesium.Color.BLACK,
47. outlineWidth: 2,
48. style: Cesium.LabelStyle.FILL_AND_OUTLINE
49. });
50. }
51. }
52. }
53. else if (ispolyline)//线处理
54. {
55. entity.polyline.material = Cesium.ColorMaterialProperty.fromColor(color);
56. }
57. }
58. dtd.resolve();
59. });
60. return dtd;
61. }

3.同时加载2个geojson数据及定位后再加载车辆。但是还是车子先显示

1. <span style="font-size:18px;"><span style="white-space:pre">    </span>$.when(loadGeoJson('data/road5.geojson'), loadGeoJson('data/build6.geojson'), zoomToCenter(x, y))
2. .done(function () {
3. setInterval(refreshCar, 10000);
4. jBox2.tip("加载完成", 'success');
5. })
6. .fail(function () {
7. jBox2.tip("加载失败", 'error');
8. });</span></span>

4.加载车辆。原来想用模型，但是效率不行，demo中的1m左右车子，加载100个就挂了。后来采用图片，车子确没有方向性了，图片随地图拖动自动旋转的。效率确实快了。

1. <span style="white-space:pre">    </span>function createModel2(car) {
2. var x = car.jin;
3. var y = car.wei;
4. var carid = car.carid;
5. labels.add({//给车子添加标注
6. position: Cesium.Cartesian3.fromDegrees(x, y, 5),
7. text: carid,
8. scale: 0.8,
9. translucencyByDistance: new Cesium.NearFarScalar(200, 1, 500, 0)
10. });
11. billboards.add({
12. image: 'image/car.gif',
13. position: Cesium.Cartesian3.fromDegrees(x, y, 0),
14. scaleByDistance: new Cesium.NearFarScalar(0, 2, 10000, 0)//根据距离放大缩小图片
15. });
16. }

5.加载外部模型测测效率-10m左右的房子。

1. <span style="white-space:pre">    </span> function createModel(url, x, y, height, rotate) {
2. height = Cesium.defaultValue(height, 0.0);
3. var ellipsoid = viewer.scene.globe.ellipsoid;
4. var cart3 = ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(x, y, height));
5. var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(cart3);
6. var quat = Cesium.Quaternion.fromAxisAngle(Cesium.Cartesian3.UNIT_Z, Cesium.Math.toRadians(rotate));
7. var mat3 = Cesium.Matrix3.fromQuaternion(quat);
8. var mat4 = Cesium.Matrix4.fromRotationTranslation(mat3, Cesium.Cartesian3.ZERO);
9. var m = Cesium.Matrix4.multiplyTransformation(modelMatrix, mat4, new Cesium.Matrix4());
10. var model = scene.primitives.add(Cesium.Model.fromGltf({
11. url: url,//模型地址
12. modelMatrix: m,//模型转换矩阵，像角度，之类
13. minimumPixelSize: 30,//地图上显示最小像素
14. scale: 10//模型放大比例
15. }));
16. // model.readyToRender.addEventListener(function (model) {//如果模型有动画，开启动画
17. //Play and loop all animations at half-speed
18. //  model.activeAnimations.addAll({
19. //      speedup : 0.5,
20. //      loop : Cesium.ModelAnimationLoop.REPEAT
21. //  });
22. //
23. //  });
24. };

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