如何在 Cesiumjs 中设置 KML 相机的视图？

Question

我有一个指定相机的简单 KML 文件。

如何让Cesium加载KML然后飞到指定的相机视图？此外，KML 将定期更新，那么我如何让数据源更新并让 Cesium 定期飞到新视图？

我在本地网络服务器上安装了 Cesium 运行，因此它可以从本地文件系统读取 KML，而且我知道相机必须从 Google 的坐标系旋转到铯'.

这是 KML 文件：

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
    <Camera>
        <altitudeMode>absolute</altitudeMode>
        <longitude>-80.215317</longitude>
        <latitude>26.843521</latitude>
        <altitude>306.388825</altitude>
        <heading>48.980423</heading>
        <roll>0.062101</roll>
        <tilt>75.090492</tilt>
    </Camera>
</Document>
</kml>

到目前为止，这是我的代码：

<script>

    var My_Altitude;
    var My_Heading;
    var My_Latitude;
    var My_Longitude;
    var My_Roll;
    var My_Tilt;
    var Update_Interval = 60;

    var viewer = new Cesium.Viewer('cesiumContainer');
    var options = {
        camera : viewer.scene.camera,
        canvas : viewer.scene.canvas
    };

    viewer.dataSources.add(Cesium.KmlDataSource.load('./My_Camera.kml', options)).then(function(dataSource){

        My_Altitude = dataSource.entities.getById('altitude');
        My_Heading = dataSource.entities.getById('heading');
        My_Latitude = dataSource.entities.getById('latitude');
        My_Longitude = dataSource.entities.getById('longitude');
        My_Roll = dataSource.entities.getById('roll');
        My_Tilt = dataSource.entities.getById('tilt');

        viewer.camera.flyTo({
            destination : Cesium.Cartesian3.fromDegrees( My_Longitude, My_Latitude, My_Altitude ),
            orientation : {
                heading : Cesium.Math.toRadians( My_Heading ),
                pitch   : Cesium.Math.toRadians( My_Tilt - 90.0 ),
                roll    : Cesium.Math.toRadians( My_Roll )
            },
            duration : Update_Interval
        });
    });

</script>

非常感谢任何帮助。

:-)

Answer 1

无法访问 KmlDataSource 中的 KML Camera 元素，因为 Camera/LookAt 元素在 Cesium 中尚不支持且不存在。（参见 issue 873）。如果您在 Web console/debugger 中查看数据源的对象，您将看到实体数组的长度为 0。

My_Tilt = dataSource.entities.getById('tilt'); // returns undefined

您需要获取 KML 内容并手动解析 Camera 元素。

var x = new XMLHttpRequest();
x.open("GET", "./My_Camera.kml", true);                
x.onreadystatechange = function () {
  if (x.readyState == 4 && x.status == 200)
  {
     var xmlDoc = x.responseXML;
     var camera = xmlDoc.getElementsByTagName("Camera")[0];
     var My_Tilt = camera.getElementsByTagName("tilt")[0].childNodes[0].nodeValue;
     // ...
  }
};
x.send();

将 tilt - 90 转换为 pitch 是正确的，但是，您需要反转 roll 的符号才能将 Google Earth 转换为 Cesium 的表示形式。

这是更新后的 flyTo 代码：

 viewer.camera.flyTo({
            destination : Cesium.Cartesian3.fromDegrees( My_Longitude, My_Latitude, My_Altitude ),
            orientation : {
                heading : Cesium.Math.toRadians( My_Heading ),
                pitch   : Cesium.Math.toRadians( My_Tilt - 90.0 ),
                roll    : -Cesium.Math.toRadians( My_Roll )
            },

如果您想按时间间隔更新 KML，则可以在 javascript 中创建一个计时器并在计时器操作中重新解析 KML。

如何在 Cesiumjs 中设置 KML 相机的视图？

How do I set the view from a KML camera in Cesiumjs?

datasource

kml

cesium