美文网首页CesiumCesium开源
cesium编程入门(五)绘制形状

cesium编程入门(五)绘制形状

作者: 伐罗密 | 来源:发表于2018-01-08 22:57 被阅读48次

    通过Entity添加形状

    先来看一个添加立方体的例子

    var viewer = new Cesium.Viewer('cesiumContainer');
    var redBox = **viewer.entities.add**({
      name : 'Red box with black outline',
      position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
      box : {
        dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
        material : Cesium.Color.RED.withAlpha(0.5),
        outline : true,
        outlineColor : Cesium.Color.BLACK
      }
    });
    
    viewer.zoomTo(viewer.entities);
    

    效果如图:

    Jietu20180108-214130.jpg

    通过CZML添加

    通过CZML也可以添加几何形状,而且CZML还可以描述动画(现在先有个印象,动画以后介绍)

    先来看看官网上的说明,CZML是一种JSON格式的字符串,用于描述与时间有关的动画场景,CZML包含点、线、地标、模型、和其他的一些图形元素,并指明了这些元素如何随时间而变化。某种程度上说, Cesium 和 CZML的关系就像 Google Earth 和 KML。

    var czml = [{
        "id" : "document",
        "name" : "box",
        "version" : "1.0"
    },{
        "id" : "shape2",
        "name" : "Red box with black outline",
        "position" : {
            "cartographicDegrees" : [-107.0, 40.0, 300000.0]
        },
        "box" : {
            "dimensions" : {
                "cartesian": [400000.0, 300000.0, 500000.0]
            },
            "material" : {
                "solidColor" : {
                    "color" : {
                        "rgba" : [255, 0, 0, 128]
                    }
                }
            },
            "outline" : true,
            "outlineColor" : {
                "rgba" : [0, 0, 0, 255]
            }
        }
    }];
    
    var viewer = new Cesium.Viewer('cesiumContainer');
    var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
    viewer.dataSources.add(dataSourcePromise);
    viewer.zoomTo(dataSourcePromise);
    
    

    可以看到单个的形状和Entity的描述基本一致,只不过是使用JSON语法来描述,关于形状描述可以参考官方API,下一节列出形状的相关信息

    形状相关描述

    下表来自于官方网站,但是连接改为本地链接了

         
    Point pointGeometry.png entity.point - Reference Build/Documentation
    Boxes boxGeometry.png entity.box - Code example - Reference Build/Documentation
    Circles and Ellipses ellipseGeometry.png entity.ellipse - Code example - Reference Build/Documentation
    Corridor corridorGeometry.png entity.corridor - Code example - Reference Build/Documentation
    Cylinder and Cones cylinderGeometry.png entity.cylinder - Code example - Reference Build/Documentation
    Polygons polygonGeometry.png entity.polygon - Code example - Reference Build/Documentation
    Polylines polylineGeometry.png entity.polyline - Code example - Reference Build/Documentation
    Polyline Volumes polylineVolumeGeometry.png entity.polylineVolume - Code example - Reference Build/Documentation
    Rectangles extentGeometry.png entity.rectangle - Code example - Reference Build/Documentation
    Spheres and Ellipsoids ellipsoidGeometry.png entity.ellipsoid - Code example - Reference Build/Documentation
    Walls wallGeometry.png entity.wall - Code example - Reference Build/Documentation

    个人主页 http://cesium.xin

    Cesium学习交流群:593764057

    相关文章

      网友评论

        本文标题:cesium编程入门(五)绘制形状

        本文链接:https://www.haomeiwen.com/subject/qjuinxtx.html