- 博客(68)
- 收藏
- 关注
RSS订阅原创 cocos creator 3.x中动态加载 resources 文件夹下的图片时提示找不到
cocos creator 3.x中如何正确加载resources文件下的资源
2024-07-30 13:15:34
340
原创 cocos creator3.7版本拖拽事件处理
网上能找到的资料都太落后了，导致哥们用AI去写，全是瞎B写，版本都不对。贴点实际有用的。别老捣鼓你那破convertToNodeSpaceAR或者convertToNodeSpace了。
2024-06-05 13:45:07
299
原创 cocos creator3.x pinus 如何集成
接着 加入到任意的 脚本文件中， 开启好 默认的 pinus game服务器。实际操作挺简单，但是零星的几篇已经都是2+的，比较老的。后面写入 require(‘boot’)首先第一步，将build.js。
2023-03-19 15:21:40
526
1
原创 vue3结合codemirror6原生使用写法
网上零星几篇基本狗屁不通，非程序水平不行，属实文笔太烂，词不达意，干啥弄不明白要么杂乱无章。我的需求很简单，最近网站上要做个ol的学习模块，需要一个html的编辑器，一个预览。不需要别人给我封装对我而言多余的东西。为此琢磨了下网页在线编辑器，codemirror 经过时间的沉淀，已经是非常成熟的开源框架了，为此直接采用。非研究文章，纯使用文章。
2023-01-10 15:50:10
5604
5
原创 从零搭建的前后端完整的直播网页方案
由于前段时间刚租了台服务器打算自己玩玩，随想首页或者哪哪个页面挂个我个人的直播间应该还挺有趣的。遂探索如何在我的网站上弄一个直播。三下五除二，清清爽爽，看完此文5分钟即可直播。
2023-01-03 17:35:21
2622
原创 elementui drawer与table summary合计的处理方法
首先分析打印的信息， 会发现， summary-method 在一次触发渲染的时候， 足足统计了三次。透过这个现象猜测，内部应是有定时器在循环取值。原因很显然， 这个el-table应该是异步创建的。为此我尝试了一下，在提供的open方法内再去请求我的数据， 结果是一样的。将ref 挂于eltable上 ，在return sums 数组之前，让他重新布局即可。由此推得问题应该在数据的渲染上。终于发现一个东西，遂尝试。drawer内部显示图表是正常没问题的，但是合计，需要两次触发才可以正常显示。
2022-12-21 10:23:11
605
原创 threejs 加载模型与水面 出现水面覆盖或在模型上方的解决方案
本来以为只是加个啥啥属性就好了，但是网上找不到让我很绝望，虽然最终结果也只是加个属性就好了，由于不是很懂3D模型的渲染方式有关于深度等等的处理导致前前后后花了差不多2小时，万幸的是没有更久。
2022-10-25 16:55:22
777
原创 node 读取exceljs转换为json文件
由于最近都在搞大屏的项目，要到的数据都是excel 表格的站点数据（一般就经纬度，加个站号、名称之类的），之前纯纯手撸，没啥因为数量少，10来个，这次看了眼，50几个，看来手撸已不可取。为此找了下处理excel的插件，由此记录。
2022-09-19 11:31:26
552
原创 openlayers 绘制tin数据导文
为何会有此篇文章？因为其实陆陆续续有后来者踩到了这个地方。之前一段时间还需要关注我才能阅读的时候时不时的就有小红点提示。经过这么几个月的成长，我意识到里面仍有不少糟粕所在。起码来说，作为一个DEMO，你可以通过它去完成你的工作。但在实际应用上就会产生比较巨大的麻烦：各种意义上的。此篇作为导读，将在一个更高的层面上去理解、从我为什么如此想，以及代码里的优化处理。基本无代码，仅作为思路参考。如果你正在进行如题方面的研究、尝试，你应该会有所收获。...
2022-08-31 14:44:34
379
原创 Cesium3Dtilesets 使用customShader的解读以及泛光效果示例
光带原理在旋转弹跳四棱锥这篇文章里早已经阐述过，但还是有不少靓仔靓女可能会感到疑惑，在3Dtilesets里怎么使用？为啥我在网上看到的为数不多的代码示例我看不懂？是由于没理解透彻导致的。借此机会，提供一个小示例，从头到尾的应用一下。...
2022-07-27 15:23:47
10344
11
原创 rtsp 流媒体播放、nodejs服务部署完整方案
虽然已经有许多前人踩过这个坑了，可惜的是虽然分享了，但并没有那么分享0.0。至少我看的那篇没有所以这里也就不贴那篇文章的链接了。看我这篇就足够了。
2022-07-20 12:01:35
3461
7
原创 踩坑：leaflet 插件leaflet.rotateMarker.js 的rotationAngle 问题
前言：BUG出在插件里，本来我以为rotationAngle，旋转角度嘛，那应该是像下图这样。结果我死活得不到答案，于是采用笨方法，一个一个位置试。。如果你也受困于旋转角始终有偏差，请看下面。省去多余的尝试，直接给出方法。值的范围在0 - 360，对setRotationAngle的值 除以2即可。...
2022-07-11 10:57:51
654
原创 openlayers 绘制动态迁徙线、曲线
前言：本来懒得写这个博客，实在深感无聊，没啥事情做，出篇博客让大家看看。文章会尽可能简短。掉帧属录屏效果，尚未测试过性能，因为这个可以看自己调节。以下为一条贝塞尔曲线分了180段的效果描述。颜色属于瞎编乱造，只为示例，不为效果负责。1、先生成起点与终点的表示点。这个很重要，原因在于：openlayers 会智能的检测图层中的数据源（source）是否有需要更新的features，如果你没有设置features，或者不在视图内，是不会触发渲染、因此，也就不会触发我们需要的prerender事件。2、监听
2022-06-23 17:51:17
4251
4
原创 记可视化项目代码设计的心路历程以及理解
前言： 这篇文章包含了我这段时间的对代码的理解以及设计的反思，又到了否定以前的代码尝试去做更好的设计与想法的时候。从前引以为傲，自觉还行的代码如今看来，尽管仍然有它的可取之处，但有更多的需要精进的地方。俗话说得好，代码能跑了就不要动，而且说到底，现在的结构其实比较很多前端码农来说已是写的尚可。脱离场景以及问题的代码没有任何价值。你需要解决什么问题，以及你用什么方式去做，这是写代码的核心思考。尽管经过无数次的迭代，最终代码都会变成屎山的模样，但还是得让这个屎山拉的规律，尽可能的维持住整体，不要造成屎崩。业务如
2022-06-21 14:33:38
319
原创 openlayers 视频图层加载
前言： 前段时间有看到高德地图上有个视频图层，而恰好OL上又没有的时候，突然萌生了一个写个插件怎么样的念头。于是乎，说干就干。 ol-video目前还不是一个涵盖有很多功能的ol插件，我应该会后续更新？os: 大概有鱼可摸的时候，恰好想到写了个这么玩意的时候。npm 地址https://www.npmjs.com/package/ol-videool-video 是基于HTML5 Video Element进行渲染至ol地图上的一个插件，因此所有对DOM的操作都会实时的反应到该视频图层中。 为此如果你需要对
2022-06-09 11:53:30
487
原创 cesium 旋转弹跳四棱锥（光带扫描）（动态泛光效果）
前言：本文主要分以下几个部分阐述功能的核心实现。1、 四棱锥的生成2、物体的平移（也就是弹跳，本质上来说就是控制物体的渲染位置）3、物体的绕自身中心轴旋转4、Cesium drawCommand下的纹理贴图。5、光带扫描（也有人叫动态泛光，这种效果在啥子智慧城市出现的比较多）静态效果图四棱锥的生成上图可知， 四个边缘上的点是同一Y值，拉高中心点的y值或者减少 中心点的y值就可以形成一...
2022-05-31 16:10:33
5984
6
原创 关于线性插值的一点理解
前言：当开始学到glsl的函数诸如mix，smoothstep 此类 有关线性插值的时候，总会有一种概念上的完整，理解上的缺失。也看了不少文章，从数学意义上表述的居多，但从我的视角中出发，我觉得没有任何意义：我不搞学术，我只想知道是什么东西，以便我能踏在前人的肩膀上去学习，试验。更在乎的应该是它的几何意义：即有什么作用？于是，走了许多弯路，而同时smoothstep这个函数，竟然还有啥吊写在edge区间里的值等于原先的数。导致我对一些着色器代码的理解出现了严重偏差。那么线性插值究竟是什么形式、意义呢？以
2022-05-17 11:30:52
457
原创 elementui table的折叠（展开、收缩）图标移位的方法
前言：今天又是给csdn上的复读机们恶心的一天，一查，全是type=“”，type=“:”，我不知道，难道你们没发现放到最后一列的时候折叠的缩进没了？干！解决方法.el-table [class*="el-table__row--level"] .el-table__expand-icon { font-size: 18px; font-weight: bold; position: absolute; right: -785px; top: 15px; z-index: 999
2022-05-13 14:39:52
1922
1
原创 webgl bufferdata 更新 update
前言：照着关键字搜了几篇，基本都是介绍API，没有实际例子如何更新，提供一个例子，以供大家参考。代码既然涉及到更新了，那必然已经把初始的图像绘制出来了，找到你的Buffer ，将他保存起来，如下。 //创建缓冲区对象 var vertexBuffer = gl.createBuffer() if (!vertexBuffer) { console.log('Failed to create the buffer object')
2022-05-05 14:13:50
739
1
原创 cesium drawCommand源码解读（太监，做完视频不想写了）
前言： 最近做视频做到一半，突然发现要做还是得先了解下，免得妄自猜测随口一说误人子弟。大多数人会搜索到drawCommand大抵的需求都是与着色器之间（或者说webgl）产生数据交互。特有此文，希望可以帮助到你们。drawCommand是什么？首先drawCommand是什么？源码中的注释很简单，这就是一个绘制渲染的命令，在cesium里，每一帧都有大量的命令是需要执行的，试想下，当你拖拽地球的时候，重新被计算的地球的显示，以及你在这上面增加的任何几何体，都会被重新更新显示的位置，可能的话还有颜色，深度
2022-05-04 01:35:04
2048
4
原创 【BUG解决】vue-cli 项目体积过大导致打包RangeError: Invalid string length
前言：注意标题，虽然可能你点进来是病急乱投医。我还是要说，满足两点，你应该能在此文章下找到解决方案。1、vue-cli项目体积过大，打包过程出现RangeError: Invalid string length 这种字符串越界的现象。
2022-04-25 17:28:56
2151
原创 How I built a wind map with WebGL 源码理解（没完）
前言： 感谢XXHolic 大佬的翻译以及部分的解读内容，接着大佬的内容补充部分不够详细的点？（大概是对纹理一无所知的人，这篇文章看到你会失声尖叫然后迷恋上我）。参考与感谢译者XXHolicHow I built a wind map with WebGL译文【译】A GPU Approach to Particle Physics作者Clawko图形学底层探秘 - 纹理采样、环绕、过滤与Mipmap...
2022-04-13 18:49:00
1096
18
原创 从 cesium primitive 、three BufferGeometry 到webgl入门解读
前言： 本文最适用于已经使用过primitive API 但是不懂其道理即原理的人 或是 未使用过primitive API 且已经使用过一些cesium 的API 的人。本文不包含代码部分，仅是理论知识。当然，我会尽可能用最通俗的语言，最形象的形容去为你解释。与entity区别最大的区别就是在于entity 比primitive 多了计算。我们往下看。前置内容介绍进入正题之前，首先明白js的3D框架是如何把一个物体表示到三维的场景中。在接触cesium 或者是three.js 这些赫赫有名的3D框
2022-04-08 15:11:54
1271
原创 openlayers结合原生webgl 图像的动态绘制tin数据保持清晰度（南极坐标系、北极坐标系的转换处理）
前言： 本文基于上篇文章的基础开始。如果没看过我的上篇文章，请移步。效果转换成webgl坐标系所需的地理知识南极坐标系如下图所示北极坐标系的 如理 相反北极坐标系如理相反也就是说 假如我们得到一个坐标系正确的结果，另一个就是调调正负号了。下面以南极坐标系为说明。经纬度坐标转换成南极坐标的显示坐标（将度数改为数字）计算原理如下图所示特别注意，以下代码只保证南极坐标系第四象限求得角度没问题，由于暂时我也只用到了第四象限得处理，所以没有对其他的去算角度。请跟着上图原理自行计算。或者根
2022-03-30 16:31:57
1179
原创 openlayers结合原生webgl 图像的动态绘制tin数据保持清晰度
前言：此文章的内容涉及两个部分内容，主体为webgl内容，主要提供一个思路、解决方案。相关的需求是这么回事： 地图放大缩小时，图像不能失真。即：缩放有图像颜色的那一部分时，不可以失真。也就是说不能贴一张静态的图片，而需要监听地图的缩放、拖拽，动态的绘制当前视口内的图像。下图为实际效果。转载请著名出处。原生webgl绘制tin数据一个webgl的渲染环境 应该包含：着色器的设置、缓冲数据的设置、根据数据绘制，渲染该图像。着色器设置以下代码做了：1、将着色器的代码赋给shader。2、编译
2022-03-25 10:54:07
1740
原创 cesium 绘制自定义geometry、三角面
前言： 网上找了不少资料，属实少，为后来者添加多一份参考。绘制geometry，主要的还是每个顶点的位置颜色。而由于我是先从three.js做好的效果，移植到cesium的时候 发现首先连坐标轴都不对。所以如果你想得到正确的结果，你最好想确认你的顶点位置 是对的。效果核心省去多余的数据处理部分主要是会引起误解，核心关键在于cesium是如何生成一个几何体的。three.js 里 是通过bufferGeometry的 各个bufferattribute。而
2022-03-18 11:56:37
6721
11
原创 根据geojson 文件使用canvas 绘制经纬度范围地图
前言：这里只处理了 类型为polygon 与 multiPolygon 的feature，如果你的geometry的type 为其他 需要自己手动添加处理。最终结果为生成一张1920*1080的图片。 当然这个你可以任意调整。生成效果（填充描边等可自行设置）经纬度范围为：“la1”:-7.3963165283203125,“la2”:58.47581481933594,“lo1”:78.93975830078125,“lo2”:153.15325927734375,思路由于相对于平面坐标系来说，地
2022-02-16 17:47:44
1773
原创 three.js 拖拽剪切构成剖面图
示例效果：前言： 中间的图像块内容构建涉及保密数据，不做说明。只做如题相关的代码及说明。拖拽这里使用的是 DragControls这个类该类提供一个drag 和drop 的交互。使用方法很简单，将需要挂载事件的object3D 对象数组、相机实例、dom传进去即可。实例代码 // 注册事件. registerRaycsterEvent: function (objects) { //点击射线 let _this = this
2022-01-20 09:42:53
1877
1
原创 js 颜色求值在区间内的RGB值
前言： 最近在做一些图像的绘制的功能，需要有一个根据值在哪块区间生成颜色的应用，特此造了个小轮子。需要自取。视频讲解思路在此处。https://www.bilibili.com/video/BV1hL4y147Yr/三言两语的话，一个值被生成的过程 由判断该值 落在定义的区间范围的该段长度的比例，得出对应的结果。class ColorMaker { // 构造函数.. constructor(options) { let __options = Object.assi
2022-01-18 14:44:03
1178
原创 openlayers 其他坐标系散列点绘制图像
前言： 照道理来说应该是与昨天刚写的那个是差不多的。不过实现上略有曲折。上一个是以canvas为核心，先画出正确的图像再渲染至地图上，而这次是直接把这个由点组成得到图像绘制到地图上。所以不可避免的，我们只能使用ol原生提供的大量数据的渲染API。首先请确认你的版本存在WebGLPointsLayer ，在ol/layer目录下可以找到webGLPoints，就说明存在。https://openlayers.org/en/latest/examples/webgl-points-layer.html。从这
2021-12-27 15:20:43
631
原创 openlayers、cesium 使用散列点数据绘制canvas图像
前言：我并不知道后端处理的是什么后缀的文件。我这里需要使用的只有一些属性值。形状如下。最终成品图如下：如你所见最终的结果是一个扇形图。这是由数据本身决定的。在进入正题之前，先说明这图着色的具体的原理。先上代码class ColorRangeMaker { option = {}; constructor(option) { let vRange = option.value[1] - option.value[0]; if (option.col
2021-12-26 17:39:45
1254
原创 dat.gui 在Vue里的连接使用，包含实例
前言：最近项目在整一个绘制栅格颜色的工具，使用到了dat.gui ，不知道是不是我的搜索方式有问题，只是看到了API的使用，在这一点上如何让两个folder之间产生关联 属实是 折磨了我一会。这篇文章会介绍dat.gui 在Vue 下的 最基本 使用，以及不同folder下的联动。包含增添、删除，更新数据等。在我默认你有一定前端基础的前提下，我会尽可能的缩短篇幅。下载以及引入npm install dat.gui --save-dev安装在开发环境中即可。import dat from 'da
2021-12-17 17:08:27
2210
原创 openlayers关于ol-wind的层级堆叠问题失效的解决方案
前言： 因为项目需求有洋流、海浪、风场，3种粒子效果，所以需要根据zIndex去判断当前粒子的层级是在底图上方还是在底图下方。但是这里会发现一个怪问题，按照正确的zIndex 去设置得不到正确的结果。不啰嗦，直接说解决方法来源： https://github.com/sakitam-fdd/wind-layer/issues/73解决方法在生成图层的时候显示的写上属性 className 即可。...
2021-11-15 17:54:01
913
原创 openlayers 6+版本绘制风场粒子效果
杂话：虽然还是解决了问题了，写文章写博客还是不要做复读机了，给我恶心坏了。前言：需求不高，就是要做一个风场的粒子效果。大概长这样，线宽、颜色、快慢、数量等 都可以通过配置修改需知首先数据是要准确的。长这样。通常这种数据叫做gfs 。我会在本文底部提供一份测试数据。header 里面就是一系列的描述信息，接着 安装ol-wind 包。npm install ol-wind --save ORcnpm install ol-wind --savenpm包的示例如下上图取自h
2021-11-12 17:48:56
2483
9
原创 element-plus form的自定义验证（嵌套element-plus中的动态标签）
前言： 进入正题之前请确保你已经学会element中的表单基本验证方法，如果不，这篇文章可能会让你感觉到有点吃力。首先先讲明白思路第一，把验证规则的trigger选项置空，防止它重复触发验证， 我们需要在我们自己的函数内手动触发验证。第二，了解一点、关于动态标签的生成时，handlerInputConfirm与handlerClose 都会 触发一遍，这个是不可避免的。第三，我们需要标签的长度，以作0个标签让表单不能通过。rules 如下technologyStack: [
2021-10-11 00:25:31
3173
原创 elementui popover 下嵌套select 的问题解决
前言： 这个问题的现象产生于这样当我点击下拉框的时候，由于select框 在elementui 默认是在app外的 ，如图。导致我们的popover组件不能监听到他其实逻辑上是属于我们的app里头的。如果你的问题是类似的，那么可以参考一下我的解决方法。最终效果最终效果是当你的悬浮框存在的时候，移动到任何地方都不会隐藏这个容器。解决设置一个@visible-change的函数。// 台风的下拉框出现、隐藏时触发的函数 selectVisibleChange: function (e
2021-07-27 11:15:46
3268
7
原创 openlayers 绘制台风风圈（准确版）
闲言： 这个问题的一开始是最近几天的那个啥子台风有登陆湛江，然后我负责的项目刚好处在上线边缘（就是能用跟不能用之间反复跳跃），风圈的实现一开始是跟着LZUGIS 大佬 的 思路写的，当然，我也不知道为啥这么写就行。然后我也发现了一个问题就是说，首先就是绘制的圆弧位置不对，第二个是准确度不够，不过这么一琢磨，人家也说了简单的实现算法，有点问题也属实正常。直到我搜索台风路径，发现嗯，我艹，好精准，秉着好奇的心F12，是用SVG写的，框架用的也不是ol。。。emmm，网上又没有相关的现成的，这里就得说一句了，ol
2021-07-24 23:44:53
2070
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人