最全兔年首文迎新春-Cesium橘子洲烟花礼赞_橘子洲头路网数据(1)，2024年最新一眼就能看懂的大数据开发自学手册

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

```

在上面的代码中通过引入Cesium.js，并且在页面中创建了一个div用于渲染展示cesium地球组件。但这是还未将cesium和页面元素进行绑定，也没有加载加载相应的底图和地形数据。

3、底图和地形数据加载

下面将通过UrlTemplateImageryProvider对象来进行Cesium的底图对象定义，示例代如下所示：

//加载影像底图
var imageryProvider = new Cesium.UrlTemplateImageryProvider({
    url: "http://localhost:8086/data/basemap_water/{z}/{x}/{y}.png",
    tilingScheme: new Cesium.WebMercatorTilingScheme(),
    fileExtension: 'png',
    minimumLevel: 1,
    maximumLevel: 16
});

var labelProvider = new Cesium.UrlTemplateImageryProvider({
    url: "http://localhost:8086/data/basemap_nowater/1-10label/{z}/{x}/{y}.png",
    tilingScheme: new Cesium.GeographicTilingScheme(),//投影方式为经纬度直投，否则路网不对
    fileExtension: 'png',
    minimumLevel: 1,
    maximumLevel: 10
 });

//加载本地地形数据
var terrainLayer = new Cesium.CesiumTerrainProvider({
    url: "http://localhost:8086/data/hunanterrain",
    // 请求照明
    requestVertexNormals: true,
    // 请求水波纹效果
    requestWaterMask: false
});

上面的代码定义了地形数据，同时使用如下的代码将地形数据、底图数据都添加到Cesium的视图对象中，并且将标签图层也添加到对象中。用于系统，同时将cesium的展示视角初始调整为橘子洲的经纬度坐标。

var viewer = new Cesium.Viewer('cesiumContainer',{
    imageryProvider:imageryProvider,
    terrainProvider: terrainLayer,
    baseLayerPicker:false,
    homeButton: true,
    baseLayerPicker: false,
    animation: false,
    timeline: false,
    navigationHelpButton: false,
    geocoder: false,
    sceneModePicker: false,
    shouldAnimate: true,
});

// 设置相机初始位置
var homeCameraView = {
        destination: Cesium.Cartesian3.fromDegrees(112.955074,28.16843,507.0480578185452),
            orientation: {
                heading:5.656571359006588,
                pitch: -0.28428181994862656,
                roll: 0
            },
        };

viewer.camera.setView(homeCameraView);

viewer.imageryLayers.addImageryProvider(labelProvider);
// 隐藏版权信息
viewer._cesiumWidget._creditContainer.style.display = "none";

viewer.scene.globe.enableLighting = false;//关闭光照

4、粒子系统

粒子系统是WebGL中的一个非常重要的组成部分，通过粒子系统可以实现很多的特效。粒子系统是一种模拟复杂物理效应的图形技术。粒子系统是小图片的集合，当放到一起观察它们时，会形成一个更复杂的“模糊”对象，例如火、烟雾、气候，或者烟火（fireworks）。通过使用例如初始位置、速度和寿命属性来指定单个粒子的行为，可以控制这些复杂的效果。这里推荐一篇介绍粒子系统比较简单同时讲解比较清楚的入门博客Cesium中文教程-粒子系统介绍(Introduction to Particle Systems)和cesium粒子系统介绍，更多的关于粒子系统的说明，可以上WebGL知识去深入学习，这里不做特别深入的讲解（因为博主也学得不深）。本文结合代码来简要说明粒子系统的一些知识。

模拟图片源，粒子系统可以理解是多个小图片的集合整体渲染。所以可以基于外部图片的渲染，比如爆炸的效果，同时作为烟花的特效，这里采用模拟图片实现。关键代码如下：

let particleCanvas;

function getImage() {
  if (!Cesium.defined(particleCanvas)) {
        particleCanvas = document.createElement("canvas");
        particleCanvas.width = 30;
        particleCanvas.height = 30;
        const context2D = particleCanvas.getContext("2d");
        context2D.beginPath();
        context2D.arc(10, 10, 10, 0, Cesium.Math.TWO_PI, true);
        context2D.closePath();
        context2D.fillStyle = "rgb(255, 255, 255)";
        context2D.fill();
       }
   return particleCanvas;
}

粒子系统在Cesium被进行了简单封装，开发者通过API进行简单调用即可。

new Cesium.ParticleSystem({
    image: getImage(),
    startColor: color,
    endColor: color.withAlpha(0.0),
    particleLife: life,
    speed: 30.0,
    imageSize: particlePixelSize,
    emissionRate: 0,
    emitter: new Cesium.SphereEmitter(1.8),
    bursts: bursts,
    lifetime: lifetime,
    updateCallback: force,
    modelMatrix: modelMatrix,
    emitterModelMatrix: emitterModelMatrix,
   })
);

最后通过循环和一些随机坐标偏移来实现烟花的位置随机展示，在粒子播放的时候，会进行回归调用。

const xMin = -100.0;
const xMax = 150.0;
const yMin = -80.0;
const yMax = 150.0;
const zMin = -50.0;
const zMax = 50.0;

const colorOptions = [
{
minimumRed: 0.75,
green: 0.0,
minimumBlue: 0.8,
alpha: 1.0,
},
{
red: 0.0,
minimumGreen: 0.75,
minimumBlue: 0.8,
alpha: 1.0,
},
{
red: 0.0,
green: 0.0,
minimumBlue: 0.8,
alpha: 1.0,
},
{
minimumRed: 0.75,
minimumGreen: 0.75,
blue: 0.0,
alpha: 1.0,
},
];

for (let i = 0; i < numberOfFireworks; ++i) {
     const x = Cesium.Math.randomBetween(xMin, xMax);
     const y = Cesium.Math.randomBetween(yMin, yMax);
     const z = Cesium.Math.randomBetween(zMin, zMax);
     const offset = new Cesium.Cartesian3(x, y, z);
     const color = Cesium.Color.fromRandom(
          colorOptions[i % colorOptions.length]
     );

      const bursts = [];
      for (let j = 0; j < 5; ++j) {
            bursts.push(
              new Cesium.ParticleBurst({
                time: Cesium.Math.nextRandomNumber() * lifetime,
                minimum: burstSize,
                maximum: burstSize,
              })
            );
      }

    createFirework(offset, color, bursts);
}

下面给一个最终的效果图，一个在橘子洲头的动态烟花效果，真诚的祝福大家新年快乐，兔年大吉。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

转存中…(img-yiSfoznb-1715475594417)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取