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

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
    评论
以下是一个使用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、付费专栏及课程。

余额充值