cesium 漫游

 

 token记得换成您自己的！！！ 

申请cesium的token 官网【Cesium: The Platform for 3D Geospatial】

 

<template>
  <div id="cesiumContatiner">
    <!-- <div id="mapContainer1"></div> -->
  </div>
  
</template>
<!-- 绘制面并且编辑 -->
<script setup lang="ts">
import * as Cesium from 'cesium';
import { ref, watch, reactive, toRefs, onMounted } from 'vue';
import * as turf from '@turf/turf';
  // 地图实例
let viewer: any;

onMounted(() => {
  // 设置cesium token
  Cesium.Ion.defaultAccessToken =
    '填写您自己的token';

  viewer = GetCesiumViewer('cesiumContatiner');
 
  GetMotionLine()
});

function GetCesiumViewer(cesiumContatiner: string) {
  // // 创建自定义图层
  const esri = new Cesium.ArcGisMapServerImageryProvider({
    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
    // enablePickFeatures: false,
  });

  // 【控件】
  viewer = new Cesium.Viewer(cesiumContatiner, {
    timeline: false, // 时间轴
    animation: false, // 动画小组件
    geocoder: false, // 地理编码（搜索）组件
    homeButton: false, // 首页，点击之后将视图跳转到默认视角
    sceneModePicker: false, // 投影方式，切换2D、3D 和 Columbus View (CV) 模式。
    baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
    navigationHelpButton: false, // 帮助按钮
    fullscreenButton: false, // 全屏按钮

    // vrButton: false, // VR模式
    selectionIndicator: false, //是否显示选取指示器组件
    // shouldAnimate: true, // 自动播放动画控件
    // shadows: true, // 是否显示光照投射的阴影
    // terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY, // 地质接收阴影`
    infoBox: false, // 信息框
    //
    terrainProvider:
       new Cesium.CesiumTerrainProvider({
            url: 'http://data.marsgis.cn/terrain',
          })
         ,
    imageryProvider: esri , //自定义图层，默认是谷歌的影响图层
    scene3DOnly: true, // 每个几何实例将只能以3D渲染以节省GPU内存
    sceneMode: 3, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
  });

  // 隐藏logo
  viewer._cesiumWidget._creditContainer.style.display = 'none';

  let destination = Cesium.Cartesian3.fromDegrees(116.3974, 39.9087, 1000); // 北京天安门广场的经纬度坐标及高度
  // 116.3974, 39.9087
  // viewer.camera.flyTo({
  //   destination: destination,
  //   duration: 2, // 飞行动画持续时间（单位：秒）
  // });

 
  return viewer;
}

 function GetMotionLine(){
   
 viewer.clock.shouldAnimate = true;

const startLatitude =  39.9087;
const startLongitude = 116.3974;
let endLongitude;
const startTime = Cesium.JulianDate.now();

//将多段线添加到场景中。位置是动态的。
const isConstant = false;
const redLine = viewer.entities.add({
  polyline: {
    //此回调将更新每帧的位置。
    positions: new Cesium.CallbackProperty(function (time, result) {
      endLongitude =
        startLongitude +
        0.005 * Cesium.JulianDate.secondsDifference(time, startTime);
      return Cesium.Cartesian3.fromDegreesArray(
        [startLongitude, startLatitude, endLongitude, startLatitude],
        Cesium.Ellipsoid.WGS84,
        result
      );
    }, isConstant),
    width: 10,
    // material: Cesium.Color.RED,
    material: new Cesium.PolylineArrowMaterialProperty(
        Cesium.Color.fromCssColorString('#FF0000') //transparent
      ),
   // 是否贴地显示
   clampToGround: true,
  },
  
});
 
let destination = Cesium.Cartesian3.fromDegrees(116.3974, 39.9087, 10000); // 北京天安门广场的经纬度坐标及高度
  116.3974, 39.9087
  viewer.camera.flyTo({
    destination: destination,
    duration: 2, // 飞行动画持续时间（单位：秒）
  });
const startCartographic = Cesium.Cartographic.fromDegrees(
  startLongitude,
  startLatitude
);

// 使用scrath对象来避免每帧都创建新的对象。
let endCartographic = new Cesium.Cartographic();
const scratch = new Cesium.Cartographic();
const geodesic = new Cesium.EllipsoidGeodesic();

// 计算直线的长度
function getLength(time, result) {
  // 从polyLine的回调中获取结束位置。
  const endPoint = redLine.polyline.positions.getValue(time, result)[1];
  endCartographic = Cesium.Cartographic.fromCartesian(endPoint);

  geodesic.setEndPoints(startCartographic, endCartographic);
  const lengthInMeters = Math.round(geodesic.surfaceDistance);
  return `${(lengthInMeters / 1000).toFixed(1)} km`;
}

function getMidpoint(time, result) {
  //从polyLine的回调中获取结束位置。
  const endPoint = redLine.polyline.positions.getValue(time, result)[1];
  endCartographic = Cesium.Cartographic.fromCartesian(endPoint);

  geodesic.setEndPoints(startCartographic, endCartographic);
  const midpointCartographic = geodesic.interpolateUsingFraction(
    0.8,
    scratch
  );
  return Cesium.Cartesian3.fromRadians(
    midpointCartographic.longitude,
    midpointCartographic.latitude
  );
}
 
//用计算的长度标记多段线
const label = viewer.entities.add({
  position: new Cesium.CallbackProperty(getMidpoint, isConstant),
  label: {
    //此回调将更新打印每帧的长度。
    text: new Cesium.CallbackProperty(getLength, isConstant),//function(){ return ''}
    font: "20px sans-serif",
    pixelOffset: new Cesium.Cartesian2(0.0, 20),
  },
});


//保持视图居中。
viewer.trackedEntity = label;
 
 }


</script>

<style scoped lang="scss">
.container {
  display: flex;
   width: 100%;
   height: 100%;
  justify-content: space-between;
   flex-wrap: wrap;
 } 
 

/* #mapContainer1 {
  width: 50%;
  position: absolute;
  padding: 0;
  margin: 0;
  height: 100%;
}

#mapContainer2 {
  width: 50%;
  left: 50%;
  position: absolute;
  padding: 0;
  margin: 0;
  height: 100%;
} */

/* /deep/.cesium-widget{
  height: 911px
}
  */
</style>