- 博客(366)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 cesium点光源（多点光源）
本文介绍了如何在Cesium中实现多点光源效果，重点讲解了光照基础原理、代码实现及交互功能。首先，文章概述了WebGL中的光照模型，包括环境光、漫反射光和镜面反射光，并指出Cesium提供了PBR和无光照两种模式。接着，详细解析了代码实现，包括数据结构设计、着色器代码生成、光照计算和Uniforms管理。最后，展示了如何通过鼠标点击交互添加新光源，并提供了示例源码。通过本文，读者可以掌握在Cesium中动态添加和控制多点光源的技术。
2025-05-18 18:11:42
93
原创 cesium 水面反射效果（水面倒影效果）
Cesium 水面反射效果通过离屏渲染技术实现，主要包括创建镜像相机、渲染场景到帧缓冲对象（FBO）以及将渲染结果作为纹理应用到水面材质。具体步骤包括：1）创建镜像相机，计算反射相机的位置和方向；2）创建水面平面，设置几何体和材质；3）实现离屏渲染，将场景渲染到FBO；4）绑定事件，更新反射效果。关键参数如菲涅尔系数和水波参数可调节反射强度和水波效果。通过示例代码，开发者可以快速实现逼真的水面倒影效果，适用于地理信息系统的可视化场景。
2025-04-12 21:53:19
425
2
原创 cesium 后处理7（局部体积云）
本文介绍了如何在Cesium中实现局部体积云效果。通过使用Cesium的着色器功能，开发者可以自定义云的外观和行为。文章提供了完整的HTML代码示例，展示了如何设置Cesium场景、地形以及云的相关参数，如云覆盖度、风速、云层厚度等。着色器代码部分详细解释了如何计算射线与云盒子的交点距离，并定义了云的最大细节级别、步进距离等参数。通过这些设置，开发者可以在Cesium中创建逼真的局部体积云效果，增强三维场景的视觉效果。
2025-01-15 21:18:20
403
原创 cesium后处理6（体积云-噪声云图版）
本文介绍了如何在Cesium中通过后处理技术实现局部体积云效果，重点是利用噪声云图生成三维Box效果。首先，通过加载Box并建立局部坐标系，将片元坐标还原为世界坐标后，判断其是否在Box内，并设置颜色。接着，通过采样噪声图，结合射线与Box的交点计算，实现立体效果。具体步骤包括：1）创建Box并建立局部坐标系；2）在着色器中判断片元是否在Box内；3）通过射线与Box的交点计算，实现三维遮蔽效果。最终，通过后处理技术成功生成了具有立体感的Box效果。
2025-01-07 23:41:09
526
原创 cesium 后处理5 （雾效果）
本文介绍了如何在Cesium中实现后处理雾效果。通过获取像素点的世界坐标，计算其高程值，并根据高程值计算雾化值，最终混合场景原有颜色和雾化颜色，实现高度雾效果。文章详细说明了实现思路，并提供了示例代码，展示了如何在Cesium中通过后处理阶段添加雾效果。代码中使用了Cesium的PostProcessStage和自定义的片段着色器，通过调整雾化参数和颜色，可以灵活控制雾的显示效果。
2024-12-15 17:32:33
463
3
原创 cesium 后处理4（发光区域跟随实体运动）
我们对cesium后处理应该有了深入的了解。1、根据经纬度和光源半径计算范围，发光范围。2、根据根据传入的光源范围计算雾化。3、混合场景原有的颜色。4、实时获取移动实体的经纬度赋值到后处理上。
2024-12-15 15:51:21
407
原创 cesium 后处理2（局部后处理发光点）
在上一篇文章中我们讲解后处理的基本属性和用法[cesium 后处理1（实体模糊效果）](https://blog.youkuaiyun.com/weixin_46730573/article/details/144324009?spm=1001.2014.3001.5501)，因为cesium中后处理为全局处理，但在实际运用过成中我们大多数场景不需要全局处理只想对局部进行处理。
2024-12-14 19:06:36
219
原创 cesium 地形裁剪（多边形区域裁剪）
Cesium地形裁剪功能允许用户通过多边形区域对地形进行裁剪，仅支持Cesium 1.117及以上版本。实现步骤包括：首先加载地形数据，使用Cesium.createWorldTerrain或Cesium.CesiumTerrainProvider加载地形；其次定义裁剪区域，通常通过GeoJSON文件或代码定义多边形顶点；接着创建ClippingPolygon对象，并将其放入ClippingPolygonCollection中；最后将集合应用到地形上，实现裁剪效果。示例代码展示了如何通过加载GeoJSON文
2024-12-07 23:09:04
641
原创 cesium自定义的弹窗 Popup弹窗（可随球放大缩小，移动）
# 效果图中效果源代码在下面的封装栏中# 基本思路添加一个鼠标左键点击事件，当鼠标点击时，利用vue2.0中 Vue.extend（） 动态添加一个dom元素，将DOM元素渲染到cesium容器中，并利用cesium中提供的 viewer.scene.postRender 实时更新坐标位置。思路很简单，接下来我们进行实现。# 实现方法 1. 首先我们需要生成一个球体做我们标记的容器。viewer = new Cesium.Viewer('cesiumContainer',{
2021-08-23 11:15:05
17946
49
原创 cesium 闪烁点 实体闪烁
# 效果最终完整代码请看下面的封装一栏 # 基本思路可以把当前效果，动态分成两部分，添加一个点，和添加一个圆，当点击时，动态改变点的颜色，动态改变圆的大小# 实现方法 1. 首先我们需要生成一个球体做我们标记的容器。viewer = new Cesium.Viewer('cesiumContainer',{ // terrainProvider: Cesium.createWorldTerrain(), // animation: false
2021-08-23 11:14:05
5107
8
原创 cesium添加动态扩散圆，动态圆环
# 效果最终完整代码请看下面的封装一栏 # 基本思路基本思路就是我们先添加一个圆，动态改变他的材质，和大小，然后就出现上图一样的动态效果了，下面我们来实现一下# 实现思路我们先来加载一个原形，展示在地图上。官方文档地址https://cesium.com/learn/cesiumjs/ref-doc/EllipseGraphics.html 不会的可以自行看文档let entity = this.viewer.entities.add({ position: Cesiu
2021-08-08 10:15:53
71256
23
原创 cesium四棱锥（视棱锥-无角度偏差）
本文介绍了基于Cesium库实现的视锥体可视化方案，主要特点包括： 构建了可交互的动态视锥体模型，支持通过GUI面板调整视场角、远平面距离等参数； 采用Cesium.PerspectiveFrustum定义投影参数，结合FrustumGeometry生成几何体； 实现了视锥体边缘线绘制功能，增强可视化效果； 通过HeadingPitchRoll和Quaternion实现三维空间方向控制； 提供参数调整后的实时渲染机制。 该方案适用于相机视口、雷达扫描范围等三维场景的可视化需求，代码示例展示了核心实现逻辑。
2025-06-15 17:10:59
8
原创 cesium矢量线(波浪线 仿mars3d矢量线)
Cesium矢量线技术解析：通过SVG纹理实现动态波浪线效果。文章展示了在Cesium中使用PolylineSvgTrailMaterialProperty类创建流动的矢量线，支持自定义颜色、SVG纹理图案和虚线长度。关键代码包括创建Viewer、添加带SVG纹理的实体线，以及实现动态流动效果的材质属性类。该技术通过时间变量控制动画进度，使线条呈现波浪流动效果，适用于多种地理可视化场景。（完整代码见原文）
2025-06-15 16:20:45
12
原创 cesium矢量线(加号 仿mars3d矢量线)
Cesium矢量线技术解析：本文介绍了在Cesium中实现动态矢量线效果的方法，通过SVG图片纹理增强线条可视化表现。关键点包括：1) 使用PolylineSvgTrailMaterialProperty类自定义材质属性；2) 支持动态调整线条样式和颜色；3) 示例代码展示如何加载SVG纹理创建带动画效果的黄色矢量线。该技术可实现根据视角和长度自动适配的精细化线条渲染，提升三维场景中线条要素的视觉表现力。
2025-06-15 16:12:02
96
原创 echarts 柱状图（排行榜）
本文介绍了一个基于ECharts的排行榜柱状图实现方案。主要内容包括： 使用HTML和JavaScript代码创建了一个动态排行榜柱状图，支持10个转运中心的数据展示 通过BarChart类封装了图表功能，提供配置选项包括： 自定义标题、分类数据、数值数据 多色渐变柱状条设计 可配置背景色 图表特点： 横向柱状布局 右侧数值标签显示 白色背景框衬托主数据条 圆角边框设计 实现方法： 使用ECharts的bar类型 通过多Y轴叠加实现特殊效果 动态颜色分配 该方案适合需要展示排名数据的场景，代码结构清晰，配置
2025-05-25 18:46:35
172
原创 echarts 柱状图（综合排行）
ECharts柱状图综合排行实现 本文展示了使用ECharts创建多维度数据排行柱状图的方法。通过RankingChart类封装图表逻辑，支持展示综合排名、学科排名、科研排名和教学排名四个维度的数据对比。示例包含HTML页面结构和JavaScript实现代码，其中： 数据格式包含区域、图例和多维数据数组 图表容器采用100%宽高自适应布局 引入ECharts基础库和自定义图表类 支持GIF动画效果展示图表交互 实现要点包括动态数据绑定、响应式布局和可视化参数配置，适用于各类排名数据的对比展示需求。
2025-05-25 18:29:03
57
原创 cesium点光源（聚光灯效果）
Cesium中的聚光灯效果通过点光源实现，具有方向性，形成圆锥形光照区域。聚光灯的核心特征包括光源位置、照射方向、照射角度和衰减。其数学模型基于方向向量、点积、衰减系数和漫反射计算，最终通过着色器代码在Cesium中实现。示例源码展示了如何在Cesium中创建聚光灯效果，结合地形和光源参数调整，生成动态的光照效果。通过CustomShader，开发者可以灵活控制聚光灯的照射范围和衰减特性，适用于三维场景中的精细光照模拟。
2025-05-19 23:38:13
127
原创 cesium 点光源（扫描线）
本文介绍了如何在Cesium中实现点光源效果，并提供了相关源码示例。点光源是一种从一个固定点向四周发散光线的光源，类似于现实中的灯泡。其光照计算包括法线、光照方向和光照强度的计算，光照强度会随距离衰减。文章详细解释了这些计算的原理，并通过代码展示了如何在Cesium中设置点光源的位置、颜色和照射范围。示例代码中使用了Cesium的3D Tileset和自定义着色器来实现多个点光源的效果，并提供了交互式的地形和光源设置。通过该示例，开发者可以快速掌握在Cesium中实现点光源的技术。
2025-05-19 22:27:23
177
原创 cesium点光源
本文介绍了如何在Cesium中实现点光源效果。Cesium是一个用于构建3D地理空间应用的JavaScript库，支持点光源的创建与管理，常用于模拟现实世界中的灯光效果。文章详细讲解了光照原理基础，并通过CustomShader类实现自定义光照效果。具体步骤包括设置光源位置、颜色和影响半径，配置CustomShader实例，并在片元着色器中实现光照计算。关键参数如片元位置、法线、光照衰减等也进行了详细说明。最后，提供了示例源码，展示了如何在Cesium中应用点光源效果。
2025-05-17 17:08:26
60
原创 cesium 离屏渲染（视棱锥可视域）
摘要： Cesium中的离屏渲染通过帧缓冲对象（FBO）实现，将渲染过程与屏幕显示解耦，提升性能并支持复杂图形处理。WebGL中，离屏渲染通过创建FBO、绑定纹理作为颜色附件、执行渲染操作等步骤完成。Cesium在此基础上封装了Framebuffer、Texture等类，简化了离屏渲染的实现。示例代码展示了如何初始化FBO、创建离屏相机等关键步骤，适用于视棱锥可视域等场景。离屏渲染通过缓冲区分层、线程分离和硬件加速，优化了图形处理效率，尤其适用于数据可视化和动态贴图等应用。
2025-04-12 21:24:04
227
原创 cesium 离屏渲染
离屏渲染（Offscreen Rendering）是一种将场景渲染到屏幕外缓冲区的技术，常用于实现反射、阴影、后处理等特效。其优势包括灵活性、性能优化、特效实现和多通道渲染。在Cesium中，离屏渲染通过创建帧缓冲区、渲染到帧缓冲区，再将结果绘制到画布来实现。具体步骤包括初始化、渲染流程和清理。应用场景涵盖反射效果、阴影计算、后处理效果和多通道渲染。通过离屏渲染，开发者可以实现复杂的视觉效果，同时保持代码的模块化和可维护性。
2025-04-12 20:31:27
92
原创 cesium 后处理3（发光区域跟随鼠标移动）
我们对cesium后处理应该有了深入的了解。4、实时获取鼠标经纬度，修改发光中心点经纬度。1、根据经纬度和光源半径计算范围，发光范围。2、根据根据传入的光源范围计算雾化。3、混合场景原有的颜色。
2024-12-14 21:37:54
185
原创 cesium 后处理1（实体模糊效果）
后处理的大致流程就是先将场景渲染的结果存在帧缓冲区，然后将渲染的结果经过一系列后处理操作，最后才绘制到屏幕上
2024-12-08 16:37:22
228
原创 cesium 地形挖掘（地形裁剪支持凹面）
1、加载地形： 首先，需要加载地形数据。可以使用Cesium提供的地形服务，例如使用Cesium.createWorldTerrain或者Cesium.CesiumTerrainProvider来加载地形 。2、定义裁剪区域 确定需要挖掘的区域，这通常是一个多边形。可以通过GeoJSON文件加载多边形的顶点位置，或者直接在代码中定义这些位置 。3、创建裁剪多边形： 使用定义好的顶点位置创建ClippingPolygon对象。这些多边形对象将用于指定地形挖掘的区域 。4、创建裁剪多边形集合： 将所有的C
2024-12-07 18:44:38
734
原创 cesium shader着色器 (光圈效果)
shadertoy上的着色器是在一个canvas画布上进行绘制的，要想在Cesium中使用，我们需要一个载体来加载shadertoy。在Cesium绘制几何图形使用Primitive图元最接近原生也是最容易修改的，所以我们使用Primitive+Appearance比较合适
2024-12-02 09:00:00
321
原创 cesium shader着色器（火焰效果）
shadertoy上的着色器是在一个canvas画布上进行绘制的，要想在Cesium中使用，我们需要一个载体来加载shadertoy。在Cesium绘制几何图形使用Primitive图元最接近原生也是最容易修改的，所以我们使用Primitive+Appearance比较合适
2024-12-02 09:00:00
399
原创 cesium shader着色器 (水波纹效果)
shadertoy上的着色器是在一个canvas画布上进行绘制的，要想在Cesium中使用，我们需要一个载体来加载shadertoy。在Cesium绘制几何图形使用Primitive图元最接近原生也是最容易修改的，所以我们使用Primitive+Appearance比较合适
2024-12-02 09:00:00
535
原创 cesium shader着色器 (波纹效果)
shadertoy上的着色器是在一个canvas画布上进行绘制的，要想在Cesium中使用，我们需要一个载体来加载shadertoy。在Cesium绘制几何图形使用Primitive图元最接近原生也是最容易修改的，所以我们使用Primitive+Appearance比较合适
2024-12-01 22:52:24
293
原创 cesium 动态单体化-3D建筑-楼层
1、在Cesium中创建一个分类原始体（ClassificationPrimitive），加载楼层数据的集合图形。2、在Cesium中处理鼠标点击事件，用于选择和反选场景中的几何实例。链接无法使用时可私信博主获取。
2024-11-23 19:42:17
269
原创 前端面试题198（react中状态（state）和属性（props）之间有何不同）
在React中，state和props是组件的两个核心概念，它们帮助开发者管理组件的数据和行为，但各自有不同的用途和特性。
2024-09-11 07:49:17
435
原创 前端面试题197（react中为什么虚拟dom会提高性能）
而虚拟DOM允许我们在内存中对DOM进行操作，只有当虚拟DOM的变化被计算出来后，React才会将这些变化应用到实际DOM上，这样就减少了与真实DOM的交互次数。：React会把多个虚拟DOM的更新操作集合在一起，在一个批次中完成对真实DOM的更新。：虚拟DOM使得React能够更容易地追踪每个组件的状态和属性，从而在组件没有变化时复用之前的DOM元素，避免了不必要的创建和销毁过程。元素的内容发生了变化，然后只更新这个部分的DOM，而不是重新渲染整个组件树，从而提高了性能。
2024-09-11 07:46:06
466
原创 前端面试题196（简述react生命周期）
React组件的生命周期可以分为三个主要阶段：挂载阶段（Mounting）、更新阶段（Updating）和卸载阶段（Unmounting）。此外，还有一个较少提及的阶段，即错误处理阶段。每个阶段都包含了一些特定的生命周期方法，这些方法在组件生命周期的不同时间点被调用，允许开发者在适当的时机执行代码。
2024-09-11 07:43:22
493
原创 前端面试题195（请简述虚拟dom与diff算法）
虚拟DOM（Virtual DOM）是Web开发中的一种概念，特别是在使用如React这样的前端库时尤为重要。它本质上是一个轻量级的、内存中的DOM树表示，用来模拟实际DOM结构。在复杂的UI更新过程中，虚拟DOM提供了高效的更新策略，减少了直接操作真实DOM带来的性能开销。当组件的状态发生变化时，React会重新生成新的虚拟DOM树。Diff算法负责对比新旧两棵虚拟DOM树的差异，找出最小变更集，然后将这些变更应用到实际的DOM上，以达到最小化DOM操作、提高页面渲染效率的目的。
2024-09-11 07:40:14
435
原创 前端面试题194（react与vue区别）
React 和 Vue 都是目前非常流行的前端JavaScript框架，用于构建用户界面，特别是单页应用（SPA）。尽管它们有相似的应用场景，但两者在设计理念、架构、学习曲线和社区支持等方面存在一些差异。
2024-09-11 07:37:13
592
原创 前端面试题193（详解react组件中的数据传递）
在React中，组件间的数据传递是通过props（属性）和state（状态）来实现的。下面我会详细解释这两种方式，并给出示例代码。
2024-09-11 07:31:29
364
原创 前端面试题192（请简述你对react的理解）
React 是一个由 Facebook 开发并维护的开源 JavaScript 库，用于构建用户界面，特别是单页应用程序（SPA）和移动应用。它于2013年首次发布，迅速成为Web开发中最受欢迎的前端库之一。React 的核心理念是组件化开发，这使得开发者可以将UI拆分成可复用的小组件，每个组件负责管理自己的状态和渲染逻辑，从而提高了代码的可维护性和可重用性。
2024-09-11 07:27:12
475
原创 前端面试题191（react事件修改this指向）
箭头函数是最简洁且推荐的做法，特别是对于功能性组件或简单的事件处理。构造函数中的bind适用于不使用箭头函数的情况，是React社区长期以来的标准做法。提供了更简洁的语法，但依赖于转译器支持。选择哪种方式取决于个人偏好和项目设定，但箭头函数因其简洁性和避免了潜在的this问题，而被广泛采用。
2024-09-11 07:24:30
401
cesium态势标绘与编辑
2022-05-17
cesium 天空盒子（图片）
2022-06-05
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人