cesium的学习

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

二、下载cesium 1.3的压缩包。

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

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

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

  1.初始化控件

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

            });

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

<span style="white-space:pre">    </span>    var billboards = new Cesium.BillboardCollection();//图形集合
            scene.primitives.add(billboards);

            var labels = new Cesium.LabelCollection();//文字集合
            scene.primitives.add(labels);

<span style="white-space:pre">    </span>   //加载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);//拔高
<span style="white-space:pre">                </span>//深入可以考虑材质贴文理
                            }
                            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;
            }

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

<span style="font-size:18px;"><span style="white-space:pre">    </span>$.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');
                 });</span></span>

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

<span style="white-space:pre">    </span>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)//根据距离放大缩小图片
                });

            }

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

<span style="white-space:pre">    </span> 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