jiegiser博客

【代码】分享一个 CesiumJS 波纹线性雷达扫描。

这是一个非常强大的工具，号称语言的粘合剂，当一个请求发给 MapServer之后，它会使用请求的 URL 中传递的信息和 Mapfile，创建一个请求的地图的图像请求可以返回图例，标尺，参考地图及 CGI 传递的变量值。Perl, Python, Ruby 等语言借助 SWIG 来生成不同的高级语言的接口，统一入口是通过 mapscript.i 来生成不同高级语言的 API 接口供调用，而 PHP 不使用 SWIG，直接使用 PHPMapScript 进行API 调用；用于控制对数据的栅格或矢量输出。

SWIG 是一个软件开发工具，是一个 封装 C/C++ 动态库供其他编程语言调用的神器。使用它可以简化不同语言与与 C/C++ 语言的交互。简单点说，SWIG 是一个编译器，它以 C/C++的声明为输入，创建从其他语言包括常见的脚本语言如 Javascript、Perl、PHP、Python、Tcl 和 Ruby。支持的语言列表还包括非脚本语言，如 C#，D，Go language，Java，包括 Android，Lua，OCaml，Octave，Scilab 和 R。还支持几种解释和编译的 Scheme

Tilelive 本身不是一个服务器，而是一个后端框架，用于处理来自不同来源的不同格式的瓦片。Tilelive 其实在整个 Mapbox 瓦片体系里面占着比较重要的地位。看 Tilelive 的实现和用法，有点像设计模式中的“适配器模式”。只要按照 Tilelive 的设计，实现 Tilelive 提供的标准函数，可以利用 Tilelive 的一些方法，实现各个数据源的数据互导；他其实就是一个通过输入不同的数据格式，通过插件转换，转换适配不同使用场景的矢量瓦片的格式；tilelive 的应用非常广。输入信息

CesiumForUnreal 本地矢量文件的加载，支持 shp/geojson 等常用格式

基于 Cesium 的流体仿真框架，可结合地形数据实时计算洪水蔓延路径、淹没范围及水流速度。例如，山区行洪模拟能预测洪水在山谷中的动态扩散，帮助制定疏散方案。​​技术支撑​​：通过 GPU 加速解算浅水方程，叠加地形坡度、土壤渗透率等参数，实现高精度灾害推演。本示例基于Cesium 的流体仿真框架，采用网格化方法进行计算流体方向，并增加了逼真水面效果；模拟暴雨场景下的城市排水系统负荷，可视化水流在街道中的流动路径，辅助优化管网布局和应急响应策略。

前端监控 SDK 技术方案设计及关键点实现

Cesium for Unreal 源码编译

我们在 Cesium 自定义几何体一般有两种方式，一种是通过直接使用 Primitive 来实现，另外一种就是 DrawCommand 来扩展；++ i) {{#endif{一个简单的需求，如果我们想通过 uniform 传入 time 来不断的改变每个顶点的颜色；虽然说 Primitive 定义集合体的方式可以通过自定义 Appearance 来修改着色器，但是 API 并不支持自定义传入 uniform 值等；

数据可视化是一门学科数据可视化与数据和视觉有关数据可视化简单理解，就是将数据转换成易于人员辨识和理解的视觉表现形式，如各种 2D 图表、3D 图表、地图、矢量图等等，随着技术的不断进步，数据可视化的边界也在不断扩大；数据可视化起源于20 世纪 60 年代诞生的计算机图形学，计算机图形学广泛应用于各个领域，深刻影响和改变着我们的生活。

文章目录功能介绍效果截图功能介绍该例子主要通过自定义 shader 实现 od 线展示的效果；用于展示轨迹交通线、物流线等；图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型（√）geoserver 结合实现属性查询（√）geoserver 结合实现空间查询（√）地下模式（√）单体化 / 倾斜模型分户单体化（√）缓冲区分析（√）粒子特效视频融合（√）Cesium 点聚合（√）点线面编辑多视角轨迹回放（√）可视域分析（√

文章目录效果截图功能介绍效果截图先上截图：功能介绍该例子主要通过自定义 shader 实现雷达、环形扫描线等效果；一般智慧城市等都需要类似炫酷效果。图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型（√）geoserver 结合实现属性查询（√）geoserver 结合实现空间查询（√）地下模式（√）单体化 / 倾斜模型分户单体化（√）缓冲区分析（√）粒子特效视频融合（√）Cesium 点聚合（√）点线面编辑多视角

文章目录效果截图功能介绍效果截图先上截图：功能介绍该例子主要通过自定义 shader 实现 od 线展示的效果；用于展示轨迹交通线、物流线等；图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型（√）geoserver 结合实现属性查询（√）geoserver 结合实现空间查询（√）地下模式（√）单体化 / 倾斜模型分户单体化（√）缓冲区分析（√）粒子特效视频融合（√）Cesium 点聚合（√）点线面编辑多视角轨迹回

文章目录效果截图功能介绍实现思路实现步骤效果截图先上截图：功能介绍通视分析是指以某一点为观察点，研究某一区域通视情况的地形分析。用户在模型上选取任意两点之间是否可以互相可见的技术方法，主要用于判断任意两点之间能否通视；图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型（√）geoserver 结合实现属性查询（√）geoserver 结合实现空间查询（√）地下模式（√）单体化 / 倾斜模型分户单体化（√）缓冲区分析（√）粒

文章目录效果截图功能介绍实现思路效果截图先上截图：功能介绍一般我们做一些大屏的三维项目，需要用到场景的暗角处理。比如中间透明，四周暗角这种。实现也可以通过css进行压盖；本篇是通过后期处理增加暗角效果。图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型（√）geoserver 结合实现属性查询（√）geoserver 结合实现空间查询（√）地下模式（√）单体化 / 倾斜模型分户单体化（√）缓冲区分析（√）粒子特效视频融合

文章目录效果截图功能介绍实现思路对应 API牛刀小试实战雾特效效果截图先上截图：功能介绍cesium 中提供了postProceSsstagge接口，能在三维场景中添加后期渲染效果，比如调整整个场景的明亮度、处理暗角、雾、雨等特效。本篇通过 PostProcessStage 实现一个雾的特效效果。图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型（√）geoserver 结合实现属性查询（√）geoserver 结合实现空间查询

文章目录效果截图功能介绍实现思路实现步骤封装 SunShineAnalysis 类使用其他设置效果截图先上截图：功能介绍基于 React hooks + Typescript + Cesium 实现结合 echart 进行图表展示（两种方式）并封装对应组件主要用于项目中一些坐标点的信息展示等。图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型（√）geoserver 结合实现属性查询（√）geoserver 结合实现空间查询（√

文章目录效果截图功能介绍实现思路实现步骤封装组件效果截图先上截图：可交互高效渲染（不可交互）功能介绍基于 React hooks + Typescript + Cesium 实现结合 echart 进行图表展示（两种方式）并封装对应组件主要用于项目中一些坐标点的信息展示等。图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型（√）geoserver 结合实现属性查询（√）geoserver 结合实现空间查询（√）地下模式

文章目录效果截图功能介绍实现思路实现步骤封装 PolylineTrailMaterialProperty 材质使用尾迹线材质效果截图先上截图：功能介绍基于 React hooks + Typescript + Cesium 实现泛光尾迹线；主要是通过这种动态数据来展示一些有流动流向的数据，比如电力行业的流向以及道路等方向。图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型（√）geoserver 结合实现属性查询（√）geoser

文章目录效果截图功能介绍实现思路实现步骤使用效果截图先上截图：功能介绍基于 React hooks + Typescript + Cesium 实现矢量白膜自定义shader；本例子是通过不修改源码的基础之上，自定义shader 实现的效果。图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型（√）geoserver 结合实现属性查询（√）geoserver 结合实现空间查询（√）地下模式（√）单体化 / 倾斜模型分户单体化（√

文章目录效果截图功能介绍实现思路实现步骤效果截图先上截图：功能介绍基于 React hooks + Typescript + Cesium 实现矢量白膜自定义shader；本例子是通过不修改源码的基础之上，自定义shader 实现的效果。图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型（√）geoserver 结合实现属性查询（√）geoserver 结合实现空间查询（√）地下模式（√）单体化 / 倾斜模型分户单体化（√）

文章目录效果截图功能介绍实现思路实现步骤效果截图先上截图：功能介绍基于 React hooks + Typescript + Cesium 实现背景清空及设置背景图；可以通过设置地球所在的背景图，美化显示效果；以及通过设置背景清空，达到无球模式。图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型（√）geoserver 结合实现属性查询（√）geoserver 结合实现空间查询（√）地下模式（√）单体化 / 倾斜模型分户单体化

文章目录效果截图功能介绍实现思路实现步骤效果截图先上截图：功能介绍基于 React hooks + Typescript + Cesium + leaflet 实现鹰眼控件；并封装对应 CesiumOverviewMapControl 类；图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型（√）geoserver 结合实现属性查询（√）geoserver 结合实现空间查询（√）地下模式（√）单体化 / 倾斜模型分户单体化（√）

文章目录效果截图功能介绍实现思路实现步骤安装依赖封装 CesiumOverviewMapControl 类事件监听整体代码使用CesiumOverviewMapControl 类效果截图先上截图：功能介绍基于 React hooks + Typescript + Cesium + leaflet 实现鹰眼控件；并封装对应 CesiumOverviewMapControl 类；图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型（√）

文章目录效果截图功能介绍实现思路实现步骤封装旋转方法使用方法效果截图先上截图：功能介绍基于 React hooks + Typescript + Cesium 实现绕点宣战；并封装对应方法；图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型（√）geoserver 结合实现属性查询（√）geoserver 结合实现空间查询（√）地下模式（√）单体化 / 倾斜模型分户单体化（√）缓冲区分析（√）粒子特效视频融合（√）Ce

文章目录效果截图功能介绍实现思路实现步骤绘制面限高区域绘制更新 height，对应更新 primitive 位置效果截图先上截图：功能介绍基于 React hooks + Typescript + Cesium 实现控高分析；并封装对应 HeightLimite 类；图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型（√）geoserver 结合实现属性查询（√）geoserver 结合实现空间查询（√）地下模式（√）单体化

文章目录效果截图功能介绍实现思路实现步骤着色器部分添加 postProcess封装 Skyline 类使用效果截图先上截图：功能介绍本例子基于 React hooks + Typescript + Cesium 实现场景出图、放大、缩小等工具集；图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型（√）geoserver 结合实现属性查询（√）geoserver 结合实现空间查询（√）地下模式（√）单体化 / 倾斜模型分户单体化

文章目录效果截图功能介绍实现思路实现步骤放大、缩小全屏场景出图二三维视角切换指北效果截图先上截图：功能介绍本例子基于 React hooks + Typescript + Cesium 实现场景出图、放大、缩小等工具集；图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型（√）geoserver 结合实现属性查询（√）geoserver 结合实现空间查询（√）地下模式（√）单体化 / 倾斜模型分户单体化（√）缓冲区分析（√）

文章目录效果截图实现思路实现步骤效果截图先上截图：图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型（√）geoserver 结合实现属性查询（√）geoserver 结合实现空间查询（√）地下模式（√）单体化 / 倾斜模型分户单体化（√）缓冲区分析（√）粒子特效视频融合（√）Cesium 点聚合（√）点线面编辑多视角轨迹回放（√）可视域分析（√）开挖分析（√）双屏对比（两个 cesium 窗体，同步窗口信息）矢

文章目录效果截图功能介绍实现思路实现步骤效果截图先上截图：功能介绍本例子基于 React hooks + Typescript + Cesium 实现模型剖切分析；并通过封装对应的 Clipping3D 类，实现可以选择 x、y、z 、以及自定义线剖切模型进行分析查看模型的剖面；图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型（√）geoserver 结合实现属性查询（√）geoserver 结合实现空间查询（√）地下模式（√

文章目录效果截图功能介绍实现思路实现步骤根据数据获取裁剪面 modelMatrix创建 clippingPlanes添加鼠标事件封装 Clipping3D 类使用 Clipping3D 类效果截图先上截图：功能介绍本例子基于 React hooks + Typescript + Cesium 实现模型剖切分析；并通过封装对应的 Clipping3D 类，实现可以选择 x、y、z 、以及自定义线剖切模型进行分析查看模型的剖面；图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐

文章目录效果截图功能介绍实现思路实现步骤鼠标事件绑定获取视椎体参数ShadowMap后期处理——核心绘制辅助框封装 ViewShed3D 类使用 ViewShed3D效果截图先上截图：功能介绍本例子基于 React hooks + Typescript + Cesium 实现可视域分析；并通过封装对应的 ViewShed3D 类，通过用户选择起点以及终点，进行绘制可视域分析结果；图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型（√）

文章目录效果截图功能介绍实现思路实现步骤获取数据绘制反选遮罩层效果截图先上截图：功能介绍本例子基于 React hooks + Typescript + Cesium 实现绘制反选遮罩层；并通过封装对应的组件，完成反选遮罩层的绘制；图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型（√）geoserver 结合实现属性查询（√）geoserver 结合实现空间查询（√）地下模式（√）单体化 / 倾斜模型分户单体化（√）缓冲区

文章目录效果截图功能介绍实现思路实现步骤自定义 useDrawWaterPrimitive hooksuseDrawWaterPrimitive 使用效果截图先上截图：功能介绍本例子基于 React hooks + Typescript + Cesium 实现绘制透明动态水面；通过自定义 hooks —— useDrawWaterPrimitive 进行绘制透明水面；图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型（√）geose

文章目录效果截图功能介绍实现思路实现步骤定义 Material封装 ElevationGradient 组件效果截图先上截图：功能介绍本例子基于 React hooks + Typescript + Cesium 实现等高线分析；主要是通过定义 Material 来实现；图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型（√）geoserver 结合实现属性查询（√）geoserver 结合实现空间查询（√）地下模式（√）单

文章目录效果截图功能介绍实现思路效果截图先上截图：功能介绍本例子基于 React hooks + Typescript + Cesium 实现视频投放功能；可以通过 dat.GUI 控制视椎体的参数并获取视频投放相关参数。图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型（√）geoserver 结合实现属性查询（√）geoserver 结合实现空间查询（√）地下模式（√）单体化 / 倾斜模型分户单体化（√）缓冲区分析（√）

文章目录效果截图功能介绍实现思路实现步骤安装 react-dat-gui 库创建四棱锥根据参数面板更新视椎体参数整体代码效果截图先上截图：功能介绍本例子基于 React hooks + Typescript + Cesium 绘制四棱锥（视椎体）；通过 dat.GUI 控制视椎体的参数并获取视椎体相关参数。图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型（√）geoserver 结合实现属性查询（√）geoserver 结合实现

文章目录效果截图功能介绍实现思路实现步骤生成数据封装 useCreateHeatMap 自定义 hooks使用自定义 hooks 创建热力图图层效果截图先上截图：功能介绍本例子基于 React hooks + Typescript + Cesium + heatmap.js 实现热力图；通过自定义 hooks 实现热力图图层的封装；结合 heatmap.js 实现热力图自定义 hooks 的封装。图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，

文章目录效果截图功能介绍实现思路自定义绘图 hooks: useDrawHandler效果截图先上截图：功能介绍本例子基于 React hooks + Typescript + Cesium 地形开挖分析；通过自定义 hooks 实现绘图事件的封装；实现绘图各个声明周期：drawStart、drawEnd 等事件的监听；以及实现 TerrainClipPlan 地形裁剪的 hooks。图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型

文章目录效果截图功能介绍实现思路实现步骤绘制飞行数据设置动画起始时间以及播放速度创建运动物体以及飞行轨迹根据用户选择设置跟随视角第一视角设置控制飞行：开始、暂停、结束封装 FlyManager 组件FlyManager 组件使用效果截图先上截图：功能介绍本例子基于 React hooks + Typescript + Cesium 实现多视角轨迹回放；实现飞行管理可以选择飞行视角：第一人称、第三人称、上帝视角等，飞行路线可以自己进行绘制，然后进行轨迹回放；并通过开始、暂停、结束、清除等功能，管理轨