我看了一下Material Fade,但效果并不好,我不得不试着找到折线的方向.不确定Fade是否适用于折线20点......
有没有更好的方法来改变每个折线点之间的颜色？
或者使用Material Fade的工作示例非常感谢!
PerInstanceColorAppearance听起来像我正在寻找...但我不知道如何在PolylineCollection中为Polyline实现这个...
如何添加到基元的具有多条折线的折线集合如何转化为示例http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Geometry%20and%20Appearances.html
positions = [];
colors = [];
for (i = 0; i < 40; ++i) {
positions.push(ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(-100.0 + i, 9.0)));
colors.push(Cesium.Color.fromRandom({alpha : 1.0}));
}
primitives.add(new Cesium.Primitive({
geometryInstances : new Cesium.GeometryInstance({
geometry : new Cesium.PolylineGeometry({
positions : positions,
width : 10.0,
vertexFormat : Cesium.PolylineColorAppearance.VERTEX_FORMAT,
colors : colors,
colorsPerVertex : true
})
}),
appearance : new Cesium.PolylineColorAppearance()
}));
我还为每条折线添加了一个生命周期属性,以确定何时需要从折线集合中删除它们.我可能每秒都需要添加和删除许多折线,每条折线都有不同的点.
有没有办法获得CesiumJS中给定位置的地面高度？我试过了scene.globe.getHeight func,但它返回undefined.
//marker is a point on map.
var marker = {latitude: 61.08658108795938, longitude: -99.64592791446208};
var height = scene.globe.getHeight( new Cesium.Cartographic(marker.longitude, marker.latitude ) );//undefined
谢谢.
我试图用无头火狐运行Cesium(http://cesiumjs.org/).我也试过slimerjs.在这两种情况下,我使用xvfb,并得到这个:
[azureuser@myvm.net slimerjs-0.9.5]$ ./slimerjs test.js
Script Error: uncaught exception: RuntimeError: The browser supports WebGL, but initialization failed.
RuntimeError@http://myvm.net/Cesium/Cesium.js:11697:19
Context@http://myvm.net/Cesium/Cesium.js:97405:1
Scene@http://myvm.net/Cesium/Cesium.js:122319:23
CesiumWidget@http://myvm.net/Cesium/Cesium.js:132474:25
@http://myvm.net/:254:22
x.Callbacks/l@http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js:4:24877
x.Callbacks/c.fireWith@http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js:4:25702
.ready@http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js:4:2898
S@http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js:4:551
Stack:
-> undefined: 0
我确实在网上看了一下,但没有找到任何满意的答案.有这样的:有没有办法在无头浏览器中运行WebGL webapp的单元测试,但它没有产生很多回复,并且唯一的答案是不被接受的.
我需要setZoom()在 Cesium 中创建一个函数。为此，我相信我需要评估当前的缩放比例，以便我可以决定是否必须使用zoomIn或zoomOut来显示用户要求的内容。
有谁知道在使用 Cesium 时是否可以从地图中获取缩放级别？或任何其他解决方案......非常欢迎任何提示。
该功能是否有效getMagnitude()？
谢谢！
解决方案：
我把 emackey 给我的所有提示放在一起，得到了以下代码：
var iniPos = new Cesium.Cartesian3();
iniPos = this.viewer.camera.position;
var cartographic = new Cesium.Cartographic();
cartographic.height = zoom * 1000;
cartographic.longitude = iniPos.x;
cartographic.latitude = iniPos.y;
var newPos = new Cesium.Cartesian3();
Cesium.Ellipsoid.WGS84.cartographicToCartesian(cartographic, newPos);
this.viewer.camera.setView({
position: newPos
});
这样我就可以将相机的高度定义为用户定义的缩放参数。
我在我的应用程序中使用Cesium.我的应用程序在地图上显示广告牌,并显示收到的位置.
我想知道的区别Cesium.Viewer和Cesium.CesiumWidget.是否可以使用Cesium Widget创建实体？使用有什么好处Cesium.CesiumWidget？它是否给了我相同的功能,Cesium.Viewer但没有所有额外的小部件(如时间轴)？
铯现在在npm.之后npm install cesium-ing到我的项目,所有的代码进入node_modules.
在铯hello世界中,它包括cesium类似的东西<script src="your/path/to/Cesium.js"></script>
我的问题是,为了从html中使用cesium,还需要做些什么？
我在Google网上论坛上看到了一些示例,演示了如何修改信息框的css.在此特定示例中,javascript用于将css链接附加到文档的头部:
https://groups.google.com/forum/#!topic/cesium-dev/f0iODd42PeI
var cssLink = frameDocument.createElement("link");
cssLink.href = buildModuleUrl('Path/To/Your/CSS/File.css');
cssLink.rel = "stylesheet";
cssLink.type = "text/css";
viewer.infoBox.frame.contentDocument.head.appendChild(cssLink);
但是,这并未导致我的标记样式发生任何变化.
充其量,我已经能够通过在加载geoJson数据集之后迭代.then函数调用中的实体来包装信息框的内容.在包装内容时,我可以设置在结果标记中很明显的样式值.
var dataSource = Cesium.GeoJsonDataSource.load('../data/mGeoJson.json').then(function(data) {
viewer.dataSources.add(data);
var entities = data.entities.values;
for (var i = 0; i < entities.length; i++)
var entity = entities[i];
if (entity.properties.hasOwnProperty("description")) {
entity.description = '<div style="height: 360px;">' + entity.properties.description
+ '</div>';
}
}
}
这很有用,但不能完全满足我的应用程序的要求.
有人可以提供额外的洞察力来覆盖信息框的主题,而不必迭代实体来修改其描述属性的值吗？
现在使用下面的 javascript，我得到了鼠标指针上的经纬度值。我怎样才能让它像在谷歌地球中一样出现在铯屏幕的底部。
viewer.entities.add({
id: 'mou',
label: {
// position : Cesium.Cartesian2.ZERO,
show: true;
}
});
viewer.scene.canvas.addEventListener('mousemove', function(e) {
var entity = viewer.entities.getById('mou');
var ellipsoid = viewer.scene.globe.ellipsoid;
// Mouse over the globe to see the cartographic position
var cartesian = viewer.camera.pickEllipsoid(new Cesium.Cartesian3(e.clientX, e.clientY), ellipsoid);
if (cartesian) {
var cartographic = ellipsoid.cartesianToCartographic(cartesian);
var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(10);
var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(10);
entity.position = cartesian;
entity.label.show = true;
entity.label.font_style = 84;
//entity.position= Cesium.Cartesian2.ZERO;
entity.label.text = '(' + longitudeString + ', ' + latitudeString + …我有一个 VueJS 和 Cesium 项目，它在帧速率下降方面存在性能问题。我知道问题出在哪里，但我不知道为什么或如何解决它。
export default {
name: "Map",
components: { ... },
data: function () {
return {
viewer: {}
}
},
methods: { ... },
mounted() {
// 150-200 FPS; but no access to the viewer object outside of this component.
let viewer = new Viewer('cesiumContainer');
// 20-30 FPS; but yields me the access I need for other components to utilize.
this.viewer = new Viewer('cesiumContainer');
... rest of my source code ...
}
我可以将所有需要显示的内容保持在 150-200 FPS 以上，而 …
我正在尝试在 onTick 事件中为时钟设置一个状态。
<Viewer>
<Clock
startTime={start.clone()}
stopTime={stop.clone()}
currentTime={start.clone()}
multiplier={50}
onTick={_.throttle(handleValue, 1000)} // this thing ticks every millisecond
/>
<Entity
ref={ref} // here is the ref to get the value I want to set state with
position={positionProperty}
tracked
selected
model={{ uri: model, minimumPixelSize: 100, maximumScale: 100.0 }}
availability={
new TimeIntervalCollection([
new TimeInterval({ start: start, stop: stop }),
])
}
/>
</Viewer>
这是 handleValue 函数。
const handleValue = (clock) => {
//setting the state here ( I want to display the chaning …