Cesium常用功能封装，js编码，每个功能独立封装——第2篇

已于 2023-09-22 16:09:04 修改
阅读量264 收藏 1
点赞数
文章标签： webgis 前端
于 2023-08-31 07:32:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40820382/article/details/132594789
版权

Cesium常用功能封装，js编码，每个功能独立封装，方便直接应用到项目中。

视频演示链接

本脚手架可以前端独立运行。
本脚手架项目是前后端一整套，包括权限管理。前端框架采用Vue3 + js + ElementUI-Plus，后端采用Spring Boot + Mysql + Redis，GIS引擎本项目中是Cesium ，OpenLayers等其他GIS引擎编码的案例项目在其他博客有说明。如果仅仅是研究GIS功能，运行前端框架即可。

需要的扣扣私聊：854138497

第一篇链接：点击查看
功能点截图

1、点聚合-JSON
在这里插入图片描述
2、加载气象站-（仅显示屏幕内的点，达到优化性能的目的）
在这里插入图片描述
3、导航和比例尺
在这里插入图片描述
4、飞机飞行
在这里插入图片描述
5、卫星
在这里插入图片描述
卫星控制
在这里插入图片描述
6、右键菜单（实现右键添加某些操作）
在这里插入图片描述
7、遮罩反选在这里插入图片描述
8、热力图在这里插入图片描述
9、鹰眼-多视图模式
在这里插入图片描述
10、鹰眼-自定义视图模式
在这里插入图片描述
11、坡度分析
在这里插入图片描述
12、高程（限高）分析-要地形

Background Transparency/

Band Transparency/Band Thickness/

Band 1 Position/Band 2 Position

Band 3 Position/Gradient
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
13、通视分析（先加载geojson故宫）

在这里插入图片描述
14、环视分析（先加载geojson故宫）
在这里插入图片描述15、淹没分析（先加载geojson故宫）
在这里插入图片描述
16、卷帘对比（本地静态全球影像图，封装）
在这里插入图片描述
17、卷帘分析（全球底图）
在这里插入图片描述
18、卷帘分析（全球底图+分割按钮）
在这里插入图片描述
19、gltf吊车（其他模型可能涉密，仔细看菜单图，可以私聊演示）
在这里插入图片描述
20、大雁塔
在这里插入图片描述
21、3DTiles+楼群
在这里插入图片描述
22、高动态范围（伽马亮度）
在这里插入图片描述
23、启用模糊（对比度、光泽亮度、因子delta）

在这里插入图片描述
24、3DTiles+楼群+ 启用阴影
在这里插入图片描述
25、辐射圈
在这里插入图片描述
26、动态墙
在这里插入图片描述
27、GIF动图
在这里插入图片描述
28、风场
在这里插入图片描述
29、圆扩散
在这里插入图片描述
30、飞线
在这里插入图片描述
31、四色图

在这里插入图片描述
32、流动水面
在这里插入图片描述
33、天际线
在这里插入图片描述
34、道路穿梭-entity渲染
在这里插入图片描述
35、道路穿梭-primitive渲染
在这里插入图片描述
36、道路闪烁
在这里插入图片描述
37、火焰粒子
在这里插入图片描述
38、下雨效果
在这里插入图片描述
39、雪花效果
在这里插入图片描述
Cesium常用功能封装，js编码，每个功能独立封装，方便直接应用到项目中。
本篇紧接着第一篇来写，第一篇链接：点击查看
视频演示链接

海马区
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Cesium-demo学习三维，学习JS封装Cesium
07-13
Cesium-demo学习三维，学习JS封装Cesium； 使用命令 vue add vue-cli-plugin-cesium 下载 npm install
cesium动态绘制多边形及常用函数封装
03-10
1. 屏幕坐标转经纬度高程 2. 设置屏幕空间事件监听 3. 移除屏幕空间事件监听 4. 相机视角切换 5. 绘制多边形 6. 绘制多段线 7. 默认左键点击事件 8. 绘制区域（动态绘制多边形） 9. 获取区域各顶点经纬度高程 10. 设置区域显隐 11. 计算区域面积
四十二、openlayers官网示例Flight Animation扩展——在地图上绘制飞机航线、飞机随航线飞行效果
aaa_div的博客
06-07 256
绘制线的思路是取坐标数组的第0个到第n个，每毫秒绘制不同的线。绘制点的思路则是直接取第n个点，每毫秒绘制不同的点，并且在n大于等于坐标数组之后又让n重新等于0，以此来实现循环的动画。因为图标需要随着航线的方向飞行，需要根据航线调整角度，因此在加载数据源的时候需要计算一下角度，绑在每个feature上。在航线绘制完成之后，添加一个飞机动画开始执行的标识flight，给feature设置一个初始的index值。上篇在地图上绘制了动态的飞机航线，于是我想着，能不能加个飞机的图标跟着航线飞行。
封装cesium的测量工具类
08-13
下载之前先看下使用教程吧，看看是不是你想要的: https://blog.csdn.net/KK_bluebule/article/details/126320645
Cesium材质特效
【cacrle】的博客
01-27 1870
现有的gis开发方向较流行的是webgis开发，其中Cesium是一款开源的WebGIS库，主要用于实时地球和空间数据的可视化和分析。它提供了丰富的地图显示和数据可视化功能，并能实现三维可视化开发。本文将使用一些特殊的材质，如视频材质、自定义材质和Cesium内置的一些特殊效果类、粒子系统等实现一些特效场景的模拟，包括云、雾、动态水面、雷达扫描、流动线、电子围栏、粒子烟花、粒子火焰及粒子天气等。
Cesium实现水闸放水以及水面流速效果
m0_57478867的博客
03-06 992
Cesium实现水闸放水以及水面流速效果
OpenLayers 6 实现仿Echarts风格的动态迁徙图/航班图
老胡的CSDN博客
12-07 6207
这是一个做完很久的demo，主要还是为了摆脱echarts那种“图层脱线”的问题，提升可视化渲染性能。 使用的数据还是来自echarts，模拟了全国各地到湖南重点景区的客流情况。 分析 要实现动态迁徙图的效果，主要需解决两个问题 曲线的绘制。因为给出的数据只有起点和终点两个点位，所以想要绘制曲线可以参考turf中的bezier曲线生成API。 点迹的动画播放。仍然要依靠render机...
新版cesium下雨特效
北京-giser的博客
01-18 828
新版cesium下雨特效
Cesium动态水面
zhangwencan1986的博客
03-13 355
效果：框选范围，实现范围内的动态水面效果。
Cesium高级-1、下雨特效
lying_19的博客
06-14 1499
cesium特效：下雨。通过GLSL片源着色器代码来实现下雨特效。
openlayers 飞线动画 沿线运动 飞线 迁徙图
qq_36287830的博客
02-27 1369
openlayers 飞线 迁徙图 沿线运动 动画 行政区划
Cesium撒点封装(Primitive).zip
09-19
"Cesium撒点封装(Primitive)"是一个项目，它展示了如何利用Cesium的底层功能来实现高效的点云渲染，这对于地理信息系统（GIS）和大数据可视化非常有用。在本项目中，开发者已经对Cesium的`Primitive`类型进行了封装...
CesiumAPI二次封装包
12-26
CesiumAPI二次封装包是一个专为提升Cesium三维可视化库使用效率而设计的工具集。Cesium是一款强大的开源JavaScript库，用于在Web浏览器中构建高度交互的、全球范围的3D地球模型。它广泛应用于地理信息系统（GIS）、...
Cesium绘制点线面的工具封装
08-17
使用之前先看博客，里面有工具的介绍： Cesium 实战记录（四） 绘制点线面的工具封装 https://blog.csdn.net/KK_bluebule/article/details/126384623
cesium根据高程点实现简易地下水水流分析
c_wengy的博客
05-25 1263
高程点流向分析，水流分析，cesium流线动画
Cesium中实现流体模拟
weixin_43481439的博客
01-26 1985
体积随机方法将流体看作是由大量微小的体积元素组成的系统，每个体积元素具有随机的速度和位置。：粒子方法，如经典的分子动力学方法（Molecular Dynamics, MD）和格子Boltzmann方法（Lattice Boltzmann Method, LBM），将流体看作由大量微观粒子组成的系统。它将模拟区域划分为一个或多个离散的网格单元，并根据流体的性质和运动方程，在网格点上进行数值计算。：边界元方法是一种基于势函数和其法向导数在流体边界上的离散化表示，以求解流体行为的方法。
cesium实现天气效果【雨、雪、雾】
qq_43474235的博客
01-01 1918
项目中使用到cesium,为了让立体效果更好看，更应景，为此里面也涉及到了天气效果，其实网上也有一大堆，我也只是其中的一个复制者，唯一不同的是可以通过来改变雨雪的大小等等。
cesium 下雨效果 下雪效果
qq_41690869的博客
01-12 515
cesium 实现下雨下雪效果
WHAT - NextJS 的路由系统和 react-router-dom
最新发布
weixin_58540586的博客
07-04 922
不，Next.js 的路由系统并不基于。Next.js 本身内置了自己的路由系统，并且在其生命周期和工作方式上与有所不同。
使用vue封装cesium创建点、线、面、包含增、删、改等功能一个类
03-29
以下是一个使用Vue封装Cesium创建点、线、面、包含增、删、改等功能的类示例： ```javascript import * as Cesium from 'cesium/Cesium'; export default class CesiumHelper { constructor(viewer) { this.viewer = viewer; this.entities = new Cesium.EntityCollection(); this.viewer.entities.add(this.entities); } createPoint(position, options) { const entity = this.entities.add({ position: Cesium.Cartesian3.fromDegrees(position.lon, position.lat), point: { pixelSize: options.size || 5, color: options.color || Cesium.Color.YELLOW, outlineColor: options.outlineColor || Cesium.Color.BLACK, outlineWidth: options.outlineWidth || 1 } }); return entity; } createLine(positions, options) { const entity = this.entities.add({ polyline: { positions: positions.map(pos => Cesium.Cartesian3.fromDegrees(pos.lon, pos.lat)), width: options.width || 2, material: options.material || Cesium.Color.RED } }); return entity; } createPolygon(positions, options) { const entity = this.entities.add({ polygon: { hierarchy: new Cesium.PolygonHierarchy( positions.map(pos => Cesium.Cartesian3.fromDegrees(pos.lon, pos.lat)) ), material: options.material || Cesium.Color.BLUE.withAlpha(0.5), outline: options.outline !== undefined ? options.outline : true, outlineColor: options.outlineColor || Cesium.Color.BLACK, outlineWidth: options.outlineWidth || 1 } }); return entity; } addOrUpdatePoint(entity, position, options) { entity.position = Cesium.Cartesian3.fromDegrees(position.lon, position.lat); entity.point.pixelSize = options.size || entity.point.pixelSize; entity.point.color = options.color || entity.point.color; entity.point.outlineColor = options.outlineColor || entity.point.outlineColor; entity.point.outlineWidth = options.outlineWidth || entity.point.outlineWidth; } addOrUpdateLine(entity, positions, options) { entity.polyline.positions = positions.map(pos => Cesium.Cartesian3.fromDegrees(pos.lon, pos.lat)); entity.polyline.width = options.width || entity.polyline.width; entity.polyline.material = options.material || entity.polyline.material; } addOrUpdatePolygon(entity, positions, options) { entity.polygon.hierarchy = new Cesium.PolygonHierarchy( positions.map(pos => Cesium.Cartesian3.fromDegrees(pos.lon, pos.lat)) ); entity.polygon.material = options.material || entity.polygon.material; entity.polygon.outline = options.outline !== undefined ? options.outline : entity.polygon.outline; entity.polygon.outlineColor = options.outlineColor || entity.polygon.outlineColor; entity.polygon.outlineWidth = options.outlineWidth || entity.polygon.outlineWidth; } remove(entity) { this.entities.remove(entity); } removeAll() { this.entities.removeAll(); } } ``` 使用示例： ```javascript import CesiumHelper from './CesiumHelper'; const viewer = new Cesium.Viewer('cesiumContainer'); const cesiumHelper = new CesiumHelper(viewer); // 创建点 const point = cesiumHelper.createPoint({ lon: 114.06667, lat: 22.61667 }, { size: 10, color: Cesium.Color.RED }); // 创建线 const line = cesiumHelper.createLine([ { lon: 114.06667, lat: 22.61667 }, { lon: 115.883333, lat: 28.683333 } ], { width: 5, material: Cesium.Color.GREEN }); // 创建面 const polygon = cesiumHelper.createPolygon([ { lon: 114.06667, lat: 22.61667 }, { lon: 115.883333, lat: 28.683333 }, { lon: 108.948021, lat: 34.263161 } ], { material: Cesium.Color.YELLOW.withAlpha(0.5), outlineColor: Cesium.Color.BLACK.withAlpha(0.5) }); // 修改点 cesiumHelper.addOrUpdatePoint(point, { lon: 115.883333, lat: 28.683333 }, { size: 20, color: Cesium.Color.BLUE }); // 修改线 cesiumHelper.addOrUpdateLine(line, [ { lon: 114.06667, lat: 22.61667 }, { lon: 108.948021, lat: 34.263161 } ], { width: 10, material: Cesium.Color.ORANGE }); // 修改面 cesiumHelper.addOrUpdatePolygon(polygon, [ { lon: 114.06667, lat: 22.61667 }, { lon: 115.883333, lat: 28.683333 }, { lon: 108.948021, lat: 34.263161 }, { lon: 104.065735, lat: 30.659462 } ], { material: Cesium.Color.PURPLE.withAlpha(0.5), outline: false }); // 删除实体 cesiumHelper.remove(point); // 删除所有实体 cesiumHelper.removeAll(); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值