- 博客(501)
- 收藏
- 关注
RSS订阅原创 Three.js 实战【2】—— 船模型海上场景渲染
在这篇文章中，我们将探索如何将Vue 3和Three.js的强大功能结合起来，创造出令人惊叹的三维视觉效果。文章详细介绍了如何使用Vue 3框架和Three.js库来渲染一个精细的船模型到网页上。通过一系列创新的技术手段，我们不仅为船模型添加了逼真的纹理，还模拟出了波光粼粼的水面效果。这一过程不仅展示了Vue 3在前端开发中的灵活性，还彰显了Three.js在处理三维图形方面的强大能力。文章的目标是为开发者提供一种新颖、高效的方式来增强网页的交互性和视觉吸引力。
2024-07-17 17:21:38
868
原创 leaflet【八】 加载文件资源
本文将探讨如何使用Leaflet插件加载GPX和KML文件，并将文件内容解析并渲染到地图上。我们将介绍如何使用对应的插件来处理这两种常见的地理数据格式，以及如何将它们集成到Leaflet中。通过深入分析插件的工作原理和使用方法，我们将展示如何在地图上呈现这些文件的内容。此外，我们还将探讨一些高级技巧，以优化文件的加载和渲染过程。无论您是初学者还是有经验的开发者，本文都将为您提供宝贵的见解和实用的方法。让我们一起探索Leaflet的强大功能吧！
2024-07-10 09:49:13
968
原创 Leaflet【七】加载海量点数据
本文深入探讨了Leaflet在渲染海量点数据时面临的性能挑战，提出了一种创新的解决方案——利用leaflet-marker-canvas插件。传统的循环绘制Marker方式在数据量巨大时会导致明显的性能下降，而通过将点数据加入Canvas进行批量渲染，显著提高了绘图效率。文章还细致分析了leaflet-marker-canvas的源码，揭示了其内部优化机制，为开发者提供了有效利用该插件的深入见解。
2024-07-08 11:10:14
911
1
原创 Leaflet【六】绘制交互图形、测量、经纬度展示
本文主要探讨了如何利用leaflet-draw插件在地图上绘制图形，以及通过leaflet-measure测量距离和面积，并将经纬度绘制到地图上。首先，我们使用leaflet-draw插件，该插件提供了一种简单而直观的方式来绘制各种形状（如点、线、多边形等）到地图上。然后，我们利用leaflet-measure插件，该插件可以测量地图上任意两点之间的距离，以及任意多边形的面积。最后，我们将经纬度数据绘制到地图上，以便于进行地理位置分析和可视化。这种方法为地理信息的收集、分析和可视化提供了一种有效的工具。
2024-07-05 11:11:56
993
原创 Leaflet【五】Marker点闪烁效果
本文深入探讨了在Leaflet中通过调整点、线、面的透明度来实现闪烁效果的技巧，并介绍了如何使用leaflet-pulse-icon插件简化此过程。文章不仅展示了如何利用这些技术吸引视觉注意力，还对leaflet-pulse-icon插件的源码进行了透析，揭示了其背后的工作原理。为开发者提供了一种新颖、高效的方法来增强地图交互性和视觉吸引力。
2024-06-28 08:30:00
430
原创 Leaflet【四】轨迹回放效果&控制台控制轨迹运动效果
本文主要介绍了使用Leaflet-trackplayer插件实现轨迹回放效果和控制台控制轨迹运动效果的方法。首先，我们通过引入Leaflet-trackplayer插件，实现了在地图上播放GPS轨迹的功能。然后，我们通过编写JavaScript代码，实现了在控制台上控制轨迹的播放、暂停、快进、倒退等操作。最后，我们还对如何优化轨迹回放效果进行了探讨，包括调整播放速度、改变轨迹颜色等。通过本文，读者可以了解到如何使用Leaflet-trackplayer插件来实现复杂的轨迹回放和控制效果。
2024-06-21 14:46:06
535
2
原创 Vue3源码【三】—— createApp执行流程源码分析
在本文中，我们深入探讨了Vue 3核心函数createApp的内部构造和执行流程。文章详述了应用初始化中涉及到的核心对象创建、全局API的安装以及响应式效果的建立等步骤。进一步地，分析了组合式API是如何与响应式系统和组件系统相互配合，使得状态管理变得更加灵活和高效。通过对源码的细致解读，揭示了Vue 3在设计上如何兼顾了扩展性、复用性和性能，为开发者提供了对框架内部运作机制的深刻见解。
2024-06-18 18:37:32
720
原创 Vue3源码【二】—— watch侦听&computed计算属性原理及简单实现
本文聚焦Vue3的watch侦听器和computed计算属性，二者均用于处理数据变化。watch能追踪并响应数据变动，而computed提供缓存的计算值。通过源码分析，我们将揭示它们的工作原理，以及如何在Vue3中实现这两个功能，从而实现对数据变化的高效管理。
2024-06-17 15:27:25
552
原创 Vue3源码【一】—— ref&reactive响应式原理及简单实现
本文深入剖析了Vue3中ref和reactive的工作机制及背后的响应式原理。文章首先揭示了ref是如何将一个普通值封装成响应式的，并返回一个可访问该值的响应式对象。接着，详细讨论了reactive如何使用Proxy来实现对象的响应式转换，使其所有属性的变化都能被Vue3精确捕捉。文中进一步探讨了Vue3响应式系统的内核，即依赖追踪和派发更新机制，展示了它们如何确保界面与状态的一致性。
2024-06-14 10:23:53
1343
原创 Leaflet【三】图层组 & geoJson & 热力图
图层组功能允许用户将多个图层组合在一起，便于管理和控制。GeoJSON是一种基于JSON的地理空间数据交换格式，可以用于在Leaflet中加载和显示地理数据。热力图则是一种可视化技术，用于表示地理数据的密度分布。通过结合使用这三个功能，可以实现在Leaflet中创建具有丰富地理信息和交互性的地图应用。
2024-05-17 09:00:00
416
原创 Leaflet【二】图层绘制——UI图层【点线面】& 矢量图层【img、svg】
Leaflet地图库中，图层绘制是构建交互式地图的重要部分。UI图层包含点、线、面，实现地图上的标记和路径规划。通过API，开发者可以定制图形样式及交互功能。矢量图层支持img和svg格式，用于展示清晰可缩放的复杂图标和自定义图形。Leaflet结合这些图层提供了一个强大的平台，以满足不同复杂度地图应用的需求。
2024-05-16 14:25:28
1032
原创 Leaflet【一】初识Leaflet与Leaflet视图操作
本文为Leaflet系列的第一篇，介绍了Leaflet这一流行的开源JavaScript地图库。内容涵盖Leaflet的基本概念和特点，以及如何通过视图操作实现地图的缩放、平移和旋转，为后续深入学习Leaflet打下坚实基础。
2024-05-14 19:57:14
452
原创 Openlayer【四】—— 控件
该文详细探讨了OpenLayers库中的控件。FullScreen控件用于实现全屏显示，MousePosition控件提供鼠标位置坐标信息，OverviewMap控件展示地图总体概览，Rotate控件可旋转地图视图，ScaleLine控件显示比例尺，ZoomSlider控件提供滑块进行地图缩放，ZoomToExtent控件允许一键缩放到指定地图范围。通过本文，您将深入了解这些控件的功能和使用方法，有助于更灵活地利用OL创建交互性地图。欢迎阅读并探索OL中这些有趣且实用的地图控件
2024-01-15 21:14:32
966
原创 Openlayer【三】—— 绘制多边形&GeoJson边界绘制
深入探讨了OpenLayers中多边形和GeoJson边界的绘制方法。首先，我们介绍了OpenLayers的基本概念和功能，然后详细解析了如何使用OpenLayers绘制多边形。接着，我们深入探讨了GeoJson数据格式的特点和应用，以及如何在OpenLayers中使用GeoJson数据进行边界绘制。最后，我们通过实例演示了如何结合多边形和GeoJson进行复杂的地图边界绘制
2023-11-21 16:15:00
1331
原创 Openlayer【二】—— 绘制不同的点、线以及给其添加监听事件
该文章将指导读者在OpenLayers平台上进行高级地图操作。该文主要说明如何在地图上精确绘制点，并且通过自定义样式将它们变得独一无二。此外，文章还将介绍如何为这些点添加带有图标和文字的交互功能。同时，也将理解到如何创建和编辑线，并为其添加样式和交互功能。
2023-11-20 14:59:27
840
原创 OpenLayer系列——【一】初识OpenLayer与OpenLayer视图操作
本文介绍了OpenLayers库以及如何进行OpenLayers视图操作。OpenLayers是一个开源的JavaScript库，用于创建交互式的地图应用程序。它提供了丰富的功能和工具，可以用于加载、显示和操作地图数据。在本文中，我们将初步了解OpenLayers库，并介绍如何使用它进行地图视图的操作，包括聚焦、缩放和平移等功能。无论是初学者还是有经验的开发人员，都可以通过本文快速入门OpenLayers，并开始构建自己的地图应用程序。
2023-11-17 14:06:41
367
原创 Canvas实战效果——代码雨、无规则运动背景、改变图片像素、元素拖动
Canvas 是 HTML5 中新增的一个标签，用于在网页中进行图形绘制和动画渲染等操作。使用 Canvas 可以快速创建出丰富多彩的用户界面效果。这篇文章主要偏向于效果实现，实现代码雨、无规则运动、改变像素、元素拖拽效果
2023-06-22 09:00:00
649
1
原创 Three.js 实战【1】—— 3D全景视图开发
我们先看一下这篇文章主要要实现的一个demo效果，现如今在第三方租房、买房App、或者百度、高德地图上会出现这种全景视图，当手势操作时，他对应的景色也会发生一定的变化。又或者你最近刷抖音看到了HM玩的图寻，给了一张可以旋转的3D全景图片，然后找这张图片在哪拍摄的，你可能会好奇这种效果在前端是如何实现的。这就是这篇文章将会教会你的一个小demo。
2023-05-17 09:32:50
2960
原创 探索三维世界【4】：Three.js & dat.gui & gsap 的使用
该文为读者介绍了如何使用 Three.js、dat.gui 和 gsap 三个 JavaScript 库来创建逼真的 3D 图形界面。首先介绍了 Three.js 的基本概念和用途，并提供了一些实际代码示例，帮助初学者快速上手。然后，该文章重点讲解了 dat.gui 在 Three.js 中的应用。dat.gui 是一个轻量级 JavaScript 库，它可以帮助用户添加交互式控制面板，使用户能够在 3D 场景中调整对象参数并实时预览结果。
2023-05-16 09:46:47
866
原创 探索三维世界【3】：Three.js 的 Geometry 几何体 与 Material 材质
最后将几何体与材质通过Mesh对象创建，Mesh是构成3D物体的基本单元之一，它是由Geometry和Material组合而成的。在使用Three.js创建物体时，需要将Geometry传入到Mesh对象中，Mesh对象则用于定义物体的材质和纹理等属性。Geometry包含了物体的顶点、面、法线、UV映射、颜色等信息，它可以定义各种各样的形状，例如三角形、矩形、圆形、立方体等等。需要注意的是，使用Geometry创建物体时，需要手动计算并设置物体的法线以及UV映射等属性，这一过程有些繁琐。
2023-05-04 20:11:21
846
原创 探索三维世界【2】：Three.js 的 Texture 纹理
你可以使用 TextureLoader 加载网页中的图像，然后在场景中创建一个新的纹理对象，并将其应用到任何需要的物体表面上。纹理是指将一张图像映射到 three.js 场景中的物体表面上的过程。在进行创建纹理加载器时，直接通过THREE父类进行创建，之后通过load方法进行加载图片到对应的纹理对象上。因此，TextureLoader 和 Texture 以及其子类之间是一种解耦的关系，TextureLoader 负责纹理的加载和创建工作，而 Texture 及其子类则负责实现具体的纹理效果和属性。
2023-05-02 12:56:19
1595
原创 瘦身SpringBoot：优化项目打包大小的方法
现有的应用开发中，不论是单体架构、微服务架构，如果项目采用的是 springboot、springcloud 来作为底层框架，打包时最终都会以jar包的方式打包、部署。这是就会面临一个问题，就是 jar 包非常大，单体应用还好，但是如果是微服务就非常痛苦，几十个微服务就要拆分打包几十个 jar 包，每个 jar 包都很大(几百M)，合起来就好几个 GB，非常占用空间。
2023-04-12 15:01:42
2687
原创 探索三维世界：从Hello World开始的Three.js入门之旅
Three.js是一款基于WebGL的JavaScript库，它可以帮助开发者快速构建3D场景和动画效果。它提供了丰富的API，包括几何体、材质、光源、相机等组件，可以实现复杂的3D交互。Three.js还支持多种导入格式，包括OBJ、Collada、FBX等，可以方便地将3D模型导入到场景中。入门Three.js需要掌握WebGL的基础知识，因为Three.js是基于WebGL的，所以对于WebGL的了解可以帮助更好地理解Three.js的原理和使用。
2023-04-07 16:47:20
504
原创 Vue3为什么要使用组合式API——Vue3的组合式API和Vue2的选项式API的优缺点
使用组合式API的主要原因是为了更好的解决组件复杂性和代码重用性的问题。组合式API将组件的逻辑按照功能进行划分，将相关逻辑放在一起，使得代码更加清晰和易于维护。同时，组合式API还可以更好地利用TypeScript等静态类型检查工具，提高代码的可靠性和稳定性。组合式API还提供了一些新的特性，例如响应式API、生命周期钩子函数的重命名、setup函数等，这些新特性使得组合式API更加强大和灵活。
2023-03-24 21:07:52
2127
2
原创 Vue3 组合式API（setup、ref、reactive、computed、watch、hook、shallow、provide ）详解
Vue3中的自定义hook是通过使用函数式组件和Composition API实现的。自定义hook可以将重复的逻辑提取出来，使代码更加简洁和易于维护。要创建一个自定义hook，可以定义一个函数，该函数接受参数并返回一个对象或数组，该对象或数组可供组件使用。
2023-03-24 17:40:29
745
原创 深入底层——浅谈Vue2和Vue3的响应式数据实现原理
在 JavaScript 中有两种劫持 property 访问的方式：getter / setters 和 Proxies。Vue 2 使用 getter / setters 完全是出于支持旧版本浏览器的限制。而在 Vue 3 中则使用了 Proxy 来创建响应式对象，仅将 getter / setter 用于 ref。
2023-03-18 16:34:41
1609
原创 不一样的邂逅——初识Vue3
Vue3.0 版本代表了 2 年多的开发工作，包括 30+ RFC、2，600+ 提交、来自 628 个贡献者的 99 个拉取请求，以及核心存储库之外的大量开发和文档工作。Vue 是为社区创建并由社区维护的独立项目，如果没有您的持续支持，Vue 3.0 是不可能的。这里直接从对应的官网上获取其打包的一个说明流程图。
2023-03-17 17:55:38
912
1
原创 nginx七大核心应用场景详解 & 解决生产中的实际问题 & 二次开发扩展
HTTP的keep-alive一般我们都会带上中间的横杠，普通的http连接是客户端连接上服务端，然后结束请求后，由客户端或者服务端进行http连接的关闭。动静分离指的就是将部署在tomcat服务器（或目标服务器）上的静态资源进行抽离出来单独部署在nginx上，这样一个请求打过来，直接就可以通过nginx将静态资源（img/css/js/mp4）进行返回，而其他的动态请求再打到后续的tomcat等服务器上，这样也就降低了后续服务器的压力，也减少了网络传输下的大静态资源文件的压力。
2023-03-06 21:49:15
1627
1
原创 Jenkins环境搭建与实战
Jenkins是一个可扩展的持续集成引擎。持续集成，就是通常所说的CI（Continues Integration），可以说是现代软件技术开发的基础。持续集成是一种软件开发实践，即团队开发成员经常集成他们的工作，通常每个成员至少集成一次，也意味着每天可能会发生多次集成。每次集成都通过自动化的构建（包括编译，发布，自动化测试）来验证，从而尽快地发现集成错误。许多团队发现这个过程可以大大减少集成的问题，让团队能够更快的开发内聚的软件。
2023-01-28 19:59:05
1755
1
原创 开源之路——如何发布属于自己的npm包
在进行开发的过程当中，难免会出现一些重复性的工作，例如说我们要对一个数组对象按照某一个字段进行大小排序，又或者说把Promise对象进行封装，把AJAX请求也进行封装，但是在后续的开发过程当中，更换项目后，再去找之前的代码很难去定位到对应的位置，这个时候自定义npm包就显得额外重要了，有时候就会想像这种loadsh这种提供了很多种对应的函数、对象等这种方法是如何实现的，为什么他只需要执行一个npm命令，就可以直接使用对应封装好的方法，这个就是本篇将要说的。
2022-12-19 14:52:48
868
原创 JAVA 设计模式篇
设计模式是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。它描述了在软件设计过程中的一些不断重复发生的问题，以及该问题的解决方案。也就是说，它是解决特定问题的一系列套路，是前辈们的代码设计经验的总结，具有一定的普遍性，可以反复使用。
2022-12-01 16:31:42
1088
原创 分布式锁？我一手synchronized 什么高并发，什么秒杀通通拿下（狗头）
分布式锁？我一手synchronized 什么高并发，什么秒杀通通拿下（狗头）
2022-09-27 18:03:52
3978
3
原创 js设计模式-观察者模式与发布订阅模式
在对于现在前端框架的崛起，大家对发布订阅这几个字也很熟悉了，像Vue用到的VueX以及React框架用的Pubsub都是发布订阅模式，简单来说，我们只需要在一个地方通知（发布）修改一个变量、对象的值，而在另一个地方进行订阅该变量、对象就可以获取到改变之后的值。
2022-09-01 20:35:09
490
原创 微服务项目调用外部接口
微服务开发过程当中，并且是在进行多项目开发时，难免的会出现调用别人开发的接口获取数据这种场景，但是到这里通常可以以下两种方式进行调用获取。（后端调用）
2022-08-31 09:01:52
1411
原创 React 详解
React是用于构建用户界面的JavaScript库， [1] 起源于Facebook的内部项目，该公司对市场上所有 JavaScript MVC框架都不满意，决定自行开发一套，用于架设Instagram的网站。
2022-08-19 10:17:40
1006
原创 webpack5 打包工具 详解
webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。
2022-05-29 15:06:48
1393
1
原创 Spring Security 认证授权详解
Spring Security 是 Spring 家族中的成员。Spring Security 基于 Spring 框架，提供了一套 Web 应用安全性的完整解决方案。在对与安全方面的两个主要区域是“认证”和“授权”（或者访问控制），一般来说，Web 应用的安全性包括用户认证（Authentication）和用户授权（Authorization）两个部分，这两点也是 Spring Security 重要核心功能。
2022-05-03 14:10:32
4451
1
原创 我的三周年创作纪念日
今天是2022-04-24星期天，今天由于五一调休要补班，早上还是和往常上班的早上一样，早上点开csdn的时候突然的发现自己写博客一下子有三年了，时间过的好快，昨天还是一个学生今天就已经是一个打工人了机缘首先的话可能就是跟大多数人一样，也是在读书的时候进行开始写博客的，基本上也就是对平时上课的一些点进行记录。从最开始的对java数组的一个小记录，最开始也只是一个小菜鸡，想的就是将上课的代码和知识点进行一下整理记录，有时候没事的时候也可以直接在手机上面看了，不用很麻烦的去开电脑了。而自己刚开始写博客也只
2022-04-24 17:09:16
914
3
原创 Vue 使用 vis-network 绘制网络关系图
visjs 提供了一个网络视图模块，提供给我们绘制网络之间的各个点、线之间的关系，这个的话就比较类似于echarts的地图，在地图上打点画线的逻辑，区别在于使用visjs可以拖动节点的位置、以及visjs里面还有对物理引擎等的引入。网络是一种可视化，用于显示由节点和边组成的网络和网络。可视化易于使用，并支持自定义形状、样式、颜色、大小、图像等。网络可视化可在任何现代浏览器上流畅运行，最多可容纳数千个节点和边。为了处理大量节点，Network 支持集群。
2022-04-20 15:23:23
8578
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人