銫現場更新一個點？

我目前正在爲Cesium開發一個實時跟蹤應用程序，但當我在瀏覽器中顯示該點時遇到了一些問題。銫現場更新一個點？

到目前爲止，我的Cesium查看器從服務器接收數據（採用JSON格式），並在地圖上正確顯示點，但更新地圖上位置的唯一方法是刷新頁面。請注意，它正在讀取位置的location.json文件每秒都會從服務器更新一個新位置。

現在我想它會這樣做，因爲客戶端代碼沒有「更新」功能來動態更改地圖上的點位置。

那麼讓Cesium不斷更新地圖上的點而不需要用戶不斷刷新頁面的最簡單方法是什麼？根據我的研究，我發現了一些涉及流式傳輸CZML文件或將JSON變成數據源的例子，但這些看起來似乎有點複雜，似乎是一項簡單的任務。是否沒有一個簡單的「更新」功能可以動態改變點？

這裏是我的客戶端代碼：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <!-- Use correct character set. --> 
    <meta charset="utf-8"> 
    <!-- Tell IE to use the latest, best version (or Chrome Frame if pre-IE11). --> 
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> 
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. --> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 
    <title>Hello World!</title> 
    <script src="../Build/Cesium/Cesium.js"></script> 
    <style> 
     @import url(../Build/Cesium/Widgets/widgets.css); 
     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'); 

     Cesium.loadJson('/location.json').then(function(data) { 
      console.log(data); 
      viewer.entities.add({ 
       name : data.name, 
       position : Cesium.Cartesian3.fromDegrees(data.lon, data.lat), 
       point : { 
        pixelSize : 5, 
        color : Cesium.Color.RED, 
        outlineColor : Cesium.Color.WHITE, 
        outlineWidth : 2 
       }, 
       label : { 
        text : data.name, 
        font : '14pt monospace', 
        style: Cesium.LabelStyle.FILL_AND_OUTLINE, 
        outlineWidth : 2, 
        verticalOrigin : Cesium.VerticalOrigin.BOTTOM, 
        pixelOffset : new Cesium.Cartesian2(0, -9) 
       } 
      }); 

      viewer.zoomTo(viewer.entities); 
     }); 
</script> 
</body> 
</html>

如果你需要從我的任何信息，我會很樂意提供。

謝謝！

來源

2015-11-02 SirFerret

您需要保留對每個這些點的引用，然後根據某個唯一的ID更新該元素的位置。如果一個名稱是唯一的，那麼你可以使用它，否則你需要實現一些方法來識別更新後的每個點。您可以通過調用var currentPoint = viewer.entities.getById(data.id)來檢查該點是否是新的點或loadJSON回調函數中的現有點。然後你可以選擇你要撥打哪一個功能。首先一個新的點（在當前點==未定義）：

function addNewPoint(
var point = new Cesium.Entity(
{ 
       id : data.id, 
       name : data.name, 
       position : Cesium.Cartesian3.fromDegrees(data.lon, data.lat), 
       point : { 
        pixelSize : 5, 
        color : Cesium.Color.RED, 
        outlineColor : Cesium.Color.WHITE, 
        outlineWidth : 2 
       }, 
       label : { 
        text : data.name, 
        font : '14pt monospace', 
        style: Cesium.LabelStyle.FILL_AND_OUTLINE, 
        outlineWidth : 2, 
        verticalOrigin : Cesium.VerticalOrigin.BOTTOM, 
        pixelOffset : new Cesium.Cartesian2(0, -9) 
       } 
      } 
     ); 

      viewer.entities.add(point); 
);

否則你打電話updatePoint功能，將只更新位置

function updatePosition(currentPoint, data) 
{ 
    var newPos = new Cesium.Cartesian3.fromDegrees(data.lon, data.lat); 
    currentPoint.position = newPos; 
}

來源

2015-11-02 15:22:51

因爲它似乎你只有一個指向跟蹤然後調用首次加載JSON時添加newPoint，後續加載updatePosition。然後，您可以定期或根據某個適合您的用戶操作調用此功能。 –

很好用，稍微調整一下它的工作方式吧！謝謝！ – SirFerret

銫現場更新一個點？

回答

相關問題