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

通过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);

效果如图:

通过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 entity.point – Reference Build/Documentation
Boxes entity.box – Code exampleReference Build/Documentation
Circles and Ellipses entity.ellipse – Code exampleReference Build/Documentation
Corridor entity.corridor – Code exampleReference Build/Documentation
Cylinder and Cones entity.cylinder – Code exampleReference Build/Documentation
Polygons entity.polygon – Code exampleReference Build/Documentation
Polylines entity.polyline – Code exampleReference Build/Documentation
Polyline Volumes entity.polylineVolume – Code exampleReference Build/Documentation
Rectangles entity.rectangle – Code exampleReference Build/Documentation
Spheres and Ellipsoids entity.ellipsoid – Code exampleReference Build/Documentation
Walls entity.wall – Code exampleReference Build/Documentation

14 thoughts to “cesium编程入门(五)绘制形状”

  1. 我在viewer前加上key 出现这样的报错 Uncaught TypeError: Cannot set property ‘defaultAccessToken’ of undefined

  2. 琢磨了一下,发现形状的坐标是以中心点为基准。
    也就是说当z轴坐标为形状高度的一半时,形状是刚好在地面上的,例如这样:
    position:Cesium.Cartesian3.fromDegrees(-107.0,40.0,200000.0),

    dimensions:new Cesium.Cartesian3(400000.0,300000.0,400000.0),

  3. 请问为什么THREEJS写的html文件可以直接用浏览器打开,而Cesium工程必须要用服务器发布后才能打开呢

  4. 我用的是vue。对源码稍加修改即可运行示例。
    在vue的mounted()生命周期里执行load()函数。load()函数如下。
    load(){
    Cesium.Ion.defaultAccessToken = “eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhMGU0MDRiMC04NDZiLTRlZGUtOTFjOS00OThmOWJhYjBiOTkiLCJpZCI6MTAyMjk0LCJpYXQiOjE2NTg2NDY4NTF9.mef7uY2FZ9zicOFvcAs-KAngdfRU27eRh2BOXq9BcxY”
    this.viewer = new Cesium.Viewer(“cesiumContainer”)
    let redBox = {
    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
    }
    }
    this.viewer.entities.add(redBox);
    this.viewer.zoomTo(this.viewer.entities);
    }

发表评论

电子邮件地址不会被公开。 必填项已用*标注