cesium trackedEntity示例

最新推荐文章于 2024-03-26 13:50:08 发布

黄金之剑

最新推荐文章于 2024-03-26 13:50:08 发布

阅读量3.3k

点赞数 3

分类专栏： CESIUM 文章标签： gis

本文链接：https://blog.csdn.net/henryluohan/article/details/104280532

版权

CESIUM 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 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>
<style>
   @import url(Build/Cesium/Widgets/widgets.css);
    html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
    .cesium-viewer-bottom,.cesium-viewer-toolbar,.cesium-viewer-animationContainer,.cesium-viewer-timelineContainer,.cesium-viewer-fullscreenContainer,.cesium-button.cesium-fullscreenButton{
    /*display:none;*/
    }
    .box{
    display:none;
    width: 70px;
    height: 100px;
    position: absolute;
    background-color: rgba(255,255,255,.2);
    z-index: 1;
    }
    .box .boxinner{
    width: 200%;
    height: 200%;
    transform:scale(.5);
    transform-origin:left top;
    }
    .box .value{
    text-shadow:0 0 2px rgba(255,255,255,.5);
    font-weight:bolder;
    font-family:fantasy;
    font-size:80px;
    text-align:center;
    height:80px;
    line-height:80px;
    }
    .box .title{
    text-shadow:0 0 2px rgba(255,255,255,.5);
    font-weight:bolder;
    font-family:fantasy;
    font-size:30px;
    height:80px;
    line-height:80px;
    }
    .box .bottom{
    height: 20px;
    background-color: yellow;
    position: absolute;
    bottom: 0;
    width: 100%;
    }
    .plane{
    position: absolute;
    z-index: 1;
    top: 200px;
    left: 0;
    }
</style>
<script src="Build/Cesium/Cesium.js"></script>
</head>
<body>
  <div id="cesiumContainer" class="fullSize"></div>
  <script>
var points = [
  //京津翼地区
  { lng: 116.4, lat: 39.9, name: "北京", temp: 36, rain: 12, code: 59001, wind: 233, rel: 77, font: "&#xe734;" }, //北京 
  { lng: 117.2, lat: 39.12, name: "天津", temp: 36, rain: 12, code: 59002, wind: 233, rel: 80, font: "&#xe73d;" }, //天津 
  { lng: 115.47, lat: 38.87, name: "保定", temp: 36, rain: 12, code: 59003, wind: 233, rel: 90, font: "&#xe746;" }, //河北 保定 
  { lng: 116.7, lat: 39.52, name: "廊坊", temp: 36, rain: 12, code: 59004, wind: 233, rel: 77, font: "&#xe739;" }, //河北 廊坊 
  { lng: 118.2, lat: 39.63, name: "唐山", temp: 36, rain: 12, code: 59005, wind: 233, rel: 53, font: "&#xe736;" }, //河北 唐山 
  { lng: 114.52, lat: 38.05, name: "石家庄", temp: 36, rain: 12, code: 59006, wind: 233, rel: 77, font: "&#xe735;" }, //河北 石家庄 
  { lng: 114.48, lat: 36.62, name: "邯郸", temp: 36, rain: 12, code: 59007, wind: 233, rel: 77, font: "&#xe73c;" }, //河北 邯郸 
  { lng: 119.6, lat: 39.93, name: "秦皇岛", temp: 36, rain: 12, code: 59008, wind: 233, rel: 77, font: "&#xe735;" }, //河北 秦皇岛 
  { lng: 114.88, lat: 40.82, name: "张家口", temp: 36, rain: 12, code: 59009, wind: 233, rel: 77, font: "&#xe734;" }, //河北 张家口 
  { lng: 117.93, lat: 40.97, name: "承德", temp: 36, rain: 12, code: 59010, wind: 233, rel: 77, font: "&#xe739;" }, //河北 承德 
  { lng: 116.83, lat: 38.3, name: "沧州", temp: 36, rain: 12, code: 59011, wind: 233, rel: 77, font: "&#xe739;" }, //河北 沧州 
  { lng: 114.48, lat: 37.07, name: "邢台", temp: 36, rain: 12, code: 59012, wind: 233, rel: 77, font: "&#xe739;" }, //河北 邢台 
  { lng: 115.68, lat: 37.73, name: "衡水", temp: 36, rain: 12, code: 59013, wind: 233, rel: 77, font: "&#xe739;" } //河北 衡水
]

var start = Cesium.JulianDate.fromDate(new Date(2017, 7, 11));
var stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());
//相机设置
var viewer = new Cesium.Viewer("cesiumContainer", {
    infoBox: false, //Disable InfoBox widget
    selectionIndicator: false, //Disable selection indicator
    shouldAnimate: true, // Enable animations
    imageryProvider : new Cesium.UrlTemplateImageryProvider({
      url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"
    })
  });

  //设置时钟
  viewer.clock.startTime = start.clone();
  viewer.clock.currentTime = start.clone();
  viewer.clock.stopTime = stop.clone();
  viewer.clock.multiplier = 45;
  viewer.timeline.zoomTo(start, stop);
  viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
  // viewer.clock.shouldAnimate = true //开启时间播放

  //设置动态点
  var property = new Cesium.SampledPositionProperty();
  for (var i = 0; i <= 360; i+=30) {
    var radians = Cesium.Math.toRadians(i);
    var time = Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate());
    var position = Cesium.Cartesian3.fromDegrees(117+i, 31, 1000000);
    property.addSample(time, position);

  }
  var entity = viewer.entities.add({
      //设置生效时间
      availability: new Cesium.TimeIntervalCollection([new         
      Cesium.TimeInterval({
          start: start,
          stop: stop
      })]),
      position: property,
      orientation: new Cesium.VelocityOrientationProperty(property),
      model : { // 这里遇到个问题 追踪体只能追踪 model 其他设置 镜头不会追踪
        uri : 'Cesium_Air.glb',
        minimumPixelSize : 64
      },
      path : {
        resolution : 1,
        material : new Cesium.PolylineGlowMaterialProperty({
          glowPower : 0.1,
          color : Cesium.Color.YELLOW
        }),
        width : 10
      }
  });
  //设置插值方式
  entity.position.setInterpolationOptions({
    interpolationDegree : 2,
    interpolationAlgorithm : Cesium.LagrangePolynomialApproximation
  })
  //设置追踪体 
  viewer.trackedEntity = entity
  </script>
  </body>
  </html>

黄金之剑

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
4
评论
cesium trackedEntity示例

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=e...
复制链接

扫一扫