【可视化学习】39-cesium基础学习(四)
发表于：2023-09-07 |

前言

本文继续讲解cesium的基础使用

GEOJSON数据展示和样式和修改

获取json数据

我们进入网站http://datav.aliyun.com/portal/school/atlas/area_selector
网站获取数据

加载数据

1
2
3
4
5
6
7
8
9
// 加载geojson数据
 let dataGeo = Cesium.GeoJsonDataSource.load(
   "https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json"
 );
 // 添加到view中
 dataGeo.then((dataSources) => {
   console.log(dataSources);
   viewer.dataSources.add(dataSources);
 });

数据加载

修改样式

1
2
3
4
5
6
7
8
9
10
11
12
13
// 加载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: 4,
   }
 );
 dataGeo.then((dataSources) => {
   viewer.dataSources.add(dataSources);
   let entities = dataSources.entities.values;
 });

样式修改

样式进一步修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dataGeo.then((dataSources) => {
    console.log(dataSources);
    viewer.dataSources.add(dataSources);
    let entities = dataSources.entities.values;
    entities.forEach((entity, i) => {
      entity.polygon.material = new Cesium.ColorMaterialProperty(
        Cesium.Color.fromRandom({
          alpha: 1,
        })
      );
      entity.polygon.outline = false;
      let randomNum = parseInt(Math.random() * 5);
      entity.polygon.extrudedHeight = 100000 * randomNum;
    });
  });

样式进一步修改

KML数据加载

kml本质上是一个xml格式,如图所示
kml数据

1
2
3
4
5
6
7
8
9
10
11
12
// 加载kml数据
  let kmlUrl = "./Assets/facilities1.kml";
  let kmlDataPromise = Cesium.KmlDataSource.load(kmlUrl, {
    camera: viewer.scene.camera,
    canvas: viewer.scene.canvas,
    screenOverlayContainer: viewer.container,
  });
  console.log(kmlDataPromise);
  kmlDataPromise.then(function (dataSource) {
    console.log(dataSource);
    viewer.dataSources.add(dataSource);
  });

全球科研场所分布图

KMZ数据加载

kmz就是kml的压缩包，可以直接加载

1
2
3
4
5
6
7
8
// 加载kmz数据
  let kmzUrl = "./Assets/gdpPerCapita2008.kmz";
  let kmzDataPromise = Cesium.KmlDataSource.load(kmlUrz);
  console.log(kmzDataPromise);
  kmzDataPromise.then(function (dataSource) {
    console.log(dataSource);
    viewer.dataSources.add(dataSource);
  });

各国GDP平均

CZML数据加载

加载普通box

格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 加载kml数据
  const czml = [
    {
      id: "document",
      name: "box",
      version: "1.0",
    },
    {
      id: "shape1",
      name: "Blue box",
      position: {
        cartographicDegrees: [-114.0, 40.0, 300000.0],
      },
      box: {
        dimensions: {
          cartesian: [400000.0, 300000.0, 500000.0],
        },
        material: {
          solidColor: {
            color: {
              rgba: [0, 0, 255, 255],
            },
          },
        },
      },
    },
  ];

加载

1
2
3
4
5
6
7
8
9
let czmlUrl = "./Assets/box.czml";

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

效果

box

czml时序移动

载入数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
// 加载kml数据
 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);
 });

开启初始动画

  • shouldAnimate: true
    1
    2
    3
    4
    5
    6
    var viewer = new Cesium.Viewer("cesiumContainer", {
       // 是否显示信息窗口
       infoBox: false,
       // terrainProvider: Cesium.createWorldTerrain(),
       shouldAnimate: true,
     });

    效果

追踪飞机跨洋飞行

导入数据

1
import planeData from "@/assets/json/plane.json";

数据格式

经纬度的数据格式
数据格式

载入数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
const positionProperty = new Cesium.SampledPositionProperty();

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

// 设置起点时间(随便设置一个)
const time = new Date("2022-09-06T23: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,
    },
  });
});
console.log(positionProperty);

// 创建飞机
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",
  },
  // 绘制轨迹线
  path: new Cesium.PathGraphics({
    width: 5,
  }),
});

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

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

最终效果

3dtiles加载

1
2
3
4
5
6
7
8
9
10
11
const tileset = new Cesium.Cesium3DTileset({
    url: "./Assets/tileset.json",
  });

  viewer.scene.primitives.add(tileset);

  tileset.readyPromise.then(function (tileset) {
    viewer.zoomTo(tileset);
  });
  // 3dtiles调试面板
  viewer.extend(Cesium.viewerCesium3DTilesInspectorMixin);

3dtiles

3dtiles设置样式

根据不同的属性设置不同的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
tiles3d.style = new Cesium.Cesium3DTileStyle({
    color: {
      conditions: [
        [
          "${feature['building']} === 'apartments'",
          "color('rgba(50, 255, 0, 0.5)')",
        ],
        [
          "${feature['building']} === 'office'",
          "color('rgba(255, 255, 0, 0.5)')",
        ],
        [
          "${feature['cesium#estimatedHeight']} > 300",
          "color('rgba(200, 200, 255, 0.7)')",
        ],
        [
          "${feature['cesium#estimatedHeight']} > 100",
          "color('rgba(100, 100, 255, 0.7)')",
        ],
        [
          "${feature['cesium#estimatedHeight']} > 50",
          "color('rgba(50, 50, 150, 0.7)')",
        ],
        ["true", "color('white')"],
      ],
    },
    show: true,
  });

属性样式图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
tiles3d.style = new Cesium.Cesium3DTileStyle({
    defines: {
      distance:
        "distance(vec2(${feature['cesium#longitude']},${feature['cesium#latitude']}),vec2(113.3191,23.109))",
    },
    color: {
      conditions: [
        ["${distance} < 0.01", "color('rgba(0,0,50, 0.7)')"],
        ["${distance} < 0.02", "color('rgba(0,0,50, 0.5)')"],
        ["${distance} < 0.04", "color('rgba(0,0,50, 0.2)')"],
        ["true", "color('white')"],
      ],
    },
    show: "${distance} < 0.04 && ${feature['building']} === 'apartments'",
  });

属性样式图

好了，本文就到这里，下一篇文章将讲解使用cesium来做智慧城市

可视化学习 Cesium学习
上一篇:
语法操作记录-下载有token校验的流文件
下一篇:
【可视化学习】38-cesium基础学习(三)

    • blog of codesigner