WebGIS小智
GIS工程师,架构师一名,B站抖音搜索WebGIS小智可免费学习系列教程,号JLA3002
展开
-
Canvas系列教程(N)绘制组织关系图
所以必须区分父节点和子节点,为了美化绘制效果,我决定将父节点所在的矩形的中线与canvas画布的中线对齐,这样就能保持永远居中,对于子节点来讲,如果有5个子节点,那么就会存在6个缝隙,间隙,所以每个间隙的宽度是。这样一来,我们就可以算出每个子节点矩形的起始位置的横纵坐标,当然纵坐标应当是我们自定义的,竖直方向的间距应当是我们自己自定义的,根据实际情况。为此我将整幅图分成三部分,第一,矩形的绘制,第二,线条的绘制,第三,文字的绘制。那既然子节点的位置和父节点的位置都有了,中间的连接线的绘制也不是什么难事。原创 2023-01-29 01:26:48 · 809 阅读 · 0 评论 -
canvas入门教学(5)运动小球屏保特效与下雪特效渲染
其实这个例子比上一个更为简单,首先我们在生成圆面的时候不必再传各种颜色值了,其次,我们圆面的运动轨迹主要都是在竖直方向,水平方向的步长step几乎为0。另外,雪花的产生也不是毫无条件的随意的产生,当雪花的总数量小于某个值的时候才能产生,当超过这个值的时候将不能再生产雪花。本节我们来学习两个例子,第一个例子是如下图这样的,全屏各色各样的小球随机运动,碰撞到屏幕边缘再反弹回来的特效,我们一步一步带着大家来学习这个canvas应用。接下来我们要做的就是把存放了所有圆面的数组circleArr进行遍历并且渲染,原创 2023-01-09 19:58:39 · 339 阅读 · 0 评论 -
Canvas入门教学(4)动画与碰撞检测
现在看起来一切很完美,但是可能很多新手小伙伴不知道的是setInterval有很大的问题,在不断的重复执行的过程中,setInterval对于帧的渲染不是匀速的,比方说我们现在加快圆的运动速度,就会出现运动一卡一卡的,感觉小球并不是匀速运动的,因此我们在制作动画的时候一般不使用setInterval,而是使用一个支持匀速渲染的api叫做requesAnimationFrame(fun)它的参数是一个函数,它会匀速的执行函数体里面的内容,一般来讲按照每秒60帧的速度。原创 2023-01-07 16:53:46 · 506 阅读 · 0 评论 -
Canvas入门教学(3)图片与文字的绘制
是一个长度为250000的数组,为什么是这样?非常的简单,接下来我们来操作canvas绘制一张图片,用到的主要的api是drawImage(),同时我们也会学习两个重要的函数,图片的像素级别的操作函数,getImageData()和putImageData(),分别是获取指定位置的图片的像素块和放置指定位置的图片。这一句是获取像素图片的核心,它表示,想获取起点坐标为200,200的,宽和高均为250的这一块图片的所有像素点,我们简单的计算一下,宽高均为250一共有多少个像素点?原创 2023-01-02 19:26:25 · 724 阅读 · 0 评论 -
Canvas入门教学(2)基本图形的绘制与方法封装
在绘制基础图形之前我们必须清楚,canvas是非常原生的api,操作非常的基础但也繁琐,你需要向发送指令(命令)的方式去一步一步的告诉canvas你要干什么,他没有成型的封装好的方法供你使用,没有像第三方js库那样好用方便。这样我们就可以随意的绘制线条了,这也是GIS绘制矢量图形的canvas层面的底层原理,当然我这个方法封装的没有那么的细致,实际上应该加很多的判断和规则在里面。基于上面的例子我们是否可以封装一个绘制线条的函数,每次通过几个简单的参数传入,调用这个函数即可画出线条,甚至是复杂的线条。原创 2023-01-01 17:56:16 · 681 阅读 · 0 评论 -
canvas入门教学(1)基本认识与了解
从本文章开始,笔者将带大家从0开始,一点一点慢慢的学习canvas。掌握webgl图形渲染的一些底层的原理和逻辑,方便大家后续更容易理解一些gis框架和原理。canvas本质上是一个html元素,和其他html元素一样,本质上也属于document。canvas翻译过来中文叫做画布,顾名思义canvas的设计者最初是希望人们能够在网页上也有绘画的能力。canvas的用途很广,例如游戏,签名类,地图,图像处理等等领域都需要canvas。要认识canvas,还是要从其基础的属性入手。首先canvas和其他的ht原创 2022-12-06 19:08:34 · 534 阅读 · 0 评论 -
GIS系列(十三)什么是b3dm?详解b3dm
上篇文章我们知道了什么叫gltf,不知道的可以去看一看这篇文章来了解一下什么是b原创 2021-06-17 12:24:11 · 9856 阅读 · 2 评论 -
GIS系列(十一)什么是gltf?详解gltf
老样子,读一下官方的英文介绍:glTF™ (GL Transmission Format) is a royalty-free specification for the efficient transmission and loading of 3D scenes and models by applications. glTF minimizes both the size of 3D assets, and the runtime processing needed to unpack and u原创 2021-06-16 16:02:20 · 3532 阅读 · 0 评论 -
GIS系列(十)对于3d tiles最详细的解读
关于 3d tiles github上面有一篇英文介绍,看过之后觉得讲的非常详细非常好。在这里一边翻译,一边给大家讲解分享:3D Tiles is an open specification for sharing, visualizing, fusing, and interacting with massive heterogenous 3D geospatial content across desktop, web, and mobile applications.......原创 2021-06-16 15:22:24 · 7398 阅读 · 4 评论 -
ol地块闪烁,渐变,呼吸灯效果实现
在openlayers实现很多矢量渲染时,可能会有用户提出多边形高亮,多边形闪烁等动态显眼的地图图形渲染方式,因此本文来提供给大家一些思路。原创 2022-08-24 09:57:50 · 652 阅读 · 0 评论