标签: cesium

所以,我正在使用铯,我想添加一个多边形或线来表示地形表面上的属性边界.

我的多边形在平面/椭圆体表面上工作正常,但不幸的是,当显示地形图层时,多边形不会自动覆盖表面.

很公平,我实际上没有z/height值 - 所以我使用sampleTerrain.js promise方法根据地形插入高度值.这部分工作正常,我得到我的身高值.但那又怎样？

我尝试用我的高度位置创建一个多边形实体,但无济于事 - 它只是忽略了高度值.当我阅读文档时,我真的可以看到任何对摄取高度值的引用 - 所有"位置"数组都是二维的？

对要考虑的高度值的唯一引用是在PolygonOutlineGeometry中,它具有一个看起来很有前途的属性perPositionHeight.

这基本上就是我想要的 - 我不想设置整个poly的高度,我想要使用每个点的高度值.

这是我不成功的尝试之一:

实体/多边形:

var entity = viewer.entities.add({
    polygon : {
        hierarchy : cartesianPositions, //array of positions with z values
        outline : true,
        outlineColor : Cesium.Color.RED,
        outlineWidth : 9,
        material : Cesium.Color.BLUE.withAlpha(0.0),
   }
});

底线:我只想要一个多边形或折线实体,它可以很好地放置在地形表面上.

编辑:

在接受的答案的注释中结合使用了Orange Polygon示例并结合了sampleTerrain.js,我已经能够模拟将多边形"悬垂"到地形上,并且列出了没有z值的位置,这是一个粗略的例子:

var positions = []; // xy position array    

var cesiumTerrainProvider = new Cesium.CesiumTerrainProvider({
    url : '//assets.agi.com/stk-terrain/world'
}); …

重要说明 在正常项目中实例化Cesium对象时,它没有任何以下划线为前缀的属性(_dataSourceCollection,_dataSourceDisplay等).但是,在Drupal中实例化时,除了常用属性外,还在对象上设置了大约40-45个属性(所有属性都带有下划线).这发生在Drupal 7或8中,虽然我不确定这是否与我遇到的问题有关,但这是一个明显的差异因此我认为它应该被分享.

我已将Cesium库添加到Drupal项目中,方法是将文件放在sites/all/libraries/cesium/Cesium.js以及Assets和Widgets文件夹中,然后在自定义模块中调用hook_library_info

function cesium_library_info() {
  $libraries['cesium'] = array(
    'files' => array(
      'js' => 'Cesium.js',
    ),
    'path' => 'js',
    'library path' => libraries_get_path('cesium'),
    'version' => '1'
  );
  return $libraries;
}

然后我使用hook_menu返回以下页面回调:

function cesium_page()  {
  drupal_add_js(libraries_get_path('cesium') . '/Cesium.js');
  drupal_add_js(drupal_get_path('module', 'cesium') . '/js/mCesium.js');
  drupal_add_css(libraries_get_path('cesium') . '/Widgets/widgets.css');

  $page = array();

  $page['ces-container'] = array(
    '#prefix' => '<div id="myApp-cesium">',
    '#suffix' => '</div>',
    '#markup' => '<h1>Welcome to Cesium!',
  );
  return $page;
}

mCesium.js包含从Drupal.behaviors中调用Cesium的代码,用于将Viewer附加到我的#myApp-cesium元素.

Drupal.behaviors.cesium = {
  attach: function (context, settings) {

    var viewer = new …

我需要为跟踪实体获得前视图,该视图将根据实体移动而变化.

当我为viewer.trackedEntity属性赋值时,相机会占据一定的位置.是否可以更改此位置以使摄像机直接位于跟踪实体的前方？

我怎么能为这个例子做这个？

var viewer = new Cesium.Viewer('cesiumContainer', {
    infoBox: false, 
    selectionIndicator: false,
    shouldAnimate: true, 
    terrainProvider: Cesium.createWorldTerrain()
});

var start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
var stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());

viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
viewer.clock.multiplier = 10;

viewer.timeline.zoomTo(start, stop);

var position = new Cesium.SampledPositionProperty();
position.addSample(start, Cesium.Cartesian3.fromDegrees(-118.243683, 34.052235, 500000));
position.addSample(Cesium.JulianDate.addSeconds(start, 250, new Cesium.JulianDate()), Cesium.Cartesian3.fromDegrees(-110, 35.5, 500000));
position.addSample(Cesium.JulianDate.addSeconds(start, 500, new Cesium.JulianDate()), Cesium.Cartesian3.fromDegrees(-86.134903, 40.267193, 500000));

var entity = viewer.entities.add({
    availability …

我目前正在研究使用Cesium作为个人项目数据可视化的方式,实时更新将是一件很棒的事情.

阅读wiki,我发现本节概述了如何使用HTML EventSource API完成动态更新Cesium中的对象.

我在Node.js中编写了一个相当简单的服务器,它创建了text/event-stream一个定期发送对象位置更新的服务器.这部分工作正常,我可以成功连接并将此数据记录到控制台.

我的问题在于铯.我花了几个小时挖掘文档(Github wiki和下载中包含的JSDoc文档),我无法弄清楚如何将我的CZML添加到全球.使用随源代码提供的Cesium Viewer应用程序,我可以看到如何从本地和远程资源加载CZML文件,但我无法弄清楚如何修改这种方法来摄取来自EventSource事件的CZML数据包.

我的CZML数据包示例:

{
  'id': 'myObject',
  'availability': '2014-01-15T00:00Z/2014-01-01T24:00Z',
  'point': {
    'color': {
      'rgba': [255, 255, 0, 255]
    },
    'outlineWidth': 2.0,
    'pixelSize': 3.0,
    'show': true
  },
  'position': {
    'cartesian': [0.0, -2957000.0, -840000.0, 5581000.0],
    'epoch': '2014-01-01T00:00Z',
    'interpolationAlgorithm': 'LINEAR',
    'interpolationDegree': 1
  }
}

我目前的做法如下:

var czmlStream;
var czmlStreamUrl = 'http://127.0.0.1:8080/czml-stream';

viewer.dataSources.add(czmlStream);

var czmlEventSource = new EventSource(czmlStreamUrl);
czmlEventSource.addEventListener('czml', function(czmlUpdate) {
  czmlStream.load(JSON.parse(czmlUpdate.data));
}, false);

不幸的是,这不起作用.我基于如何加载静态CZML文件:

var source;
var sourceURL = 'http://127.0.0.1/czml-static.czml';

source.loadUrl(sourceURL).then(function() {
  viewer.dataSources.add(source);
} …

我想初始化cesium,以便地图以某些特定坐标为中心而不是默认坐标.我有以下初始化代码:

var map = new Cesium.CesiumWidget('map-js');
map.centralBody.terrainProvider = new Cesium.CesiumTerrainProvider({
    url : 'http://cesiumjs.org/smallterrain'
});

通常,使用其他映射库,我会在初始化时设置中心,例如在mapbox上:

map = L.mapbox.map('map-js', 'api-key').setView([42.12, 12.45], 9);

如何用铯做到这一点？

我想从Cesium中显示KML.

源kml可以读取我正在寻找下面的Github. https://github.com/AnalyticalGraphicsInc/cesium/tree/kml

建立并运行Cesium.

但是,我不知道.如何在kml中指定.

以下内容应该写什么？

 var viewer = new Cesium.Viewer('cesiumContainer');

我有兴趣使用Cesium来构建带有自定义磁贴的3D地球,但是根据这里的"入门"说明,似乎你必须下载一个巨大的30mb目录并在你的项目中包含整个东西才能拥有它运行正常.这是真的？我可以不只是包含Cesium.js并像这样运行吗？我不需要它们包含80%的UI元素.

在"入门"教程结束时,它们似乎表明您需要运行的所有内容都是这些位:

<script src="Cesium/Cesium.js"></script>

@import url(Cesium/Widgets/widgets.css);

<div id="cesiumContainer"></div>

var viewer = new Cesium.CesiumViewer('cesiumContainer');

但是当我设置这些位时,我得到这个错误:"未定义定义"和"未定义铯".

运行Cesium最轻的方法是什么？

想要模仿CesiumJS应用程序中的左右箭头键,类似于Google Earth导航.按向右或向左箭头键应分别向右或向左旋转地球约5%的视图边界.如果缩小则它在很大程度上旋转并且放大旋转的程度较小.

已经查看了Viewer,Camera,Scene等的文档,但是如何做一些应该简单的事情并不明显.

能够向右或向左旋转固定量但是想要根据视图范围中的宽度旋转量.如何获得铯中视图的顶部,左侧,右侧,底部的最大范围？

var viewer = new Cesium.Viewer('cesiumContainer', {
  navigationHelpButton: false, animation: false, timeline: false
});
var camera = viewer.camera;
document.addEventListener('keydown', function(e) {
    setKey(e);
}, false);

function setKey(event) {  
 if (event.keyCode == 39) {  // right arrow 
  camera.rotateRight(Cesium.Math.toRadians(10.0));
 } else if (event.keyCode == 37) {  // left arrow
  camera.rotateLeft(Cesium.Math.toRadians(10.0));
 }
}

要进行测试,请访问SandCastle应用并粘贴上面的javascript代码段.要激活键盘绑定,请单击全屏模式,箭头键将起作用.

或者,摄像机可用于访问positionCartographic,但这只是摄像机的制图位置,而不是视图边界.

  var positionCartographic = camera.positionCartographic;
  var height = positionCartographic.height;
  var lat = positionCartographic.latitude;              
  var lon = positionCartographic.longitude + Cesium.Math.toRadians(10.0);    
  camera.flyTo({
    destination: …

我想为cesium app设置默认视图/ home位置.

我不只是想飞到这个位置一次; 我希望将位置设置为默认/ home - 以便可以在应用程序的其他位置使用 - 例如在HomeButton Widget中.

我试过这样设置Camera.DEFAULT_VIEW_RECTANGLE (这里的文档):

var extent = Cesium.Rectangle.fromDegrees(117.940573,-29.808406,118.313421,-29.468825);

viewer.camera.DEFAULT_VIEW_RECTANGLE = extent;

但它不起作用..

为了完整性,这是我正在初始化应用程序的方式:

var viewer = new Cesium.Viewer('cesiumContainer', {
        terrainProvider : new Cesium.CesiumTerrainProvider({
            url : '//cesiumjs.org/stk-terrain/tilesets/world/tiles'
        }),
        mapProjection : new Cesium.WebMercatorProjection(),
        timeline: false,
        animation: false,
});

有什么建议？如果需要任何进一步的信息,请告诉我.

我需要知道Cesium Map的当前中心是什么.

我尝试使用,viewer.camera.position但它总是给出相同的z值(x:16921255.101297915,y:5578093.302269477,z:12756274),我不确定x和y值.它们是米吗？

非常感谢!

编辑:解决方案

在我得到的所有帮助下(谢谢!)我把它放在一起:

getPosition(){
    if (viewer.scene.mode == 3) {
        var windowPosition = new Cesium.Cartesian2(viewer.container.clientWidth / 2, viewer.container.clientHeight / 2);
        var pickRay = viewer.scene.camera.getPickRay(windowPosition);
        var pickPosition = viewer.scene.globe.pick(pickRay, viewer.scene);
        var pickPositionCartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(pickPosition);
        console.log(pickPositionCartographic.longitude * (180 / Math.PI));
        console.log(pickPositionCartographic.latitude * (180 / Math.PI));
    } else if (viewer.scene.mode == 2) {
        var camPos = viewer.camera.positionCartographic;
        console.log(camPos.longitude * (180 / Math.PI));
        console.log(camPos.latitude * (180 / Math.PI));
    }
};

此函数以度为单位给出经度/纬度坐标.