cesium的学习

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

二、下载cesium 1.3的压缩包。

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

2.API查询。BuildDocumentation，对函数、参数有了解。

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

  1.初始化控件

[javascript] view plain copy
  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.   
  8.             });  

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

[javascript] view plain copy
  1. <span style="white-space:pre">    </span>    var billboards = new Cesium.BillboardCollection();//图形集合  
  2.             scene.primitives.add(billboards);  
  3.             
  4.             var labels = new Cesium.LabelCollection();//文字集合  
  5.             scene.primitives.add(labels);    
[javascript] view plain copy
  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.                        
  13.                         var ispolygon = entity.polygon;  
  14.                         var ispolyline = entity.polyline;  
  15.                           
  16.   
  17.                         var color = Cesium.Color.BLUE;  
  18.                         if (colorstr) {  
  19.                             color = colorHash[colorstr];  
  20.                             if (!color) {  
  21.                                 color = Cesium.Color.fromRandom({  
  22.                                     alpha: 0.6  
  23.                                 });//这里采用随机，api中颜色用的是rgba的32位  
  24.                                 colorHash[name] = color;  
  25.                             }  
  26.                         }  
  27.                         if (ispolygon)//面处理  
  28.                         {  
  29.   
  30.                             entity.polygon.material = Cesium.ColorMaterialProperty.fromColor(color);  
  31.                             var height=entity.properties["height"];//要素的属性字段  
  32.                             var x = entity.properties["x"];  
  33.                             var y = entity.properties["y"];  
  34.                             var name = entity.properties["NAME"];  
  35.                             if (height) {  
  36.                                     entity.polygon.extrudedHeight = new Cesium.ConstantProperty(height);//拔高  
  37. <span style="white-space:pre">                </span>//深入可以考虑材质贴文理  
  38.                             }  
  39.                             if (x && y)  
  40.                             {  
  41.                                 if (!height)  
  42.                                 { height = 0; }  
  43.                                 if (name) {  
  44.                                     buildlabels.add({//添加面的标注  
  45.                                         position: Cesium.Cartesian3.fromDegrees(x, y, height+5),  
  46.                                         text: name,  
  47.                                         scale: 0.8,  
  48.                                         translucencyByDistance: new Cesium.NearFarScalar(2000, 1, 3000, 0),//代表2000米，透明度1。3000米，文字透明度0  
  49.                                         fillColor: new Cesium.Color(0.6, 0.9, 1.0),  
  50.                                         outlineColor: Cesium.Color.BLACK,  
  51.                                         outlineWidth: 2,  
  52.                                         style: Cesium.LabelStyle.FILL_AND_OUTLINE  
  53.                                     });  
  54.                                 }  
  55.                             }  
  56.   
  57.                         }  
  58.                         else if (ispolyline)//线处理  
  59.                         {  
  60.                             entity.polyline.material = Cesium.ColorMaterialProperty.fromColor(color);  
  61.                          
  62.                         }  
  63.                          
  64.                     }  
  65.   
  66.                     dtd.resolve();  
  67.                 });  
  68.   
  69.                 return dtd;  
  70.             }  
3.同时加载2个geojson数据及定位后再加载车辆。但是还是车子先显示快哭了
[javascript] view plain copy
  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.                     
  5.                     jBox2.tip("加载完成", 'success');  
  6.                 })  
  7.                  .fail(function () {  
  8.                      jBox2.tip("加载失败", 'error');  
  9.                  });</span></span>  
  4.加载车辆。原来想用模型，但是效率不行，demo中的1m左右车子，加载100个就挂了。后来采用图片，车子确没有方向性了抓狂，图片随地图拖动自动旋转的。效率确实快了。
[javascript] view plain copy
  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.                
  6.                 labels.add({//给车子添加标注  
  7.                     position: Cesium.Cartesian3.fromDegrees(x, y, 5),  
  8.                     text: carid,  
  9.                     scale: 0.8,  
  10.                     translucencyByDistance: new Cesium.NearFarScalar(200, 1, 500, 0)  
  11.                 });  
  12.                 
  13.                 billboards.add({  
  14.                     image: 'image/car.gif',  
  15.                     position: Cesium.Cartesian3.fromDegrees(x, y, 0),  
  16.   
  17.                     scaleByDistance: new Cesium.NearFarScalar(0, 2, 10000, 0)//根据距离放大缩小图片  
  18.                 });  
  19.   
  20.             }  
5.加载外部模型测测效率-10m左右的房子。
[javascript] view plain copy
  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.   
  11.                 var model = scene.primitives.add(Cesium.Model.fromGltf({  
  12.                     url: url,//模型地址  
  13.                     modelMatrix: m,//模型转换矩阵，像角度，之类  
  14.                     minimumPixelSize: 30,//地图上显示最小像素  
  15.                     scale: 10//模型放大比例  
  16.                 }));  
  17.                // model.readyToRender.addEventListener(function (model) {//如果模型有动画，开启动画  
  18.                     //Play and loop all animations at half-speed  
  19.                     //  model.activeAnimations.addAll({  
  20.                     //      speedup : 0.5,  
  21.                     //      loop : Cesium.ModelAnimationLoop.REPEAT  
  22.                     //  });  
  23.                     //    
  24.               //  });  
  25.   
  26.             };  

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

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/yanan-boke/p/7605441.html