jiegiser博客

主要做webgis研发。包括：cesium、openlayers、arcgis api、leaflet、mapbox、arcgis engine 等等。有成都的相关坑位可以联系我

原创基于 React hooks + Typescript + Cesium 的三维 webgis 实战系列教程

后续将分享一些下面的功能：图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型（√）geoserver 结合实现属性查询（√）geoserver 结合实现空间查询（√）地下模式（√）单体化 / 倾斜模型分户单体化（√）缓冲区分析（√）粒子特效视频融合Cesium 点聚合点线面编辑多视角轨迹回放通视分析开挖分析双屏对比（两个 cesium 窗体，同步窗口信息）矢量白膜自定义shader 系列cesium 与 echar

2020-12-17 17:13:44 1759 4

原创 Cesium 高性能扩展 DrawCommand 解析

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

2022-10-03 19:08:11 1228 1

原创 WebGL + ThreeJS 初探

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

2022-09-30 07:56:22 644

原创 Cesium 实现光围栏效果

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

2021-12-15 10:43:06 2003

原创 06-React hooks 源码分析

为什么需要 hookReact 文档中也有说明了 Hooks 的提出主要是为了解决什么问题的：组件之间复用状态逻辑很难。就以前 React 为了将一个组件的逻辑抽离复用，不和渲染代码混用在一个 class 的做法，比较推介的是用高阶组件，将状态逻辑抽离出来，通过不同的样式组件传入带有状态逻辑的高阶组件中，增强样式组件的功能，从而达到复用逻辑的功能。再早期就会使用 mixin 去实现。缺点：增加嵌套层级，代码会更加难以理解。复杂组件变得难以理解在使用 class 组件的时候，我们少不了在生命周

2021-11-22 08:56:44 821

原创 05-React 状态更新

在 React 中触发更新的方式主要有以下几种：ReactDOM.render、setState、forUpdate 以及 hooks 中的 useState 等，关于 hooks 的后面会专门写一篇文章分析。

2021-11-12 08:28:59 1649

原创 04-React Render 阶段

render 阶段主要做什么在 render 阶段，React 可以根据当前可用的时间片处理一个或多个 fiber 节点，并且得益于 fiber 对象中存储的元素上下文信息以及指针域构成的链表结构，使其能够将执行到一半的工作保存在内存的链表中。当 React 停止并完成保存的工作后，让出时间片去处理一些其他优先级更高的事情。之后，在重新获取到可用的时间片后，它能够根据之前保存在内存的上下文信息通过快速遍历的方式找到停止的 fiber 节点并继续工作。由于在此阶段执行的工作并不会导致任何用户可见的更改，因为

2021-11-06 16:56:06 735

原创 03-React Diff 算法

Diff 算法是什么diff 是通过 JS 层面的计算，来对比两个虚拟 DOM 中变化的部分，并只针对该部分进行原生 DOM 操作，而非重新渲染整个页面，从而办证了每次操作更新后页面的高效渲染。在 React 中 diff 算法通过对比两个虚拟 DOM ，返回一个 patch 对象，即补丁对象，在通过特定的操作解析 patch 对象，完成页面的重新渲染。在上一节的 Fiber 架构提到，在 render 阶段更新 Fiber 节点时，我们会调用 reconcileChildFibers 对比 cu

2021-11-03 11:29:01 422

原创 02-react Fiber 架构

Fiber 是对 React 核心算法的重构，facebook 团队使用两年多的时间去重构 React 的核心算法，在React16 以上的版本中引入了 Fiber 架构；为什么需要 Fiber在 React15 及以前，Reconciler 采用递归的方式创建虚拟 DOM，递归过程是不能中断的。如果组件树的层级很深，递归会占用线程很多时间，造成卡顿。为什么会造成卡顿，我们需要了解浏览器在一帧中都做了什么？浏览器一帧会干什么我们知道，在浏览器中，页面是一帧一帧绘制出来的，渲染的帧率与设备的刷

2021-10-27 09:04:01 376

原创 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 1136

原创 00 - react 18 相关

首先现在通过 react 17.0.2 创建新项目，会直接提示需要更新 api：![image.png](https://img-blog.csdnimg.cn/img_convert/bad51c755c14249c83849fcea625ca9d.png#clientId=ubf23d113-0a94-4&from=paste&height=51&id=u03d4414c&margin=[object Object]&name=image.png&orig

2021-10-25 08:41:31 215

原创 threejs + mapboxgl 实现炫酷动态立体墙效果

前言今天实现一个三维电子围栏效果；本例子是基于前面文章搭建的私库进行开发。在三维渲染中，有可能会遇到需要在地图上展示一个围栏效果，来展示一个区域的与众不同，或者；在预警方面常用到电子围栏来进行监控人员；本文也是借鉴 maptalks 中的立体墙的效果来实现的。之前在 Cesium 也实现过类似的效果，可以查看这个视频接下来我们实现一个动态立体墙的效果；围栏图层开发新建一个RippleWall 图层，代码如下：import { BufferGeometry, Clock, Color, Do

2021-10-04 09:41:26 3128 1

原创 threejs + mapboxgl 实现粒子上升效果

前言这个也是我们实现的第一个特效，粒子上升图层；本例子是基于前面文章搭建的私库进行开发。在三维渲染中，有可能会遇到需要在地图上展示一个粒子上升的效果来表达出，比较炫酷的效果，比如可以将粒子的图片设计成 xxx 产量，在地图上进行展示；接下来我们实现一个自己的粒子上升效果；粒子上升图层开发新建一个FlyPatrial 图层，代码如下：import { BufferGeometry, Clock, Color, DoubleSide, Float32BufferAttribute, Mesh, S

2021-09-12 11:21:29 1932

原创 threejs + mapboxgl 实现能量护盾效果

前言这个也是我们实现的第一个特效，防护罩图层；本例子是基于前面文章搭建的私库进行开发。在三维渲染中，有可能会遇到需要在地图上展示一个防护罩来表达出，一个区域的范围等等，我们可能想到的防护罩如下效果：接下来我们实现一个自己的防护罩效果；防护罩图层开发新建一个blitzballLayer 图层，代码如下：import { Map } from 'mapbox-gl'import Layer from './layer'// @ts-ignoreimport ShieldFS from '..

2021-09-08 17:06:12 1813 1

原创 threejs + mapboxgl 版 Hello World — 搭建私有仓库、发布私有包；实现加载一个 threejs 中的球

前言这篇文章我们将会介绍，如何在自己本地建立私有仓库，并发布自己的 npm 包。前面文章我也介绍，我们需要发布一个基于 ThreeJS 的一个三维特效库，然后在 mapboxgl 中去添加 customlayer；接下来我们就开始吧；使用 verdaccio 搭建私有库全局安装 verdaccio首先需要全局安装 verdaccionpm install -g verdaccio然后，运行verdaccio，测试是否安装成功：打开 http://localhost:4873出现如图所示界面

2021-09-07 11:48:31 570

原创基本项目搭建

首先我们需要搭建一个基于 React 的一个项目用开始我们的实战系列，后期所有的功能都是基于 react 的一个项目来实现。由于后面需要支持多坐标系，需要进行修改 mapboxgl 的源码，以及实现对应的功能，我们需要手动封装两个库：一个是基于 maoboxgl 进行封装一些基本的功能库，另一个就是基于 mapboxgl 的 customLayer 进行封装 threejs 的一些动效库；接下来我们开始。创建项目首先通过 react 脚手架创建一个项目，输入命令：npx create-react-ap

2021-09-04 11:39:41 240

原创基于 mapboxgl+threejs+react+ts 三维 webgis 实战系列教程

全网唯一基于 mapboxgl+threejs+react+ts 的三维 webgis 实战系列教程：后续将分享一些下面的功能：基本项目搭建；mapboxgl 支持多坐标系；geojson 建筑面拉升以及纹理贴图；流光线图层；天空盒图层；三维模型（obj、fbx、gltf）加载，并编辑位置；飞线、防护罩等效果；注意有 √ 的功能已经全部实现，可在专栏找到对应的文章以及代码详解。目前正在整理开发中，后续会加入更过内容。敬请期待…...

2021-09-04 10:19:52 1300 1

原创基于 React hooks + Typescript + Cesium 实现雷达、环形扫描线

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

2021-06-08 17:35:55 772

原创基于 React hooks + Typescript + Cesium 实现 OD 线展示

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

2021-06-06 12:16:24 450

原创基于 React hooks + Typescript + Cesium 实现通视分析

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

2021-05-10 16:46:59 421

原创 arcgis api for js 4.19 尝鲜（React + ts+ arcgis api）

前言前段时间看到 arcgis api 更新 4.19 版本，而且全面拥抱 ES Modules 开发模式，这无疑是每个 giser 的福音啊；之前的版本基于 dojo 的那种笨重前端框架开发，学习成本大；基于 AMD 模块加载，真的是让人抓狂；虽然很多人也通过 webpack 修改加载策略，但是对于前端小白来说，配置一个 arcgis api 开发环境真的是难。。接下来我们来看看这个新版本；搭建开发环境初始化项目首先我们搭建一个基本的开发环境，标题也说了，是基于 react + ts + arcg

2021-05-09 10:34:07 1263 3

原创基于 React hooks + Typescript + Cesium 场景暗角效果

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

2021-05-02 10:22:10 375

原创基于 React hooks + Typescript + Cesium 详解 PostProcessStage 后期处理并实战雾效果

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

2021-04-11 15:00:36 525

原创基于 React hooks + Typescript + Cesium 实现日照分析并封装对应 SunShineAnalysis 类

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

2021-04-09 17:10:29 1048

原创基于 React hooks + Typescript + Cesium 实现结合 echart 进行图表展示（两种方式）并封装对应组件

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

2021-04-05 14:27:28 488

原创基于 React hooks + Typescript + Cesium 实现 billboard 信息展示

文章目录效果截图功能介绍效果截图先上截图：功能介绍基于 React hooks + Typescript + Cesium 实现 billboard 信息展示；主要用于项目中一些坐标点的信息展示等。图层管理（√）dom 点扩散（√）轨迹回放（√）测量（√）坐标拾取（√）加载模型数据，拾取三维模型（√）geoserver 结合实现属性查询（√）geoserver 结合实现空间查询（√）地下模式（√）单体化 / 倾斜模型分户单体化（√）缓冲区分析（√）粒子特效视频融合（√

2021-03-18 16:51:20 408

原创基于 React hooks + Typescript + Cesium 实现泛光尾迹线

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

2021-03-16 19:25:56 1031

原创基于 React hooks + Typescript + Cesium 实现分屏显示

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

2021-03-16 18:45:48 879 2

原创 webgl——进入三维世界（模型矩阵、视图矩阵、投影矩阵）（六）

文章目录前言一、视点和视线二、投影矩阵前言本篇继续前面文章来讲解投影矩阵相关内容。一、视点和视线二、投影矩阵

2021-03-11 15:34:14 1534

原创 webgl——图形的基本变换：平移、旋转、缩放并实践类似 threeJS 放大、拖拽效果（五）

文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么？首先需要将世界坐标转换为 webgl 中的坐标 [-1, 1] 的范围内，这会用到缩放、然后在 webgl 中如何放置，放在哪里；我们需要用到平移、旋转等。二、使用步骤1.引入库

2021-03-09 17:34:53 1367 2

原创 webgl——绘制一个旋转的彩色立方体（四）

文章目录前言一、整体代码以及实现效果二、绘制步骤1.构建顶点数据2.通过顶点索引构建立方体总结前言前面文章介绍了如何通过多点来绘制图形，通过建立缓冲区对象，将多个数据传入到缓冲区中；然后 webgl 进行读取缓冲区中的数据进行渲染。上个例子绘制 “F” 的坐标点不是很多；但是如果我们绘制一个立方体。如果还跟之前一样的绘制方式；立方体的每一个面由两个三角形组成，每个三角形有三个顶点，所以每个月需要有六个顶点，那么顶点数据需要有 36 个，我们会发现其实我们只需要用 8 个顶点来进行绘制立方体，但是如何

2021-03-06 18:23:40 955

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

Cesium 实现动态立体墙效果；可以直接复制代码到 cesium sandcastle 中运行查看效果；

基于 React hooks + Typescript + Cesium 的 三维 webgis 实战系列教程数据

arcgis3.x_examples.rar

ol5_example.zip

cesium 可视域分析代码，包含所有代码

convert_obj_three.py

arcgis api for js轨迹移动.模拟行程

arcgis api for js实现动态切换底图（淡入淡出效果）

CSS中文完全参考手册

2017 esri gis大赛个人组试题总结及答案

git版本控制学习

python从入门到精通

空空如也

基于 React hooks + Typescript + Cesium 的三维 webgis 实战系列教程数据