CesiumJs学习笔记4

此为课程Three.js可视化企业实战WEBGL课的CesiumJs篇学习笔记

加载 GEOJSON 数据

json数据 在阿里云 下载

1. 加载初始化

  // 加载geojson数据
  let dataGeo = Cesium.GeoJsonDataSource.load(
    "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",
  );
  
 // 可以直接add这个promise
 // viewer.dataSources.add(dataGeo);
 
  dataGeo.then((dataSources) => {
    console.log(dataSources);
    viewer.dataSources.add(dataSources);
  });

2. 设置边框和内填充色
   

  // 加载geojson数据
  let dataGeo = Cesium.GeoJsonDataSource.load(
    "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",
     {
      stroke: Cesium.Color.RED,
      fill: Cesium.Color.SKYBLUE.withAlpha(0.5),
      strokeWidth: 3
    }
  );
  dataGeo.then((dataSources) => {
    viewer.dataSources.add(dataSources);
  });

3. 获取实体并且改变样式
   

// 加载geojson数据
  let dataGeo = Cesium.GeoJsonDataSource.load(
    "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json",
    {
      stroke: Cesium.Color.RED,
      fill: Cesium.Color.SKYBLUE.withAlpha(0.5),
      strokeWidth: 3
    }
  );

  dataGeo.then((dataSources) => {
    viewer.dataSources.add(dataSources);
    
    let entities = dataSources.entities.values;
    entities.forEach((entity, i) => {
      entity.polygon.material = new Cesium.ColorMaterialProperty(
        Cesium.Color.fromRandom({
          alpha: 0.9,
        })
      );
      entity.polygon.outline = false;
      let randomNum = parseInt(Math.random() * 5);
      entity.polygon.extrudedHeight = 100000 * randomNum;
    });
  });

加载 kml 数据

KML 是为与Google Earth一起使用而开发的, 用于在二维地图和三维地球浏览器中表达地理注释和可视化。

  // 加载kml数据
  let kmlUrl = "./Assets/facilities1.kml";
  let kmlDataPromise = Cesium.KmlDataSource.load(kmlUrl, {
    camera: viewer.scene.camera,
    canvas: viewer.scene.canvas,
    screenOverlayContainer: viewer.container,
  });
  kmlDataPromise.then(function (dataSource) {
    viewer.dataSources.add(dataSource);
  });

加载czml数据

CZML指南

  const czml = [
    {
      id: "document",
      name: "CZML Point - Time Dynamic",
      version: "1.0",
    },
    {
      id: "point",
      // 物体在什么时间范围可用
      availability: "2012-08-04T16:00:00Z/2012-08-04T16:05:00Z",
      position: {
        // 设置物体的起始时间
        epoch: "2012-08-04T16:00:00Z",
        // 设置了四个维度，1维是时间，2维是经度，3维是纬度，4维是高度
        cartographicDegrees: [
          0, -70, 20, 150000, 100, -80, 44, 150000, 200, -90, 18, 150000, 300,
          -98, 52, 150000,
        ],
      },
      point: {
        color: {
          rgba: [255, 255, 255, 128],
        },
        outlineColor: {
          rgba: [255, 0, 0, 128],
        },
        outlineWidth: 3,
        pixelSize: 15,
      },
    },
  ];

  // 加载czml数据
  let promiseData = Cesium.CzmlDataSource.load(czml);
  promiseData.then((dataSource) => {
    console.log(dataSource);
    viewer.dataSources.add(dataSource);
    // viewer.flyTo(dataSource);
  });

追踪飞机跨洋飞行

完整代码

 var viewer = new Cesium.Viewer("cesiumContainer", {
    // 是否显示信息窗口
    infoBox: false,
    terrainProvider: Cesium.createWorldTerrain({
      requestWaterMask: true,
      requestVertexNormals: true,
    }),
    shouldAnimate: true,
  });

  // 隐藏logo
  viewer.cesiumWidget.creditContainer.style.display = "none";
  // 添加3D建筑
  let tiles3d = new Cesium.createOsmBuildings();
  const osmBuildings = viewer.scene.primitives.add(tiles3d);

  const positionProperty = new Cesium.SampledPositionProperty();

  // 时间间隔 30秒
  const timeStepInSeconds = 30;
  // 整个飞行花费的时间
  const totalSeconds = (planeData.length - 1) * timeStepInSeconds;

  // 设置起点时间
  const time = new Date("2022-03-09T23:10:00Z");

  // cesium，默认使用的是儒略日的时间
  // 所以需要起点时间转换成儒略日的时间
  const startJulianDate = Cesium.JulianDate.fromDate(time);
  // 设置终点时间
  const stopJulianDate = Cesium.JulianDate.addSeconds(
    startJulianDate,
    totalSeconds,
    new Cesium.JulianDate()
  );

  // 将查看器的时间调整到起点和结束点的范围
  viewer.clock.startTime = startJulianDate.clone();
  viewer.clock.stopTime = stopJulianDate.clone();
  viewer.clock.currentTime = startJulianDate.clone();
  // console.log(planeData);
  viewer.timeline.zoomTo(startJulianDate, stopJulianDate);

  planeData.forEach((dataPoint, i) => {
    // 当前点的时间
    const time = Cesium.JulianDate.addSeconds(
      startJulianDate,
      i * timeStepInSeconds,
      new Cesium.JulianDate()
    );
    // 设置当前点的位置
    const position = Cesium.Cartesian3.fromDegrees(
      dataPoint.longitude,
      dataPoint.latitude,
      dataPoint.height
    );
    // 添加轨迹采样点
    positionProperty.addSample(time, position);

    // 添加点
    viewer.entities.add({
      position: position,
      point: {
        pixelSize: 10,
        color: Cesium.Color.RED,
        outlineColor: Cesium.Color.WHITE,
        outlineWidth: 2,
      },
    });

    
  });

  // 创建飞机
  const planeEntity = viewer.entities.add({

    availability: new Cesium.TimeIntervalCollection([
      new Cesium.TimeInterval({
        start: startJulianDate,
        stop: stopJulianDate,
      }),
    ]),

    name: "飞机",
    // 设置飞机的可用
    position: positionProperty,
    // VelocityOrientationProperty会自动根据采样点，计算出飞机的速度和方向
    orientation: new Cesium.VelocityOrientationProperty(positionProperty),
    model: {
      uri: "./model/Air.glb",
      minimumPixelSize: 128,
      maximumScale: 20000,
    },
    // 绘制轨迹线
    path: new Cesium.PathGraphics({
      width: 5,
    }),
  });

  // 相机追踪运动的问题
  viewer.trackedEntity = planeEntity;

  // 设置时间速率
  viewer.clock.multiplier = 60;