cesium 后处理3（发光区域跟随鼠标移动）

已于 2024-12-14 21:38:31 修改
阅读量185 收藏
点赞数
分类专栏： cesium实战 文章标签： cesium javascript 前端 着色器 后处理
于 2024-12-14 21:37:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_46730573/article/details/144476734
版权
cesium实战 专栏收录该内容
124 篇文章 ¥129.90 ¥299.90
订阅专栏
了解本专栏 订阅专栏 解锁全文
cesium 后处理4（发光区域跟随实体运动）
God's asylum的博客
12-15 407
我们对cesium后处理应该有了深入的了解。1、根据经纬度和光源半径计算范围，发光范围。2、根据根据传入的光源范围计算雾化。3、混合场景原有的颜色。4、实时获取移动实体的经纬度赋值到后处理上。
DEJA_VU3D - Cesium功能集 之 040-鼠标跟随提示Tooltip组件
总得学点什么的博客
05-22 2057
这篇文章对前面部分功能使用到的ReminderTip组件的补充，完整的源代码
cesium加载geojson数据实现鼠标悬停变色高亮效果
hmrui的博客
03-08 3395
cesium实现geojson数据鼠标悬停高亮效果 项目所需，要在cesium上加载geojson数据后实现hover效果，但没找到cesium原生实现的方法，遂用笨办法去模拟一下效果，若大神们有其他方法万望指出。 hover效果可理解为判断鼠标是否移动到目标区域内（不考虑鼠标正好在区域边的情况，目标区域可以看作多边形），若在区域内则区域变色高亮。所以模拟实现的方法可以划归为判断点是否在多边形内部，并进行相应的高亮效果。 具体实现 判断点是否在多边形内部的方法可通过射线法实现，也可利用turf.js中的bo
Cesium边界掩膜、发光
qq_26610239的博客
10-10 668
【代码】Cesium边界掩膜、发光。
Cesium特效-2022年汇总
wzwxwc1987的专栏
03-09 1654
2022年基于cesium实现的各种特效
cesium绘制卫星四菱锥覆盖范围，跟随卫星移动
12-28
"cesium绘制卫星四菱锥覆盖范围，跟随卫星移动"是一个具体的场景应用，涉及到Cesium的几何形状渲染、动态物体跟踪以及空间坐标系统的理解。 首先，四菱锥是一种几何体，它由四个等腰三角形面构成，通常用来表示卫星...
66.（cesium篇）cesium鼠标移动获取地图信息.zip
06-13
该资源包的执行效果查看地址：https://blog.youkuaiyun.com/m0_60387551/article/details/123184049 “地图之家”专栏中的“66.（cesium篇）cesium鼠标移动获取地图信息”。如下载有问题，可联系博主。 解压密码：cesium
Cesium 地图显示鼠标经纬度和高度
02-23
在事件处理器中，我们可以调用`viewer.camera.pickEllipsoid()`方法获取鼠标在地图上的位置，再通过`Cesium.Cartographic`对象转换为地理坐标（经度、纬度）： ```javascript var handler = new Cesium....
cesium glb/gltf模型节点高亮
weixin_44265800的博客
09-20 1941
cesium glb gltf 模型节点颜色修改 高亮
高光高亮 模型边缘 HighlightingSystem
06-18
高光高亮 模型发光..........边缘发光................
Cesium三维模型（发电风车）glb格式，亲测可用
12-14
Cesium三维模型（发电风车）glb格式，亲测可用,资源来源于网络！！！！
Cesium三维模型（电塔）glb格式，亲测可用
12-14
glb文件，供学习使用。原型来源网络，亲测可用！！！！！！！！！
模型查询结果高亮显示
12-14
通过查询接口查询由二维矢量面拉伸的模型，再将结果在场景中高亮显示。
55.（cesium篇）cesium叠加消逝圆(着色器).zip
11-23
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.youkuaiyun.com/QQ98281642/article/details/121489610
cesium两种方式鼠标移入移出实体显示提示框
热门推荐
一见终秦的博客
05-05 1万+
cesium两种方式鼠标移入移出实体显示提示框 第一种方式 采用cesium的label作为提示框 var labelEntity = viewer.entities.add({ label : { show : false, showBackground : true, font : '14px monospace', ho...
Cesium gltf模型添加发亮效果（视频）
地理信息技术杂谈 博客，欢迎技术交流
03-25 2310
https://mp.weixin.qq.com/s/AbogfhrLy41gUKgjhOLNfw
cesium鼠标移入实体动态加亮
weixin_42476786的博客
08-14 2974
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); handler.setInputAction(function(movement){ var haveEn = viewer.scene.pick(movement.e...
cesium叠加3D模型（glb模型,gltf模型）（cesium篇.60）
地图之家
11-29 3138
听老人家说：多看美女会长寿 地图之家总目录（订阅之前建议先查看该博客） 文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。 效果如下所示： 下面献上完整代码，代码重要位置会做相应解释 <html lang="en"> <head> <meta charset="UTF-8"/> <script src="Build/Cesium/Cesium.js"></script> <link rel="st
cesium 线条跟随鼠标
最新发布
02-27
### 实现 Cesium 中线条跟随鼠标交互 为了实现在 Cesium 中绘制一条可以随着鼠标移动而更新的线段，通常会采用监听鼠标事件的方式并实时更新线段的位置。下面是一个具体的实现方法[^4]。 #### 创建基础环境 确保 HTML 页面中有用于承载 Cesium Viewer 的容器，并设置其样式使该容器能够占据整个浏览器窗口[^2]: ```css html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } ``` #### 初始化 Cesium 场景 初始化 `Viewer` 对象作为 Cesium 应用程序的主要入口点： ```javascript const viewer = new Cesium.Viewer(&#39;cesiumContainer&#39;, { terrainProvider: Cesium.createWorldTerrain() }); ``` #### 定义绘图工具类 创建一个名为 `DrawTool` 的 JavaScript 类来管理所有的绘图逻辑，包括但不限于添加新顶点、移除最后一个顶点以及清除所有已有的路径数据等操作: ```javascript class DrawTool { constructor(viewer) { this.viewer = viewer; this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas); this.positions = []; this.polyline = undefined; // 添加鼠标点击事件处理函数 this._addClickHandler(); // 添加鼠标移动事件处理函数 this._addMouseMoveHandler(); } _addClickHandler() { const that = this; this.handler.setInputAction(function (movement) { let cartesian = that.viewer.camera.pickEllipsoid(movement.position, that.viewer.scene.globe.ellipsoid); if (cartesian !== undefined && !that.isDrawing()) { that.addPoint(cartesian); } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); } _addMouseMoveHandler(){ const that = this; this.handler.setInputAction(function (movement){ if(that.isDrawing()){ let lastPosition = that.positions[that.positions.length - 1]; let currentCartesian = that.viewer.camera.pickEllipsoid(movement.endPosition, that.viewer.scene.globe.ellipsoid); if(currentCartesian){ that.updateLastSegment(lastPosition,currentCartesian); } } },Cesium.ScreenSpaceEventType.MOUSE_MOVE); } addPoint(position) { this.positions.push(Cesium.Cartesian3.clone(position)); if (!this.polyline || this.polyline.isDestroyed()) { this.polyline = this.viewer.entities.add({ polyline: { positions: new Cesium.CallbackProperty(() => {return this.positions;}, false), material: new Cesium.PolylineGlowMaterialProperty({color : Cesium.Color.RED}), width: 5, clampToGround: true } }); } else { this.polyline.polyline.material.color = new Cesium.CallbackProperty(()=>{return Cesium.Color.BLUE;},false); } } updateLastSegment(start,end){ this.positions[this.positions.length-1]=end; } isDrawing(){ return this.positions.length>0; } clearAllPoints() { while (this.positions.length > 0) { this.removeLastPoint(); } } removeLastPoint() { if (this.positions.length === 0) return; this.positions.pop(); if (this.positions.length === 0) { this.destroyPolyline(); } } destroyPolyline() { if (this.polyline && !this.polyline.isDestroyed()) { this.polyline.destroy(); this.polyline = null; } } } // 使用实例化后的对象开始绘图 let drawToolInstance = new DrawTool(viewer); ``` 此代码片段展示了如何利用 Cesium 提供的各种 API 来构建一个简单的绘图工具，允许用户通过单击地图上的不同位置来增加新的节点，并且当处于绘画状态时（即已经有一个以上的点被加入），可以通过拖动鼠标来自由调整最后一条线段的方向和长度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

GIS-CL

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值