- 博客(147)
- 资源 (12)
- 收藏
- 关注
RSS订阅
原创 基于 React hooks + Typescript + Cesium 的 三维 webgis 实战系列教程
后续将分享一些下面的功能：图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型（√）geoserver 结合实现属性查询（√）geoserver 结合实现空间查询（√）地下模式（√）单体化 / 倾斜模型分户单体化（√）缓冲区分析（√）粒子特效视频融合Cesium 点聚合点线面编辑多视角轨迹回放通视分析开挖分析双屏对比（两个 cesium 窗体，同步窗口信息）矢量白膜自定义shader 系列cesium 与 echar
2020-12-17 17:13:44
1881
4
原创 空域容量评估
空域容量是指在保证运行安全的前提下，特定空域在单位时间内能够容纳的最大航空器架次数。其定义涉及冲突水平、性能指标突变、航路网络承载能力及无人机放行率等因素。评估方法包括基于数据模型、管制员工作负荷、计算机仿真和数据驱动的多种方式。评估框架涵盖低空空域分类、航路设计、机场布局、容量影响因素及容量评估等内容。运行间隔模型和空域容量模型的构建是评估的核心，涉及碰撞风险建模、速度误差分析和容量公式推导。评估方法体系包括基于阈值、几何拓扑和控制变量的方法。实现思路通过查询禁飞区、障碍物区域和可用网格，结合机型大小计算
2025-05-23 09:30:22
54
原创 无人机飞行间隔安全智能评估、安全风险评估
无人机空中安全飞行评估需结合改进碰撞模型、蒙特卡洛仿真、安全间隔反推及动态避障策略，通过多机型分类与实时数据融合，实现从理论建模到实际部署的全流程管控，为城市低空密集飞行提供安全保障。评估内容包括无人机之间及无人机与有人机之间的安全间隔评估，以及飞行风险等级评估和低空飞行风险地图生成。技术手段包括碰撞风险模型构建、参数计算与仿真、安全间隔确定及动态评估与实时避障。通过改进Reich模型、Event模型等，结合蒙特卡洛仿真和反推法，计算最小安全间隔，并生成多机型间隔矩阵。实时数据融合和避障策略确保飞行安全，最
2025-05-23 09:00:49
510
原创 MapServer Mapfile 配置及 MapScript 相关开发
这是一个非常强大的工具，号称语言的粘合剂，当一个请求发给 MapServer之后，它会使用请求的 URL 中传递的信息和 Mapfile，创建一个请求的地图的图像请求可以返回图例，标尺，参考地图及 CGI 传递的变量值。Perl, Python, Ruby 等语言借助 SWIG 来生成不同的高级语言的接口，统一入口是通过 mapscript.i 来生成不同高级语言的 API 接口供调用，而 PHP 不使用 SWIG，直接使用 PHPMapScript 进行API 调用；用于控制对数据的栅格或矢量输出。
2025-05-19 13:42:51
51
原创 SWIG 和 JNA / JNI 等 C 接口封装工具及进行 C 接口的封装
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
2025-04-30 16:13:10
263
原创 MapBox/TileLive 技术解析
Tilelive 本身不是一个服务器，而是一个后端框架，用于处理来自不同来源的不同格式的瓦片。Tilelive 其实在整个 Mapbox 瓦片体系里面占着比较重要的地位。看 Tilelive 的实现和用法，有点像设计模式中的“适配器模式”。只要按照 Tilelive 的设计，实现 Tilelive 提供的标准函数，可以利用 Tilelive 的一些方法，实现各个数据源的数据互导；他其实就是一个通过输入不同的数据格式，通过插件转换，转换适配不同使用场景的矢量瓦片的格式；tilelive 的应用非常广。输入信息
2025-04-30 16:10:13
94
原创 Node 原生开发-SWIG 与 Node 开发工程化
Javascript 毕竟是脚本语言，在一些计算密集型，实时性要求高的产品中，采用 Native(主要是通过 c++)实现这些逻辑显得尤为重要。本文章主要讲解如何基于Swig来实现工程化的开发。
2025-04-17 09:55:40
646
原创 视频号-地图动画特效实现方案调研
又一个 AE 动画实现的视频，可以采用 MapBoxGL 或者 MapLibre 结合 ThreeJS 来实现，通过 threebox 集合起来，将 ThreeJS 渲染能力融合到地图中。AE 或者 UE 实现的类动画，可以采用 CesiumJS 粒子效果或者 ThreeJS + MapboxGL 来做，还原度不高，模型炸裂的这种效果难做。上面效果很明显采用 AE 来实现的效果，用 Web 技术手段可以采用 ThreeJS + TweenJS 来实现，控制帧动画顺序来渲染图块，还原度不高。
2025-04-13 14:20:07
409
原创 分享-职业生涯前半个世纪的人生教训
该文章由 David A. Patterson 撰写，并于 2024 年 10 月 10 日发布在 Communications of the ACM 上。Patterson 通过分享自己职业生涯前半段的生活经验，总结出了 16 条关于人生和职业的宝贵教训。David Patterson 成就无数，他是 2017 年图灵奖得主，也是 RISC 指令、磁盘冗余阵列 RAID、工作站网络 NOW 三项重大技术的奠基人；
2025-04-13 14:16:58
577
原创 前端快速入门
JavaScript 技术概览 - JavaScript | MDNJavaScript 由三个主要部分组成，分别是 ECMAScript、文档对象模型（DOM）和浏览器对象模型（BOM）。ECMAScript：ECMAScript 是 JavaScript 的核心部分，定义了该语言的基本语法、变量类型、关键字、操作符和控制语句等。文档对象模型（DOM）：DOM 是 JavaScript 中的文档对象模型，它是一种接口标准，用于描述和处理网页内容。
2025-04-13 14:08:07
676
原创 WebGIS 学习路线分享
在如今互联网越来越“卷”，就业形势严峻下，我们如何破局，成为优秀的程序员？技术热情高好奇心重责任心强敏感度高善于总结提效最后，我们前端开发者触及的领域不仅仅是浏览器，还可以做后端，做桌面端，做手机端，做小程序端，前端开发者的性价比越来越高，越来越重要；大前端的时代到来。可谓是时代造英雄。
2025-04-13 14:04:36
365
原创 CesiumForUnreal 本地矢量文件的加载，支持 shp/geojson 等常用格式
CesiumForUnreal 本地矢量文件的加载，支持 shp/geojson 等常用格式
2025-04-11 17:47:24
598
原创 Cesium 流体模拟（复刻）
基于 Cesium 的流体仿真框架，可结合地形数据实时计算洪水蔓延路径、淹没范围及水流速度。例如，山区行洪模拟能预测洪水在山谷中的动态扩散，帮助制定疏散方案。技术支撑：通过 GPU 加速解算浅水方程，叠加地形坡度、土壤渗透率等参数，实现高精度灾害推演。本示例基于Cesium 的流体仿真框架，采用网格化方法进行计算流体方向，并增加了逼真水面效果；模拟暴雨场景下的城市排水系统负荷，可视化水流在街道中的流动路径，辅助优化管网布局和应急响应策略。
2025-04-09 09:05:35
387
1
原创 Cesium 高性能扩展 DrawCommand 解析
我们在 Cesium 自定义几何体一般有两种方式，一种是通过直接使用 Primitive 来实现，另外一种就是 DrawCommand 来扩展；++ i) {{#endif{一个简单的需求，如果我们想通过 uniform 传入 time 来不断的改变每个顶点的颜色；虽然说 Primitive 定义集合体的方式可以通过自定义 Appearance 来修改着色器，但是 API 并不支持自定义传入 uniform 值等；
2022-10-03 19:08:11
1674
原创 WebGL + ThreeJS 初探
数据可视化是一门学科数据可视化与数据和视觉有关数据可视化简单理解，就是将数据转换成易于人员辨识和理解的视觉表现形式，如各种 2D 图表、3D 图表、地图、矢量图等等，随着技术的不断进步，数据可视化的边界也在不断扩大；数据可视化起源于20 世纪 60 年代诞生的计算机图形学，计算机图形学广泛应用于各个领域，深刻影响和改变着我们的生活。
2022-09-30 07:56:22
786
原创 Cesium 实现光围栏效果
文章目录功能介绍效果截图功能介绍该例子主要通过自定义 shader 实现 od 线展示的效果；用于展示轨迹交通线、物流线等；图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型（√）geoserver 结合实现属性查询（√）geoserver 结合实现空间查询（√）地下模式（√）单体化 / 倾斜模型分户单体化（√）缓冲区分析（√）粒子特效视频融合（√）Cesium 点聚合（√）点线面编辑多视角轨迹回放（√）可视域分析（√
2021-12-15 10:43:06
2287
原创 06-React hooks 源码分析
为什么需要 hookReact 文档中也有说明了 Hooks 的提出主要是为了解决什么问题的：组件之间复用状态逻辑很难。就以前 React 为了将一个组件的逻辑抽离复用，不和渲染代码混用在一个 class 的做法，比较推介的是用高阶组件，将状态逻辑抽离出来，通过不同的样式组件传入带有状态逻辑的高阶组件中，增强样式组件的功能，从而达到复用逻辑的功能。再早期就会使用 mixin 去实现。缺点：增加嵌套层级，代码会更加难以理解。复杂组件变得难以理解在使用 class 组件的时候，我们少不了在生命周
2021-11-22 08:56:44
1128
原创 05-React 状态更新
在 React 中触发更新的方式主要有以下几种：ReactDOM.render、setState、forUpdate 以及 hooks 中的 useState 等，关于 hooks 的后面会专门写一篇文章分析。
2021-11-12 08:28:59
1776
原创 04-React Render 阶段
render 阶段主要做什么在 render 阶段，React 可以根据当前可用的时间片处理一个或多个 fiber 节点，并且得益于 fiber 对象中存储的元素上下文信息以及指针域构成的链表结构，使其能够将执行到一半的工作保存在内存的链表中。当 React 停止并完成保存的工作后，让出时间片去处理一些其他优先级更高的事情。之后，在重新获取到可用的时间片后，它能够根据之前保存在内存的上下文信息通过快速遍历的方式找到停止的 fiber 节点并继续工作。由于在此阶段执行的工作并不会导致任何用户可见的更改，因为
2021-11-06 16:56:06
879
原创 03-React Diff 算法
Diff 算法是什么diff 是通过 JS 层面的计算，来对比两个虚拟 DOM 中变化的部分，并只针对该部分进行原生 DOM 操作，而非重新渲染整个页面，从而办证了每次操作更新后页面的高效渲染。在 React 中 diff 算法通过对比两个虚拟 DOM ，返回一个 patch 对象，即补丁对象，在通过特定的操作解析 patch 对象，完成页面的重新渲染。在上一节的 Fiber 架构提到，在 render 阶段更新 Fiber 节点时，我们会调用 reconcileChildFibers 对比 cu
2021-11-03 11:29:01
604
原创 02-react Fiber 架构
Fiber 是对 React 核心算法的重构，facebook 团队使用两年多的时间去重构 React 的核心算法，在React16 以上的版本中引入了 Fiber 架构；为什么需要 Fiber在 React15 及以前，Reconciler 采用递归的方式创建虚拟 DOM，递归过程是不能中断的。如果组件树的层级很深，递归会占用线程很多时间，造成卡顿。为什么会造成卡顿，我们需要了解浏览器在一帧中都做了什么？浏览器一帧会干什么我们知道，在浏览器中，页面是一帧一帧绘制出来的，渲染的帧率与设备的刷
2021-10-27 09:04:01
487
原创 01-react 渲染流程
先上一张图，这是 React 团队作者 Dan Abramov 画的一张生命周期阶段图，可以看出 React 的生命周期主要分为两个阶段：render 阶段和 commit 阶段。其中 commit 阶段又可以细分为 pre-commit 阶段和 commit 阶段；react 16 架构React 16 是重构了 React 15 的一个大版本；其相比 React 15 架构增加了 SchedulerReact16 架构可以分为三层：Scheduler（调度器）—— 调度任务的优先级，高优
2021-10-26 09:12:38
1287
原创 00 - react 18 相关
首先现在通过 react 17.0.2 创建新项目，会直接提示需要更新 api：
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人