碼上快樂

相關內容    簡體    繁體

cesium的學習

本文轉載自   查看原文   2017-09-28 10:20   1315    cesium

一、學習資料：http://cesiumjs.org/tutorials.html，看完6個教程后對圖層加載、控件控制開關、地形數據疊加、模型添加、相機控制、圖形繪制有一點了解。這也是cesium的主要功能。

二、下載cesium 1.3的壓縮包。

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

2.API查詢。Build\Documentation\，對函數、參數有了解。

三、實踐：主要實現車輛位置的監控及廠區、道路的顯示。

  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


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Cesium 學習（三）各種資源鏈接 Cesium 學習小結（一） Cesium 學習（一）環境搭建 Cesium學習筆記（四）Camera Cesium 學習筆記 Cesium學習系列匯總 cesium學習--初識 cesium 學習(六) 坐標轉換 cesium 學習(七) HeadingPitchRoll cesium 學習(五) 加載場景模型
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM