jiegiser博客

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

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

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

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

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

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

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