「Cesium」を利用してGPS経路情報の3D表示

はじめに

「Cesium」を利用してGPS経路情報を表示してみました。
取得した経路情報は、緯度、経度のほかに高さ、時間が設定されています。
まず手始めに、kmlを表示してみました。

kmlの表示

まず最初にkmlを表示しましたが、高さが表示されていませんでした。

ちなみに、baseLayerPickerはベースレイヤの選択可否オプションですが、falseにすると、地形データに隠れている図形データも表示されます。以下はbaseLayerPicker=falseの場合の表示です。

ネットで調べたところ、kmlで高さを表示させるには<altitudeMode>タグが必要とのこと。
<altitudeMode>タグを追加し、表示は確認しましたが、「Cesium」の地形よりも低く、
高さが合いません。「Cesium」の地形の標高はデフォルトを使っているので、精度が悪いように思えます。
そこで、kmlの標高を＋３０ｍにし、無理やり表示させました。

htmlファイル(抜粋)

<html lang="ja">
  <head>
    <title>Hello World!</title>
    <link rel="stylesheet" href="../Build/Cesium/Widgets/widgets.css" />
    <script src="../Build/Cesium/Cesium.js"></script>
  </head>
  <body>
    <div id="cesiumContainer"></div>
    <script>
      var viewer = new Cesium.Viewer("cesiumContainer", {
        terrainProvider: Cesium.createWorldTerrain(),
        baseLayerPicker: true,
      });      
      viewer.dataSources.add(Cesium.KmlDataSource.load('../Datas/191105_load2.kml'));
    </script>
  </body>
</html>

<head>

<title>Hello World!</title>

</head>

<body>

var viewer = new Cesium.Viewer("cesiumContainer", {

terrainProvider: Cesium.createWorldTerrain(),

baseLayerPicker: true,

});

viewer.dataSources.add(Cesium.KmlDataSource.load('../Datas/191105_load2.kml'));

</script>

</body>

</html>

kmlファイル(抜粋)

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<Document>
    <name>191105重信踏査</name>
    <Placemark>
        <TimeSpan>
            <begin>2019-11-05T01:27:14.002Z</begin>
            <end>2019-11-05T07:41:13.998Z</end>
        </TimeSpan>
        <LineString>
            <coordinates>
                132.947655,33.834034,393
                132.947566,33.834045,387 
                …
            </coordinates>
            <altitudeMode>absolute</altitudeMode>
        </LineString>
        <Style> 
           <LineStyle>  
              <color>#ff0000ff</color>
              <width>5</width>
           </LineStyle> 
        </Style>
    </Placemark>
</Document>
</kml>

<?xml version="1.0" encoding="UTF-8"?>

</TimeSpan>

132.947655,33.834034,393

132.947566,33.834045,387

…

</coordinates>

<altitudeMode>absolute</altitudeMode>

</LineString>

<Style>

</LineStyle>

</Style>

</Placemark>

</Document>

</kml>

czmlの表示

次に、時間情報を追加したczmlを作成し、表示させました。
czmlは、Cesiumでの空間データの表現に適したデータ形式で、様々な地図表現が可能になります。

今回は、Cesiumのデモサイトを参考に、経過時間で、座標を移動させるように表示しました。trackedEntityを設定することにより、常に車の中心にカメラが向くようにしています。

htmlファイル(抜粋)

<!DOCTYPE html>
<html lang="ja">
  <head>
    <link rel="stylesheet" href="../Build/Cesium/Widgets/widgets.css" />
    <script src="../Build/Cesium/Cesium.js"></script>
    <style>
      html,
      body,
      #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="cesiumContainer"></div>
    <script>
      var viewer = new Cesium.Viewer("cesiumContainer", {
        terrainProvider: Cesium.createWorldTerrain(),
        baseLayerPicker: true,
        shouldAnimate: true,
      });      
      
      viewer.dataSources
          .add(Cesium.CzmlDataSource.load('../Datas/191105_load3.czml'))
          .then(function (ds) {
            var entity = ds.entities.getById("path");
            viewer.trackedEntity = entity;
      });
      
      viewer.dataSources.add(Cesium.KmlDataSource.load('../Datas/191105_load2.kml'));
    </script>
  </body>
</html>

<!DOCTYPE html>

<head>

<style>

html,

body,

#cesiumContainer {

width: 100%;

height: 100%;

margin: 0;

padding: 0;

overflow: hidden;

}

</style>

</head>

<body>

var viewer = new Cesium.Viewer("cesiumContainer", {

terrainProvider: Cesium.createWorldTerrain(),

baseLayerPicker: true,

shouldAnimate: true,

});

viewer.dataSources

.add(Cesium.CzmlDataSource.load('../Datas/191105_load3.czml'))

.then(function (ds) {

var entity = ds.entities.getById("path");

viewer.trackedEntity = entity;

});

viewer.dataSources.add(Cesium.KmlDataSource.load('../Datas/191105_load2.kml'));

</script>

</body>

</html>

czmlファイル(抜粋)

[{
    "id":"document", 
    "name":"line",
    "version":"1.0",
    "clock": {
        "interval":"2019-11-05T01:27:14.002Z/2019-11-05T07:41:13.998Z",
        "currentTime":"2019-11-05T01:27:14.002Z",
         "multiplier": 1
    }
},{
    "id":"path", 
    "name":"line", 
    "description":"ライン", 
    "availability":"2019-11-05T01:27:14.002Z/2019-11-05T07:41:13.998Z",
    "path": {
        "material": { 
            "polylineOutline": { 
                "color": { 
                    "rgba": [255, 0, 255, 0]
                },
                "outlineWidth": 5
            }
        },
        "width": 8,
        "leadTime": 1,
        "trailTime": 100,
        "resolution": 5
    },
    "model": {
      "gltf": "./CesiumMilkTruck.glb"
    },
    "position": {
        "epoch":"2019-11-05T01:27:14.002Z",
        "cartographicDegrees": [
                0,132.947655,33.834034,423,
                38,132.947566,33.834045,417,
                …
        ]
    }
}]