- 博客(354)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 cesium后处理6（体积云-噪声云图版）
1、要实现局部体积云我们首先要加载一个box盒子。2、以Box中心点建立一个局部坐标系，每个片元还原到世界坐标，然后转到这个局部坐标系，通过判断坐标值的大小就可以判断这个片元是否在该Box内，如果在内，就设置颜色为蓝色。我们按照思路编写代码，因为要转坐标系，首先我们通过Box的原点坐标建立一个局部坐标系3、将次坐标系信息传入后处理着色器，着色器中每个片元坐标先还原为世界坐标，然后转到该坐标系下，进行坐标数值比较，相机到片元（世界坐标）的射线与Box如果有交点，那么该片元就被遮蔽。
2025-01-07 23:41:09
339
原创 cesium 后处理5 （雾效果）
跟前几章实现原理都一样1、获取像素点的世界坐标2、根据像素点的世界坐标计算高程3、根据高程计算雾化值4、根据雾化值混合场景原来的颜色和雾化颜色5、因为是高度雾，所以我们需要计算出当前像素的高程值即可。我们知道，Cesium的笛卡尔坐标系的原点位于地球的中心点，x轴指向经度为0度的位置，y轴指向经度为90度东的位置，z轴指向北极。当我们知道一个点的笛卡尔坐标后，就知道这个笛卡尔坐标的模长（向量的长度），那么这个笛卡尔坐标的高程就是模长-地球的半径
2024-12-15 17:32:33
360
3
原创 cesium 后处理4（发光区域跟随实体运动）
我们对cesium后处理应该有了深入的了解。1、根据经纬度和光源半径计算范围，发光范围。2、根据根据传入的光源范围计算雾化。3、混合场景原有的颜色。4、实时获取移动实体的经纬度赋值到后处理上。
2024-12-15 15:51:21
304
原创 cesium 后处理3（发光区域跟随鼠标移动）
我们对cesium后处理应该有了深入的了解。4、实时获取鼠标经纬度，修改发光中心点经纬度。1、根据经纬度和光源半径计算范围，发光范围。2、根据根据传入的光源范围计算雾化。3、混合场景原有的颜色。
2024-12-14 21:37:54
129
原创 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
153
原创 cesium 地形裁剪（边形形区域裁剪）
仅支持cesium 1.117及以上版本1、加载地形： 首先，需要加载地形数据。可以使用Cesium提供的地形服务，例如使用Cesium.createWorldTerrain或者Cesium.CesiumTerrainProvider来加载地形 。2、定义裁剪区域 确定需要挖掘的区域，这通常是一个多边形。可以通过GeoJSON文件加载多边形的顶点位置，或者直接在代码中定义这些位置 。3、创建裁剪多边形： 使用定义好的顶点位置创建ClippingPolygon对象。这些多边形对象将用于指定地形挖掘的区域
2024-12-07 23:09:04
426
原创 cesium1.102.0及以上版本自定义GLSL报“texture2D‘ : no matching overloaded function found”错误
cesium1.102.0以上版本将不再使用webGL1进行上下文渲染版本改为webgl2版本，导致不在兼容‘texture2D’。
2023-10-18 22:45:33
1463
原创 cesium态势标会（钳击箭头）
vue + cesium钳击箭头标绘与编辑，采用es6模块化写法逻辑清晰，会有明显的标注说明，使代码容易读懂，理解和学习
2022-05-18 17:50:10
1614
1
原创 cesium态势标绘 （ 绘制攻击箭头）
vue + cesium攻击箭头标绘与编辑，采用es6模块化写法逻辑清晰，会有明显的标注说明，使代码容易读懂，理解和学习
2022-05-18 17:33:27
2841
1
原创 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
17240
48
原创 cesium 闪烁点 实体闪烁
# 效果最终完整代码请看下面的封装一栏 # 基本思路可以把当前效果，动态分成两部分，添加一个点，和添加一个圆，当点击时，动态改变点的颜色，动态改变圆的大小# 实现方法 1. 首先我们需要生成一个球体做我们标记的容器。viewer = new Cesium.Viewer('cesiumContainer',{ // terrainProvider: Cesium.createWorldTerrain(), // animation: false
2021-08-23 11:14:05
5007
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
68486
22
原创 ceisum 鼠标拖拽移动实体
# 效果完整代码请看下面封装栏# 基本思路鼠标拖拽主要化分为3步，分别为鼠标按下事件，鼠标移动事件，鼠标抬起事件。当鼠标按下时获取该实体，当鼠标移动时动态改变实体经纬度，当鼠标抬起时，销毁事件，听起来很简单，现在我们来进行实现# 实现方法handlers(){ this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas); // 鼠标左键按下 this.leftDownAction(
2021-08-01 16:27:26
1608
4
原创 Cesium-雷达遮罩动态扫描
# 效果# 基本思路我们将他分为两个步骤来做第一步加载一个ellipsoid加载半圆体，第二步用cesium提供的wall属性加载一个立体墙，运用cesium提供的viewer.clock.onTick开启动画效果听起来很简单。下面我们来进行实现# 实现方法第一步我们先用cesium中提供ellipsoid方法加载半圆体，先看一下ellipsoid中都有哪些属性属性名属性含义distanceDisplayCondition指定将在距相机多远的距离显示和隐藏 new Ce
2021-07-29 09:27:57
4079
5
原创 cesium 后处理1（实体模糊效果）
后处理的大致流程就是先将场景渲染的结果存在帧缓冲区，然后将渲染的结果经过一系列后处理操作，最后才绘制到屏幕上
2024-12-08 16:37:22
154
原创 cesium 地形挖掘（地形裁剪支持凹面）
1、加载地形： 首先，需要加载地形数据。可以使用Cesium提供的地形服务，例如使用Cesium.createWorldTerrain或者Cesium.CesiumTerrainProvider来加载地形 。2、定义裁剪区域 确定需要挖掘的区域，这通常是一个多边形。可以通过GeoJSON文件加载多边形的顶点位置，或者直接在代码中定义这些位置 。3、创建裁剪多边形： 使用定义好的顶点位置创建ClippingPolygon对象。这些多边形对象将用于指定地形挖掘的区域 。4、创建裁剪多边形集合： 将所有的C
2024-12-07 18:44:38
584
原创 cesium shader着色器 (光圈效果)
shadertoy上的着色器是在一个canvas画布上进行绘制的，要想在Cesium中使用，我们需要一个载体来加载shadertoy。在Cesium绘制几何图形使用Primitive图元最接近原生也是最容易修改的，所以我们使用Primitive+Appearance比较合适
2024-12-02 09:00:00
219
原创 cesium shader着色器（火焰效果）
shadertoy上的着色器是在一个canvas画布上进行绘制的，要想在Cesium中使用，我们需要一个载体来加载shadertoy。在Cesium绘制几何图形使用Primitive图元最接近原生也是最容易修改的，所以我们使用Primitive+Appearance比较合适
2024-12-02 09:00:00
286
原创 cesium shader着色器 (水波纹效果)
shadertoy上的着色器是在一个canvas画布上进行绘制的，要想在Cesium中使用，我们需要一个载体来加载shadertoy。在Cesium绘制几何图形使用Primitive图元最接近原生也是最容易修改的，所以我们使用Primitive+Appearance比较合适
2024-12-02 09:00:00
428
原创 cesium shader着色器 (波纹效果)
shadertoy上的着色器是在一个canvas画布上进行绘制的，要想在Cesium中使用，我们需要一个载体来加载shadertoy。在Cesium绘制几何图形使用Primitive图元最接近原生也是最容易修改的，所以我们使用Primitive+Appearance比较合适
2024-12-01 22:52:24
208
原创 cesium 动态单体化-3D建筑-楼层
1、在Cesium中创建一个分类原始体（ClassificationPrimitive），加载楼层数据的集合图形。2、在Cesium中处理鼠标点击事件，用于选择和反选场景中的几何实例。链接无法使用时可私信博主获取。
2024-11-23 19:42:17
199
原创 前端面试题198（react中状态（state）和属性（props）之间有何不同）
在React中，state和props是组件的两个核心概念，它们帮助开发者管理组件的数据和行为，但各自有不同的用途和特性。
2024-09-11 07:49:17
408
原创 前端面试题197（react中为什么虚拟dom会提高性能）
而虚拟DOM允许我们在内存中对DOM进行操作，只有当虚拟DOM的变化被计算出来后，React才会将这些变化应用到实际DOM上，这样就减少了与真实DOM的交互次数。：React会把多个虚拟DOM的更新操作集合在一起，在一个批次中完成对真实DOM的更新。：虚拟DOM使得React能够更容易地追踪每个组件的状态和属性，从而在组件没有变化时复用之前的DOM元素，避免了不必要的创建和销毁过程。元素的内容发生了变化，然后只更新这个部分的DOM，而不是重新渲染整个组件树，从而提高了性能。
2024-09-11 07:46:06
447
原创 前端面试题196（简述react生命周期）
React组件的生命周期可以分为三个主要阶段：挂载阶段（Mounting）、更新阶段（Updating）和卸载阶段（Unmounting）。此外，还有一个较少提及的阶段，即错误处理阶段。每个阶段都包含了一些特定的生命周期方法，这些方法在组件生命周期的不同时间点被调用，允许开发者在适当的时机执行代码。
2024-09-11 07:43:22
468
原创 前端面试题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
392
原创 前端面试题194（react与vue区别）
React 和 Vue 都是目前非常流行的前端JavaScript框架，用于构建用户界面，特别是单页应用（SPA）。尽管它们有相似的应用场景，但两者在设计理念、架构、学习曲线和社区支持等方面存在一些差异。
2024-09-11 07:37:13
572
原创 前端面试题193（详解react组件中的数据传递）
在React中，组件间的数据传递是通过props（属性）和state（状态）来实现的。下面我会详细解释这两种方式，并给出示例代码。
2024-09-11 07:31:29
337
原创 前端面试题192（请简述你对react的理解）
React 是一个由 Facebook 开发并维护的开源 JavaScript 库，用于构建用户界面，特别是单页应用程序（SPA）和移动应用。它于2013年首次发布，迅速成为Web开发中最受欢迎的前端库之一。React 的核心理念是组件化开发，这使得开发者可以将UI拆分成可复用的小组件，每个组件负责管理自己的状态和渲染逻辑，从而提高了代码的可维护性和可重用性。
2024-09-11 07:27:12
456
原创 前端面试题191（react事件修改this指向）
箭头函数是最简洁且推荐的做法，特别是对于功能性组件或简单的事件处理。构造函数中的bind适用于不使用箭头函数的情况，是React社区长期以来的标准做法。提供了更简洁的语法，但依赖于转译器支持。选择哪种方式取决于个人偏好和项目设定，但箭头函数因其简洁性和避免了潜在的this问题，而被广泛采用。
2024-09-11 07:24:30
382
原创 前端面试题190（fetch VS ajax VS axios）
选择建议: 如果你需要一个现代、灵活且功能强大的解决方案，且不介意引入外部库，Axios 是一个很好的选择。对于基本需求和追求原生支持，Fetch 是不错的选择。而如果你的项目已经依赖于像jQuery这样的库，使用AJAX可能是最简便的方式，尤其是在需要支持旧浏览器的情况下。
2024-09-11 07:22:05
465
原创 前端面试题189（详解vue中proxy）
在Vue.js应用开发中，proxy主要指的是Vue CLI在现代浏览器中为开发环境设置的Webpack devServer的代理功能，而不是Vue本身的一个核心特性。这一配置帮助开发者解决前端应用在开发过程中遇到的跨域问题。当你的Vue应用需要从运行在不同端口或域名的后端API获取数据时，由于浏览器的同源策略限制，可能会遇到跨域访问的错误。为了解决这个问题，Vue CLI提供了代理服务器的功能，它可以将前端应用的API请求转发到实际的后端服务器上，从而绕过浏览器的跨域限制。
2024-09-09 07:41:33
561
原创 前端面试题188（vue在created和mounted这两个生命周期中请求数据有什么区别）
选择在created还是mounted中发起数据请求，取决于你的具体需求：如果数据请求不依赖DOM操作且希望尽早开始加载数据，可以选择在created；如果需要确保DOM已渲染完成再进行数据填充或有DOM操作的需求，则应选择在mounted中进行。在实际开发中，根据具体情况灵活选择，以达到最佳的用户体验。
2024-09-09 07:34:35
446
原创 前端面试题187（vue v-for与v-if优先级）
在Vue中，v-for和v-if是两个常用的指令，它们分别用于遍历数组渲染列表和条件性渲染元素。关于它们的优先级，Vue官方文档明确指出，在同一元素上同时使用v-if和v-for时，v-for的优先级高于v-if。这意味着v-for将比v-if有更高的执行优先级。这种设计是因为v-for代表的是一个循环，它负责创建多个节点，而v-if是一个条件表达式，用来判断是否渲染这个节点。如果v-if的优先级高于v-for，那么在每次循环迭代中都会进行条件判断，这将导致不必要的性能开销。
2024-09-09 07:31:09
472
原创 前端面试题186（vue路由加载怎样按需加载或懒加载）
在Vue.js应用中，实现路由的按需加载（懒加载）是一种提高应用性能的有效方法，它能确保用户在访问特定页面时才加载该页面相关的组件，而不是在应用启动时一次性加载所有组件。Vue Router支持动态导入（import()）语法来实现这一功能。
2024-09-09 07:26:32
541
原创 前端面试题185（vuex中actions特性）
特性主要围绕异步操作处理、提高代码组织性和可维护性以及提供强大的上下文支持展开，是 Vuex 状态管理中处理非直接状态变更逻辑的关键部分。是用于处理异步操作和提交mutation的地方。：Actions可以被拆分成更小的部分，并且可以相互调用，这样可以提高代码的可读性和可维护性。：由于Actions可以是异步的，它们通常返回一个Promise。等属性，这为Action提供了丰富的上下文信息，便于处理复杂的业务逻辑。来处理Action的完成状态，这对于处理流程控制非常有用。这有助于区分同步和异步的操作方式。
2024-09-09 07:22:43
259
原创 cesium 云效果
更多内容/样例[cesium实战目录](https://blog.youkuaiyun.com/weixin_46730573/article/details/141018763)
2024-09-08 19:43:23
398
cesium 天空盒子（图片）
2022-06-05
cesium态势标绘与编辑
2022-05-17
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人