我是靠谱客的博主 欢喜野狼,最近开发中收集的这篇文章主要介绍vue + cesium 人和车路线全景漫游播放,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

全景漫游核心代码如下:

       处理Cartesian3点的数据集合添加到positionsList中

 trackView(positionsList) {

      if(trackedEntity)  window.viewer.entities.remove(trackedEntity)
      trackedEntity = undefined
      window.viewer.trackedEntity = undefined

      window.viewer.clock.shouldAnimate ? '' : window.viewer.clock.shouldAnimate = true
      //Set bounds of our simulation time
      var start = Cesium.JulianDate.fromDate(new Date());
      var stop = Cesium.JulianDate.addSeconds(
        start,
        positionsList.length - 1,
        new Cesium.JulianDate()
      );

      //Make sure viewer is at the desired time.
      window.viewer.clock.startTime = start.clone();
      window.viewer.clock.stopTime = stop.clone();
      window.viewer.clock.currentTime = start.clone();
      window.viewer.clock.clockRange = Cesium.ClockRange.CLAMPED//CLAMPED:达到终止时间后停止,LOOP_STOP:达到终止时间后重新循环,UNBOUNDED:达到终止时间后继续读秒
      window.viewer.clock.multiplier = this.m_multiplier; // 默认为1

      //Set timeline to simulation bounds
      window.viewer.timeline.zoomTo(start, stop);
      //Generate a random circular pattern with varying heights.
      function computeCirclularFlight() {
        var property = new Cesium.SampledPositionProperty();
        //设置插入选项
        property.setInterpolationOptions({
          interpolationDegree: 2,
          interpolationAlgorithm: Cesium.HermitePolynomialApproximation,
        });
        for (var i = 0; i < positionsList.length; i++) {
          var time = Cesium.JulianDate.addSeconds(
            start,
            i,
            new Cesium.JulianDate()
          );
          property.addSample(time, positionsList[i]);
        }
        return property;
      }
      var position = computeCirclularFlight();

      if(!position) return
      //Actually create the entity
      var entity = window.viewer.entities.add({
        //将实体可用性设置为与模拟时间相同的间隔
        availability: new Cesium.TimeIntervalCollection([
          new Cesium.TimeInterval({
            start: start,
            stop: stop,
          }),
        ]),
        //计算的位置
        position: position,
        //基于位置移动自动计算方向.
        orientation: new Cesium.VelocityOrientationProperty(position),
        model: {
          uri: modelUrl, // glb模型文件路径
          minimumPixelSize: 32,
          scale: this.navType === 0 ? 0.5 : 0.05,
        },
        //将路径显示为以1秒为增量采样的粉红线.
        path: {
          resolution: 1,
          material: new Cesium.PolylineGlowMaterialProperty({
            glowPower: 0.15,
            color: Cesium.Color.FORESTGREEN.withAlpha(0.6),
          }),
          width: 10,
          // distanceDisplayCondition: new window.Cesium.DistanceDisplayCondition (30),
        },
      });
      trackedEntity = entity
      window.viewer.trackedEntity = trackedEntity;
    },

最后

以上就是欢喜野狼为你收集整理的vue + cesium 人和车路线全景漫游播放的全部内容,希望文章能够帮你解决vue + cesium 人和车路线全景漫游播放所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(35)

评论列表共有 0 条评论

立即
投稿
返回
顶部