通过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 example – Reference Build/Documentation | |
Circles and Ellipses | entity.ellipse – Code example – Reference Build/Documentation | |
Corridor | entity.corridor – Code example – Reference Build/Documentation | |
Cylinder and Cones | entity.cylinder – Code example – Reference Build/Documentation | |
Polygons | entity.polygon – Code example – Reference Build/Documentation | |
Polylines | entity.polyline – Code example – Reference Build/Documentation | |
Polyline Volumes | entity.polylineVolume – Code example – Reference Build/Documentation | |
Rectangles | entity.rectangle – Code example – Reference Build/Documentation | |
Spheres and Ellipsoids | entity.ellipsoid – Code example – Reference Build/Documentation | |
Walls | entity.wall – Code example – Reference Build/Documentation |
我在viewer前加上key 出现这样的报错 Uncaught TypeError: Cannot set property ‘defaultAccessToken’ of undefined
需要申请token,网址http://cesium.com/ion/tokens,不谢
我申请了,但是这个错误还在
可以试着检查你的Cesium版本,这个设置需要你的Cesium版本在1.6以上。
琢磨了一下,发现形状的坐标是以中心点为基准。
也就是说当z轴坐标为形状高度的一半时,形状是刚好在地面上的,例如这样:
position:Cesium.Cartesian3.fromDegrees(-107.0,40.0,200000.0),
dimensions:new Cesium.Cartesian3(400000.0,300000.0,400000.0),
所以我要是设置距离地面1000米,但是box高度是2000米的话,那看着效果就不对了?
有毒,给的例子代码都无法运行
发布了没有?具体表现是什么?
我这边可以运行站主的代码,用的是http-server发布
请问为什么THREEJS写的html文件可以直接用浏览器打开,而Cesium工程必须要用服务器发布后才能打开呢
使用了worker
czml的数据模型加载之后,如何删除?麻烦博主给提供一下API方法。感谢
viewer.dataSources.removeAll(); viewer.dataSources.remove();
我用的是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);
}