一、学习资料: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

cesium的学习的更多相关文章

  1. 最近开始学习Cesium,学习学习。

    最近开始学习Cesium,学习学习.

  2. cesium相关学习网址

    cesium相关学习网址: cesium资料大全网址:https://www.cnblogs.com/cesium1/p/10062942.html       http://192.168.101. ...

  3. Cesium系统学习整理(一)

    (一)Cesium的概念定义 Cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎.Cesium支持3D,2D,2.5D形式的地图展示,可以自行绘制图形,高亮区域,并提供良好的 ...

  4. cesium js学习一加载三维模型【转】

    http://blog.csdn.net/tangyajun_168/article/details/50936698 最近项目中用到室外三维模型与室内三维地图交互,室外三维模型的加载我们采用了ces ...

  5. Cesium.js学习第三天(模型展示)

    var viewer = new Cesium.Viewer('cs'); viewer.scene.primitives.add(Cesium.Model.fromGltf({ url : '/Ce ...

  6. Cesium.js学习第二天(立方体)

    var viewer = new Cesium.Viewer('cs'); viewer.entities.add({//图标 position: Cesium.Cartesian3.fromDegr ...

  7. Cesium.js学习第一天(设置材质)

    var viewer = new Cesium.Viewer('cs'); var entity = viewer.entities.add({ position: Cesium.Cartesian3 ...

  8. cesium 学习(四) Hello World

    一.前言 之前的文章都是基础,搭建环境.部署Cesium.学习资料等等.现在简单入手,一个Hello World页面开发. 二.Hello World 感觉Hello World没有什么特别需要讲的, ...

  9. Cesium学习笔记(七):Demo学习(自由控制飞行的飞机)[转]

    https://blog.csdn.net/umgsoil/article/details/74923013# 这是官方的教程Demo,名字叫Use HeadingPitchRoll,顾名思义,就是教 ...

随机推荐

  1. 【APIO2012】【BZOJ2809】派遣dispatching

    2809: [Apio2012]dispatching Time Limit: 10 Sec Memory Limit: 128 MB Submit: 1932 Solved: 967 [Submit ...

  2. [Vue-rx] Pass Template Data Through domStreams in Vue.js and RxJS

    domStreams enable you to pass additional data along the stream that can be provided by the template ...

  3. DIY.NETORM框架——总体分析

    一.故事 近些年一直开发MIS系统,用过PB,VB,C#  .如今学了半年的java,早先听人说,.NET和 java一直就是互相借鉴.一起升级.都是为了让程序开发趋于简单,高校,而这不可避免就肯定用 ...

  4. 工作总结 datatable 里的 数据 rows Columns

    json 格式数据 row  6行   每行 81 列   对应数据 col   81 列 每列代表字段

  5. 更改App.config里的值并保存

    using System; using System.Collections.Generic; using System.Configuration; using System.IO; using S ...

  6. linux替换目录下所有文件中的某字符串

    linux替换目录下所有文件中的某字符串 比如,要将目录/modules下面所有文件中的zhangsan都修改成lisi,这样做: sed -i "s/zhangsan/lisi/g&quo ...

  7. Windows的所有风格与扩展风格

    SetWindowLonghttp://msdn.microsoft.com/en-us/library/windows/desktop/ms633591(v=vs.85).aspxWindow St ...

  8. X86架构下Linux启动过程分析

    1.X86架构下的从开机到Start_kernel启动的整体过程 这个过程简要概述为: 开机-->BIOS-->GRUB/LILO-->Linux Kernel 其执行的流程图和重要 ...

  9. JZOJ 5791 阶乘 —— 因数

    题目:https://jzoj.net/senior/#main/show/5791 题意:有n个正整数a[i],设它们乘积为p,你可以给p乘上一个正整数q,使p*q刚好为正整数m的阶乘,求m的最小值 ...

  10. AD9850驱动程序--MSP430版本

    前段时间忙着画板子搞运放搞滤波了,程序更新的少,发现MSP430不是太好用,尤其Timer,不过也与我使用内部晶振有关,产生正玄波之前用MSP430发出PWM,再进行滤波变为正弦波太麻烦了,这次改用D ...