Javascript 铯点的实时更新？_Javascript_Html_Json_Dictionary_Cesium

Javascript 铯点的实时更新？

javascript html json dictionary

Javascript 铯点的实时更新？,javascript,html,json,dictionary,cesium,Javascript,Html,Json,Dictionary,Cesium,我目前正在开发铯的实时跟踪应用程序，但在浏览器中显示该点时遇到了一些问题到目前为止，我的铯查看器从服务器接收数据（JSON格式）并在地图上正确显示点，但让它更新地图上位置的唯一方法是刷新页面。请注意，它从中读取位置的location.json文件每隔一秒左右就会从服务器更新一个新位置现在我想它可以做到这一点，因为客户端代码没有“更新”功能来动态更改地图上的点位置那么，让铯元素不断更新地图上的点，而不让用户不断刷新页面，最简单的方法是什么呢？根据我的研究，我发现了一些涉及CZML文件流或将J

我目前正在开发铯的实时跟踪应用程序，但在浏览器中显示该点时遇到了一些问题

到目前为止，我的铯查看器从服务器接收数据（JSON格式）并在地图上正确显示点，但让它更新地图上位置的唯一方法是刷新页面。请注意，它从中读取位置的location.json文件每隔一秒左右就会从服务器更新一个新位置

现在我想它可以做到这一点，因为客户端代码没有“更新”功能来动态更改地图上的点位置

那么，让铯元素不断更新地图上的点，而不让用户不断刷新页面，最简单的方法是什么呢？根据我的研究，我发现了一些涉及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>


你好，世界！
@导入url（../Build/Cesium/Widgets/Widgets.css）；
html，正文，#cesiumContainer{
宽度：100%；高度：100%；边距：0；填充：0；溢出：隐藏；
}
var查看器=新的铯查看器（“铯容器”）；
celium.loadJson（'/location.json'）。然后（函数（数据）{
控制台日志（数据）；
viewer.entities.add({
name:data.name，
位置：铯.笛卡尔3.fromDegrees（data.lon，data.lat），
要点：{
像素大小：5，
颜色：铯，颜色，红色，
大纲颜色：铯。颜色。白色，
大纲图第1页第2页
},
标签：{
text:data.name，
字体：“14pt单空格”，
样式：铯。标签样式。填充和轮廓，
大纲第1页第2页，
Verticargin:Ce.Verticargin.BOTTOM，
像素偏移：新的铯。笛卡尔氮（0，-9）
}
});
viewer.zoomTo（viewer.entities）；
});

如果您需要我提供更多信息，我很乐意提供

谢谢

您需要保留对每个点的引用，然后根据某个唯一id简单地更新该元素的位置。如果名称是唯一的，则可以使用该名称，否则您需要在更新后实现某种方法来标识每个点。通过调用

var currentPoint=viewer.entities.getById（data.id）

，可以检查该点是loadJSON回调函数中的新点还是现有点。然后您可以选择调用这些函数中的哪一个。新点的第一个（当currentpoint==未定义时）：

否则调用updatePoint函数，只更新位置

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

因为似乎只有一个点需要跟踪，所以在第一次加载JSON时调用addNewPoint，在后续加载时调用updatePosition。然后你可以周期性地调用这个函数，也可以在用户的某个操作上调用它，无论哪个操作适合你。非常好，只需稍微调整一下它的工作方式就可以了！谢谢

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