自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

大剑师兰特的GIS世界

讨论GIS相关知识,展示vue+openlayers,vue+cesium,vue+mapbox,vue+leaflett的示例

  • 博客(2382)
  • 收藏
  • 关注

原创 ThreeJS示例教程500+【目录】(已包含282篇文章)

Three.js 是一个用于在网页上创建和展示3D图形的JavaScript库。它使得在浏览器中渲染3D场景变得更加容易,而无需深入了解WebGL的复杂细节。Three.js支持多种渲染后端,但主要以WebGL为主。易于使用:提供了简洁的API来创建3D场景、相机、光源和物体。丰富的材质和纹理支持:可以轻松应用各种材质和纹理到3D模型上,增强视觉效果。动画支持:内置了动画系统,可以帮助你为场景中的对象添加动画效果。物理引擎集成。

2025-01-24 00:00:00 2025 78

原创 Mapbox GL示例教程【目录】-- 已有93篇

vue+mapbox系列教程旨在为开发者提供简单快捷的。在每一个示例中,解释相应的API知识点,做到。

2023-04-12 15:33:32 5414 78

原创 leaflet 综合教程170+ 【目录 】(已包含162篇文章)

vue+leaflet系列教程旨在为开发者提供简单快捷的,。在每一个示例中,解释相应的API知识点,做到。注意本示例目录中的内容可能加载是vue+openlayers的示例, 本目录是要加载vue+leaflet的示例,只是内容少,逐渐更新中。

2022-09-07 15:39:10 11555 227

原创 cesium 综合教程200+【目录】(已包含178篇文章)

cesium示例教程100+旨在为开发者提供简单快捷的,。在每一个示例中,解释相应的API知识点,做到。目录中有链接的为已有文章,没链接的为目标文章,不断更新中…

2022-09-07 15:23:19 8242 83

原创 openlayers全面教程303+【目录】

vue+openlayers系列教程旨在为开发者提供简单快捷的示例。在每一个示例中,解释相应的API知识点。

2022-09-05 15:57:58 25550 195

原创 Pinia介绍及Vue3配置示例

Pinia:Vue新一代轻量状态管理方案 Pinia是Vue官方推荐的状态管理库,专为Vue 3设计,同时兼容Vue 2。相比Vuex,Pinia具有更简洁的API设计(去除mutations)、原生TS支持、模块化架构和极致的轻量化(仅1KB)。核心功能包括: 定义Store:通过defineStore创建状态仓库,支持选项式和组合式两种写法 状态管理:包含state(状态)、getters(计算属性)和actions(同步/异步方法) 组件使用:支持直接修改、$patch批量更新,需用storeToRe

2026-04-10 16:19:58 175 1

原创 pinia-plugin-persistedstate详解与Vue3使用示例

摘要: Pinia插件pinia-plugin-persistedstate是Vue3生态中实现状态持久化的主流方案,通过将Pinia状态自动同步到本地存储(如localStorage),解决页面刷新后状态丢失问题。其核心原理包括状态监听、序列化存储及初始化恢复,支持全局与Store级配置。提供多种配置项(如存储键名、字段过滤、自定义序列化等),兼容Options/Setup两种Store风格,并支持多存储策略。最佳实践包括按需持久化字段、敏感信息处理及存储介质选择,同时提供TypeScript支持。常见问

2026-04-10 16:14:11 216

原创 echarts-stat:统计分析与数据挖掘扩展库

本文介绍了Apache ECharts官方统计扩展库echarts-stat(ecStat)的核心功能与Vue3集成方案。ecStat提供回归分析、聚类分析、直方图分箱和基础统计四大功能,支持独立使用或与ECharts深度结合。重点演示了Vue3环境下实现散点图加线性回归趋势线的完整示例,包括数据模拟、回归计算和可视化配置。同时给出了直方图、聚类分析等常用功能的代码片段。该工具适用于数据分析、趋势预测、用户分群等场景,能有效提升数据可视化项目的统计能力。

2026-04-09 00:00:00 105 1

原创 Vue3单元测试工具对比与示例

Vue 3测试工具对比与最佳实践 Vue 3项目中,Vitest(搭配@vue/test-utils)是官方推荐的单元测试工具,适合快速验证组件逻辑和函数;Cypress则更擅长组件交互测试和E2E测试,提供真实浏览器环境。 核心差异: Vitest:基于Vite,毫秒级运行,支持模拟DOM,适合纯逻辑测试 Cypress:真实浏览器操作,调试体验优秀,适合UI和业务流程验证 推荐方案: 新项目优先选择Vitest进行单元测试 关键组件和E2E流程补充Cypress测试 配置示例展示了两种工具的基础用法 结

2026-04-08 08:30:00 417

原创 Vitest单元测试教程

Vitest 是基于 Vite 的极速测试框架,兼容 Jest API,配置简单且性能优异。本文提供完整指南:1) 安装 Vitest 及常用测试依赖;2) 配置测试环境、文件匹配规则和覆盖率;3) 编写测试用例示范基础断言、异常处理和异步测试;4) 详解 Mock 功能(函数、模块、定时器);5) Vue 组件测试示例;6) 运行测试及查看覆盖率的命令。最佳实践包括合理命名测试文件、用例隔离、专注测试行为而非实现细节。通过监听模式、UI 界面和覆盖率报告,开发者可高效构建可靠的测试体系。

2026-04-08 00:00:00 324

原创 .prettierrc 典型配置(通用版)

本文提供了Prettier代码格式化工具的通用配置方案。包含完整版标准配置(推荐)和极简版配置,详细说明了printWidth、tabWidth等核心参数的作用及推荐值。同时介绍了配套使用方法:安装Prettier、创建忽略文件、添加格式化命令。该配置适用于Vue/React/TS/JS等前端项目,能有效统一团队代码风格,解决格式冲突问题。建议直接采用完整版配置,配合prettierignore文件,通过npm run format命令一键格式化整个项目。

2026-04-07 08:30:00 532

原创 Vite + Vue 3 一体化开发调试插件:vite-plugin-vue-devtools

**`vite-plugin-vue-devtools`** 是 Vue 官方为 **Vite + Vue 3** 项目打造的一体化开发调试插件,它将新一代 Vue DevTools 直接内嵌于 Vite 开发服务器,**无需安装浏览器扩展**,即可提供远超传统工具的调试、监控与导航能力。

2026-04-07 00:00:00 443 3

原创 pnpm format 什么作用

摘要: pnpm format是pnpm项目中用于一键格式化代码的命令,基于Prettier实现。它通过prettier --write .自动统一代码风格(缩进、引号、空格等),解决多人协作时的格式混乱问题。该命令由create-vue创建的package.json预设,支持全项目格式化,典型效果是将杂乱代码转为标准格式。开发时建议先执行pnpm format再编码,若报错需检查Prettier安装,可通过.prettierignore排除特定文件。

2026-04-06 08:30:00 332 14

原创 ol-ext 卷帘控件遮不住文字问题解决方案

摘要: OpenLayers卷帘控件(Swipe Control)中文字无法被遮挡的问题,主要因declutter避让机制导致文字渲染滞后于剪切路径生效时机。解决方案包括:1)关闭图层declutter功能;2)通过setTimeout延迟恢复渲染上下文;3)检查WebGL渲染模式的一致性。若使用矢量切片图层,需进一步优化样式函数。该问题与常规图形渲染流程差异相关,需针对性调整渲染时机或配置参数。

2026-04-06 00:00:00 431 6

原创 接口参数:Query、Body、Path 区别 + 完整参数类型

本文清晰解析了HTTP接口的三大核心参数:Path、Query和Body,以及四种补充参数(Header、Cookie、Form、File)。Path参数用于资源定位,必须包含在URL路径中;Query参数位于URL问号后,用于查询过滤;Body参数存放于请求体,适合提交大量或敏感数据。文章通过对比表格展示三者的位置、用途、安全性和数据量差异,并提供实用规则:GET请求用Path+Query,POST/PUT用Path+Query+Body,认证信息放Header,隐私数据必须用Body传输。最后强调文件上

2026-04-04 08:00:00 430 15

原创 RESTful 接口 + 实际开发通用规范

本文总结了RESTful接口开发的通用规范,提供了各HTTP方法的参数使用指南:GET用于查询资源(仅Path/Query参数),POST用于创建资源(主要数据放Body),PUT全量更新资源,PATCH局部更新,DELETE删除资源。强调安全规范:敏感信息不放URL,文件上传用POST+form-data,操作资源必须带Path ID。提供了极简记忆口诀(GET-Path+Query、POST-Path+Body等)和5条安全小规则(密码放Header/Body、GET不修改数据等),可直接应用于实际开发

2026-04-04 00:00:00 408 4

原创 unplugin-auto-import介绍与使用

unplugin-auto-import是一款跨构建工具的自动导入插件,支持Vite、Webpack等主流工具,可自动导入Vue、React等库的API(如ref/useRouter)而无需手动引入。它提供TS类型支持、ESLint兼容配置,并能自动生成声明文件和全局变量配置。安装后通过简单配置即可在代码中直接使用API,大幅简化开发流程。支持精确控制导入规则、本地文件自动导入等功能,与unplugin-vue-components等插件完美兼容。

2026-04-03 08:00:00 461 3

原创 EventBus核心方法用法

事件总线(EventBus)是一种用于跨组件/页面/模块通信的解决方案,核心方法包括Bus.on(监听事件)、Bus.emit(触发事件)和Bus.off(取消监听)。创建全局Bus实例后,通过on订阅事件,emit发布事件传递数据,off在组件销毁时取消监听以避免内存泄漏。使用时需注意事件名一致、避免匿名函数、及时销毁监听。原生JS也可实现类似功能。适用于兄弟组件传值或无关联模块间的通信场景。

2026-04-03 00:00:00 733

原创 vite-plugin-svg-icons作用详解

摘要: vite-plugin-svg-icons 是 Vite 生态中用于 SVG 图标自动化管理的插件,通过自动扫描指定目录下的 SVG 文件,生成合并后的 SVG Sprite 雪碧图,并以 <symbol> 形式注入页面。其核心优势包括: 性能优化:减少 HTTP 请求,内置 SVGO 压缩,支持按需加载。 开发提效:组件化调用(如 <SvgIcon name="home" />),支持热更新和 TypeScript 类型提示。 灵活定制:可通过 CSS

2026-04-02 10:00:00 488 12

原创 vitejs/plugin-legacy 作用与使用方法

Vite官方插件@vitejs/plugin-legacy提供旧版浏览器兼容方案,支持现代ES语法开发的同时生成兼容IE11等旧浏览器的代码。该插件会在生产构建时自动创建两套代码包:现代ESM包(支持新浏览器)和转译后的旧版包(含Babel转译和SystemJS模块),并智能注入polyfill。通过配置browserslist目标、自定义polyfill等选项,可灵活适配不同兼容需求。使用时需注意该插件仅在生产环境生效,会增加构建体积,并提供import.meta.env.LEGACY环境变量用于兼容逻辑

2026-04-02 08:45:00 506 6

原创 为什么要用 import.meta.glob 加载 SVG 图标库

本文介绍了Vite中import.meta.glob的用途和优势,它是一种静态资源批量导入语法。传统手动导入SVG图标需要逐行编写import语句,而使用import.meta.glob可以一键自动导入指定目录下的所有匹配文件,生成文件路径到模块的映射对象。其核心优势包括:支持批量导入、编译时静态分析、通配符匹配和懒加载优化性能。文中还提供了实际项目中的完整用法示例,展示如何将SVG图标处理为名称-路径的格式。import.meta.glob特别适用于图标库等需要批量处理静态资源的场景,能有效解决手动导入繁

2026-04-01 22:34:54 346 11

原创 OpenLayers 中 flatCoordinates: coordinates.flat() 完整解释

在OpenLayers中,flatCoordinates: coordinates.flat()的作用是将嵌套的地理坐标数组转换为一维数字数组,以满足OpenLayers几何对象的格式要求。例如,将[[116,39],[117,40]]转换为[116,39,117,40]。.flat()是JavaScript方法,默认拍平1层数组,正好适配常见的坐标格式。这行代码主要用于创建点、线或多边形几何对象时,确保坐标数据能被正确识别和处理。简单来说,它完成了从人类易读的嵌套坐标到OpenLayers内部所需格式的转

2026-04-01 22:30:02 68 2

原创 vite-plugin-compression 作用与使用方法

摘要: vite-plugin-compression 是 Vite 的预压缩插件,通过打包时生成 Gzip/Brotli 压缩包,减少 60%-80% 资源体积,提升加载速度。支持多算法、文件过滤等配置,三步即可集成:安装插件、配置压缩参数(如算法、阈值)、验证输出。生产推荐双算法并行(Gzip+Brotli),需搭配 Nginx 等开启静态压缩支持。注意保留源文件、过滤小文件,避免反向优化。核心价值在于降低服务器压力,提升传输效率。

2026-03-31 08:00:00 414

原创 gzip,brotliCompress,deflate三种压缩算法对比,vue3最适合用哪种

本文对比了三种主流压缩算法(gzip、Brotli、deflate)的核心特性与适用场景。gzip兼容性最佳,压缩比60%-80%;Brotli压缩比最高(70%-90%),但仅支持现代浏览器;deflate无校验机制,实际应用较少。针对Vue3项目,推荐Brotli+gzip双压缩方案(Vite生态标配),既优化性能又保证兼容性。配置示例展示了如何通过vite-plugin-compression实现双压缩,建议根据项目需求选择:极致性能选Brotli,兼容优先选gzip,Vue3+Vite项目推荐双开方

2026-03-31 00:00:00 707 1

原创 vueup/vue-quill 详细介绍(Vue3 富文本编辑器)

摘要: vueup/vue-quill 是专为 Vue 3 设计的 Quill 富文本编辑器封装组件,提供完整的富文本编辑功能(加粗、列表、图片等),支持双向绑定(v-model)、Composition API 和 TypeScript。其核心特性包括轻量化、模块化配置、双主题(snow/bubble)及丰富的事件系统。通过简单安装和注册即可快速集成,支持自定义工具栏和扩展第三方模块(如图片上传、表情符号)。示例代码展示了基础用法、配置选项及与 Vue 3 的深度结合,是 Vue 3 生态中高效、可定制的

2026-03-30 08:00:00 547 5

原创 将 Utils.js 挂载为全局(window.Utils.xx)完整配置方案

本文提供了将Utils.js工具函数挂载为全局变量的完整方案,适用于三种场景:原生JS、Webpack和Vite项目。核心步骤包括:1)在Utils.js中定义工具对象并挂载到window;2)原生项目直接script引入;3)Webpack项目需配置expose-loader;4)Vite项目只需在入口文件手动挂载。所有方案都确保全局可通过window.Utils调用工具方法,并提供了验证方法。

2026-03-30 00:00:00 321 2

原创 数组中有两个数据,将其变成字符串

数组:[开始时间, 结束时间]↓字符串:开始时间 - 结束时间数组.join(分隔符)join(',')join('~')都可以你的日期范围组件,直接用join最方便需要我把它直接写到你的日期组件代码里吗?

2026-03-23 22:15:56 316 9

原创 Vue3 + Element Plus 日期选择器:开始 / 结束时间,结束时间不超过今天

本文提供了两种实现日期选择限制的Vue3+Element Plus解决方案: 独立日期选择器方案 使用两个el-date-picker分别选择开始/结束时间 结束时间限制:不得早于开始时间且不得超过当天 提供disabledStartDate和disabledEndDate逻辑控制 范围选择器方案 单个el-date-picker设置type="daterange" 统一限制选择区间不得超过当天 两种方案均支持YYYY-MM-DD格式输出,代码可直接集成到项目中。核心通过disabled

2026-03-23 22:04:37 647 3

原创 Vue3 报错:computed value is readonly 解决方案

Vue3 computed只读报错解决方案 当出现"computed value is readonly"错误时,说明直接修改了只读的计算属性。两种解决方案: 修改原始数据(推荐):计算属性基于原始响应式数据,清空原始值即可自动更新。 使用可写computed:通过get/set方法实现双向绑定。 核心原则:计算属性是只读的,应通过修改源数据或使用可写computed来实现数据变更。清空场景建议直接操作原始ref/reactive数据,避免直接修改computed属性。

2026-03-21 09:00:00 219 9

原创 Stats.js 插件详解及示例(完全攻略)

Stats.js 是一款轻量级前端性能监控库,主要用于实时显示FPS、单帧耗时和内存占用等关键指标。支持npm安装、CDN引入和书签注入三种方式,可轻松集成到Three.js、游戏或动画项目中。核心API包括面板切换、计时方法和DOM控制,并提供自定义面板、多实例监控等高级功能。内存监控需Chrome启用特定参数,生产环境建议通过条件编译移除以减少性能影响。典型应用场景包括WebGL 3D项目调试、动画帧率监控和渲染性能分析。

2026-03-21 00:00:00 550 8

原创 VS Code Git 完整安装 + 配置方案(一步到位)

本文提供了VS Code使用Git的完整新手教程,包含安装配置到常用操作的全流程指南。主要内容包括:1) 安装Git软件并验证;2) 配置全局用户名和邮箱;3) 推荐安装GitLens和Git Graph插件;4) 详细说明初始化仓库、提交代码、关联远程仓库等核心操作;5) 列举常用快捷键;6) 常见问题解决方案。教程采用最简配置,Windows/Mac通用,适合零基础用户快速上手Git版本控制,无需记忆复杂命令即可完成日常代码管理。

2026-03-20 08:00:00 857 9

原创 Vue3 nextTick 详细用法+示例

Vue.js的nextTick是处理异步DOM更新的核心API。它的主要作用是等待Vue完成DOM更新后执行回调函数,常用于需要操作更新后DOM的场景。文章详细介绍了nextTick的核心概念、Vue3中的两种使用方式(组合式API和选项式API),并提供了多个实用示例,如列表自动滚动、输入框自动聚焦等。关键知识点包括:必须使用nextTick的场景(修改数据后需要操作最新DOM)、Vue异步更新的原因,以及推荐优先使用await nextTick()的写法。通过nextTick可以确保在正确的时机操作更新

2026-03-20 00:00:00 531 14

原创 Vue3 中 computed(计算属性)完整使用指南

摘要: Vue3的computed是响应式计算属性,基于依赖数据自动计算新值并缓存结果,提升性能。核心特性包括依赖追踪、缓存机制和两种写法(只读/可写)。组合式API推荐使用computed(() => {})定义只读属性,或通过get/set实现可写属性。与methods相比,computed在依赖不变时复用缓存,适合频繁计算场景(如字符串拼接、数值统计、数据过滤)。选项式API兼容Vue2写法。注意:依赖需为响应式数据,避免异步操作或副作用。典型应用如购物车总价计算,通过响应式依赖自动更新结果。

2026-03-19 08:00:00 622 5

原创 Vue3 前端专属配置(VSCode settings.json + .prettierrc)

本文提供了一套完整的Vue3+Vite项目代码格式化解决方案。主要内容包括:1) 安装必备的Volar和Prettier插件;2) 提供VSCode的settings.json配置模板,支持自动保存格式化、语法优化等功能;3) 给出符合Vue3团队标准的.prettierrc配置文件;4) 列出常用格式化快捷键;5) 提供ESLint冲突的额外优化方案。该方案可完美适配Vue3项目,解决格式化冲突、缩进、引号、换行等问题,支持<script setup>语法和多种文件类型,实现保存即自动格式化。

2026-03-19 00:00:00 548 11

原创 Vue3 按钮切换示例(启动 / 关闭互斥显示)

Vue3 按钮切换示例摘要 这个Vue3示例展示了如何实现两个互斥按钮(启动/关闭)的切换功能。核心要点: 状态控制:使用ref声明isClosed响应式变量,初始为true显示启动按钮 互斥显示:通过v-if和v-else确保只显示一个按钮 切换逻辑:点击按钮调用switchStatus函数,通过取反isClosed值实现状态切换 样式区分:启动按钮为蓝色,关闭按钮为红色 代码简洁高效,完整演示了Vue3的组合式API和响应式特性,适合作为基础交互组件使用。

2026-03-18 08:00:00 124 3

原创 VSCode 代码格式化完整解决方案(插件 + 配置 + 快捷键)

VSCode代码格式化全攻略: 安装插件:推荐Prettier(前端全栈)及各语言专用插件(Python/Java等) 配置设置:通过settings.json配置自动保存格式化、分语言指定格式化器 规则定制:创建.prettierrc文件定义代码风格,解决Prettier与ESLint冲突 使用方式:支持快捷键(Shift+Alt+F)、命令面板或自动保存触发 问题排查:检查插件启用状态、格式化器配置及语言特定要求 提供完整settings.json配置模板,覆盖主流开发场景,实现一键规范化代码格式。

2026-03-18 00:00:00 2628 10

原创 Vue3 中的 defineExpose 完全指南

defineExpose是Vue3组合式API中<script setup>语法糖的专用编译宏,用于主动暴露子组件的属性和方法给父组件访问。在<script setup>默认封闭的情况下,通过defineExpose可选择性地暴露成员,父组件通过ref获取子组件实例后即可调用。它支持TypeScript类型注解,常用于表单操作、组件通信等场景,需注意仅暴露必要成员且确保组件挂载完成后再访问。与defineProps和defineEmits共同构成了Vue3组件通信的完整方案。

2026-03-17 08:30:00 502 6

原创 Vue3 权限系统(Pinia + 登录接口 + 权限刷新 + 路由守卫 )

摘要:本文提供了一套完整的Pinia+权限控制解决方案,包含登录接口、路由守卫和持久化存储。核心功能包括:1)通过Pinia存储用户信息、角色和权限;2)路由守卫实现登录校验、角色和细粒度权限控制;3)持久化存储确保刷新不丢失权限;4)提供三种权限控制方式(登录验证、角色验证和权限码验证)。代码结构清晰,包含用户仓库、路由配置、API模拟和登录页面示例,可直接集成到项目中实现完善的权限管理系统。

2026-03-17 00:00:00 333 7

原创 Vue3中 ref 和 reactive 核心区别 + 使用 + 完整示例

Vue3中ref和reactive的核心区别与用法: ref支持所有数据类型(基本类型+对象/数组),需用.value操作;reactive仅支持对象/数组,直接操作无需.value 基本类型必须用ref,对象/数组推荐用reactive(代码更简洁) 模板中两者都不需要.value,JS中ref必须加.value ref可直接重新赋值,reactive只能修改属性,直接赋值会丢失响应式 选择原则:基本类型用ref,对象数组用reactive,不确定时优先选ref

2026-03-16 08:30:00 1128 3

原创 Vue3 页面权限控制实战示例(路由守卫 + 权限判断)

Vue3轻量级权限控制方案 核心思路:通过路由元信息标记权限页面,在全局守卫中校验权限。仅需3步实现: 在路由meta中标记需要权限的页面(requiresAuth:true) 在全局路由守卫中校验登录状态和角色权限 权限不足时跳转登录/403页 实现要点: 支持三种常见场景:登录访问、角色限制、权限码控制 可搭配Pinia状态管理使用 提供403无权限页面模板 优势:开箱即用、配置简单、只影响特定页面,适合大多数中小型项目的权限控制需求。

2026-03-16 00:00:00 868 5

Shader学习的系统性思维导图

内容概要:本文档是一份关于Shader学习的系统性思维导图,全面梳理了从基础语法到高级图形技术的知识体系。内容涵盖Shader的本质与作用、主流着色语言(GLSL、HLSL、ShaderLab、WGSL)的特点与应用场景、GPU渲染管线的核心流程(顶点处理、图元装配、光栅化、片元着色、逐片元操作),以及各类着色器的功能与实现案例。同时深入讲解了基础效果(如纹理映射、颜色渐变、简单动画)、光照模型(Lambert、Phong、Blinn-Phong)、材质系统、PBR原理,并拓展至进阶视觉效果(法线映射、视差映射、边缘检测、模糊锐化、Bloom辉光)和风格化渲染方向。此外还提供了丰富的学习资源、开发工具(ShaderToy、RenderDoc、VS Code插件)、性能优化策略及跨平台适配建议。; 适合人群:具备一定图形学基础或编程经验,从事游戏开发、实时渲染、可视化设计等相关领域的初中级开发者;也适合希望深入理解GPU渲染机制的技术人员。; 使用场景及目标:①掌握Shader在Unity/Unreal等引擎中的实际应用;②实现2D/3D特效(如粒子、光照、材质);③进行WebGL或移动端图形开发;④为学习光线追踪、神经着色器等前沿技术打下基础; 阅读建议:建议结合文档中推荐的在线平台(如ShaderToy)和开发工具动手实践,按照“基础语法→渲染管线→着色器类型→光照材质→进阶效果”的路径逐步深入,重视对距离场、噪声函数、UV动画等核心思维的理解与运用。

2026-02-08

小学物理竞赛题 - 声学方面 - 30道

内容概要:本文档是一份专为小学高年级(4–6年级)学生设计的声学基础物理习题集,包含30道紧扣声音产生、传播、声音三特性(音调、响度、音色)以及噪声与乐音区别的题目。题型丰富,涵盖选择、填空、判断和简答,强调生活应用、实验观察与科学解释,帮助学生建立对声音现象的系统认知。; 适合人群:小学4–6年级学生,尤其是正在学习声学基础知识或准备科学类竞赛的学生;也可供小学科学教师作为教学参考资料; 使用场景及目标:①用于课堂练习、课后复习或考试命题参考;②帮助学生理解声音由振动产生、需要介质传播、音调与频率关系、响度与振幅关系、音色与发声体特征的关系;③掌握噪声定义及控制的三种途径; 阅读建议:建议学生在完成题目后对照答案进行反思,结合实际生活现象加深理解;教师可引导学生通过实验验证相关结论,如观察音叉振动、比较不同材质传声效果等,强化探究式学习。

2025-12-17

C++ 面试题- 习题+答案

内容概要:面试题答案在文件尾部 本文整理了100道常见的C++面试题,涵盖C++基础语法、核心特性、高级编程概念及设计模式的实现。题目涉及引用与指针区别、const、static、virtual、RAII、模板、异常处理、智能指针、移动语义、lambda表达式、内存对齐、类型转换、SFINAE、类型萃取、协程、多线程编程等关键技术点,并包含大量实际编码实现题,如智能指针、线程池、生产者-消费者模型、观察者模式、内存池、LRU缓存等,全面覆盖C++中高级开发岗位所需掌握的知识体系。; 适合人群:具备一定C++编程经验,准备技术面试的初中级开发者,或希望系统复习C++核心知识点的程序员; 使用场景及目标:①用于C++岗位面试前的知识点梳理与查漏补缺;②深入理解C++语言机制如RAII、移动语义、模板元编程等的设计与应用;③通过动手实现常见组件(如智能指针、线程池)提升编码能力; 阅读建议:建议结合代码实践逐一攻克每个问题,重点理解底层原理与应用场景,对于实现类题目应亲自编码调试,以达到真正掌握的目的。

2025-12-19

C# 面试题-习题及答案

内容概要: 面试题答案在文本文件尾部 本文整理了120道C#面试题,全面覆盖C#语言的基础语法、面向对象编程、泛型与集合、委托与事件、异常处理、LINQ、多线程与异步编程、内存管理、.NET框架体系及常用设计模式等内容,系统性强,层次分明,旨在帮助开发者深入理解C#核心技术并准备技术面试。题目不仅涉及语言特性,还包含实际应用场景和最佳实践,部分问题指向高级机制如GC、表达式树、依赖注入和AOP等。; 适合人群:具备一定C#开发经验,准备面试的初中级.NET开发者,或希望系统梳理C#知识体系的程序员。; 使用场景及目标:①用于面试前的知识查漏补缺;②深入掌握C#核心机制与.NET运行原理;③提升对设计模式、架构思想及性能优化的理解与应用能力。; 阅读建议:建议结合实际编码练习逐一理解和验证每个问题,尤其对于委托、异步、泛型协变逆变、EF Core等难点内容,应配合示例项目动手实践,以达到真正掌握的目的。

2025-12-19

小学物理竞赛题 - 热学方面 - 30道

内容概要:本文是一份专为小学高年级(4–6年级)学生设计的热学物理习题集,共包含30道题目,涵盖温度与温度计、热传递的三种方式(传导、对流、辐射)以及物态变化(熔化、凝固、汽化、液化、升华、凝华)等核心知识点。题型丰富,包括选择题、判断题、填空题和简答题,注重联系生活实际,培养学生的观察能力和科学解释能力,题目附有详细答案与解析,部分题目提供教学提示。; 适合人群:小学4–6年级学生,科学教师及竞赛辅导人员;具备初步科学知识、希望巩固概念或参与科学竞赛的学生尤为适合。; 使用场景及目标:①作为课堂教学的补充练习,帮助学生理解热学基本概念;②用于课后复习、科学兴趣小组活动或竞赛备考,提升学生对热现象的分析与应用能力;③辅助教师进行教学设计与问题讲解。; 阅读建议:建议学生在完成题目后对照答案认真反思,重视简答题的语言表达训练;教师可结合题目开展实验探究,增强直观体验,深化对热传递和物态变化本质的理解。

2025-12-17

canvas学习思维导图

Canvas是HTML5基于像素的即时模式绘图系统,核心围绕Canvas元素与2D渲染上下文(ctx)展开,学习可分为四大核心模块: 1. 基础层:掌握“获取元素-获取上下文-绘制图形”核心步骤,理解核心对象特性; 2. 绘图API:聚焦基本图形(线段、矩形、路径、圆弧)绘制,以及颜色、线条、文本等样式设置,熟悉平移、旋转等变换与状态保存方法; 3. 进阶应用:包括图像绘制与像素处理、基于requestAnimationFrame()的动画实现、鼠标交互与碰撞检测; 4. 扩展与优化:可结合Three.js实现2D+3D混合绘图,通过减少重绘、离屏缓存等优化性能,应用于数据可视化、2D游戏、图像处理等场景,辅助Fabric.js等工具库提升开发效率。

2025-12-17

2025年北京海淀区中小学 信息学竞赛 试题

2025年北京海淀区中小学 信息学竞赛 试题

2025-12-02

海洋上浮漂数据,20000+条

海洋上浮漂数据,20000+, json格式数组内容,包含ID,经纬度、时间日期、气压浪高等信息。 单个数据形式: { "code" : "1594587", "data" : [ 1013.6, 25, 16 ], "lat" : -53.211, "lng" : 143.949, "report" : 1741986000000 },

2025-04-01

免费MapboxGL学习思维导图

下载体是一个MapboxGL学习思维导图,列出了相应的API和关联的结构,非常方便大家学习。 mapboxGL相关的学习教程;https://dajianshi.blog.csdn.net/article/details/130108573

2025-03-13

vue-leaflet 开发环境配置包(下载-解压-安装-运行)

本项目包是 vue环境下leaflet的开发安装包,下载解压后,npm install 安装, npm run serve 运行。 里面包含了element UI,vuex, vue router,axios 等的内容安装,方便在日后的开发中使用。

2024-12-21

vue-openlayers 开发环境配置包(下载-解压-安装-运行)

本项目包是 vue环境下openlayers的开发安装包,下载解压后,npm install 安装, npm run serve 运行。 里面包含了element UI,vuex, vue router,axios, turf等的内容安装,方便在日后的开发中使用。

2024-09-11

vue-threeJS 开发环境配置包

本配置包是vue-threeJS 的环境包,下载以后,安装:npm install,运行 npm run serve。包含了一些精美的小示例

2024-09-05

GIS气象用的风场演示数据(2)

风场数据通常是指用来描述大气中风向和风速分布的数据集。这类数据对于气象学、航空、航海以及环境科学等领域至关重要。风场数据结构可以非常复杂,取决于数据的来源和精度要求。然而,大多数风场数据都会包含以下基本要素: 1. **地理位置**:通常包括纬度(latitude)和经度(longitude)坐标,有时也会包含海拔高度(altitude)或气压(pressure level)。 2. **风速**:表示风的强度,通常单位为米/秒(m/s)、公里/小时(km/h)或节(knots)。 3. **风向**:描述风的来源方向,常用的角度表示,范围是0°至360°,其中0°或360°表示北风,90°表示东风,180°表示南风,270°表示西风。 4. **时间戳**:数据采集的时间,这对于动态风场尤为重要,因为风速和风向会随时间变化。 5. **水平分辨率和垂直分辨率**:数据网格的间距,决定了数据的精细程度。 6. **垂直层次**:在三维风场数据中,除了地面风速和风向外,还可能包含不同高度上的风速和风向信息。

2024-07-12

GIS气象用的风场演示数据(1)

风场数据通常是指用来描述大气中风向和风速分布的数据集。这类数据对于气象学、航空、航海以及环境科学等领域至关重要。风场数据结构可以非常复杂,取决于数据的来源和精度要求。然而,大多数风场数据都会包含以下基本要素: 1. **地理位置**:通常包括纬度(latitude)和经度(longitude)坐标,有时也会包含海拔高度(altitude)或气压(pressure level)。 2. **风速**:表示风的强度,通常单位为米/秒(m/s)、公里/小时(km/h)或节(knots)。 3. **风向**:描述风的来源方向,常用的角度表示,范围是0°至360°,其中0°或360°表示北风,90°表示东风,180°表示南风,270°表示西风。 4. **时间戳**:数据采集的时间,这对于动态风场尤为重要,因为风速和风向会随时间变化。 5. **水平分辨率和垂直分辨率**:数据网格的间距,决定了数据的精细程度。 6. **垂直层次**:在三维风场数据中,除了地面风速和风向外,还可能包含不同高度上的风速和风向信息。

2024-07-12

免费的ES6学习思维导图

ES6(ECMAScript 2015)作为JavaScript语言的重要版本更新,确实增加了一系列新功能来提升开发体验和代码效率。以下是一些显著的新增功能: 新的原始类型和变量声明: Symbol:ES6 引入了一种新的原始类型 Symbol,用于创建独一无二的标识符,常用于对象属性名,以避免命名冲突。 let 和 const:提供了块级作用域的变量声明,使用 let 可以声明局部变量,而 const 用于声明不可重新赋值的常量。 函数的新写法: 箭头函数:这是函数的一种简洁表达方式,它允许我们以更简短的形式写函数,并且改变了 this 的绑定方式。 模板字符串与标签模板: 模板字符串:通过反引号 ` 来创建字符串,可以在字符串中嵌入表达式,支持多行字符串,使得字符串拼接更加方便。 标签模板:一种高级形式的模板字符串,允许我们在字符串插值之前对其进行处理。 解构赋值: 数组和对象的解构赋值:可以直接从数组或对象中提取值并赋给变量,这在交换变量值或提取对象属性时非常方便。 其他新增特性: 默认参数:为函数参数提供默认值。 扩展运算符:... 用于将一个数组或对象的元素或属性展开。 类

2024-03-01

vite+vue2的项目基础包.zip

本压缩包是vite搭建vue2的项目基础包,使用者解压后,npm install,然后 npm run serve。 这样就能正常运行项目了。亲测好用,欢迎下载使用。 更改为vite+vue2的原因。 原来使用的是webpack,怎么调试都不太好使,最后看到官方使用的是vite,然后就打算更改webpack为vite来解决这一个问题。 这里面要注意要含有vite-plugin-vue2 和 vite。 配置文章介绍: https://dajianshi.blog.csdn.net/article/details/135815464

2024-01-24

js一维数组与三维数组互动,数据转换,类似购物车添加删除

使用javascript将一维数组做一定的转换,增加一些变量,然后将变更后的一维数组转化为三维数组,再然后是一位数组和三维数组的联动,类似于购物车的添加和减少的效果。 交互效果参考:https://dajianshi.blog.csdn.net/article/details/135407555

2024-01-09

d3.js的API思维导图

【材料】:d3.js的API思维导图,图片形式 【介绍】 D3js 是一个可以基于数据来操作文档的 JavaScript 库。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据。D3 遵循现有的 Web 标准,可以不需要其他任何框架独立运行在现代浏览器中,它结合强大的可视化组件来驱动 DOM 操作。D3 的运行速度很快,支持大数据集和动态交互以及动画。

2023-03-23

d3.js的模块的思维导图

【材料】:d3.js的模块的思维导图,图片形式 【介绍】 D3js 是一个可以基于数据来操作文档的 JavaScript 库。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据。D3 遵循现有的 Web 标准,可以不需要其他任何框架独立运行在现代浏览器中,它结合强大的可视化组件来驱动 DOM 操作。D3 的运行速度很快,支持大数据集和动态交互以及动画。 不引入新的视觉表示方法,而是借助于现有的 Web 元素: HTML, CSS, SVG 等。例如,可以使用 D3 创建 SVG 元素,并使用外部样式表进行样式化。也可以使用复合过滤器效果,虚线和裁剪。这样在调试的时候可以方便的使用浏览器内置的调试工具来进行调试。

2023-03-23

cesium的API思维导图

【用途】:可以方便的查看cesium的相关API的结构,有助于学习 【介绍】:Cesium是一个跨平台、跨刘览器的展示三维地球和地图的javascript库;Cesium使用webGL来进行硬件加速图形,使用时不需要任何插件支持,但是浏览器必须支持WebGL;Cesium是基于Apache2.0许可的开源程序,它可以免费的用于商业和非商业用途。 cesium官方网站:https://cesium.com/platform/cesiumjs/

2023-03-22

gpx转为geojson格式文件的方法

这是一个 JavaScript 库,可让项目将 GPX 转换为 GeoJSON。2个示例中将gpx2geojson这个插件利用的淋漓尽致,一个是加载pgx 的url的方式来处理数据,另一个是上传gpx文件的方式来处理数据。 【适用对象】 开发者要将gpx文件转化为geojson文件。

2023-03-11

超小录屏软件,生成gif动画

非常好用的录屏软件,超级小,只有不到700k,但是功能却非常好用,可以灵活地设置捕捉区域,设置帧速,可以编辑捕捉后的画面。 GifCam 有时被称为 Gif Camera,是一种动画应用程序,可将屏幕录制转换为 GIF。 这些录音的体积非常小,因此很容易分享。 它们以 gif格式保存,这种格式受到普遍支持,因此播放也没有问题。

2023-03-09

免费 leaflet学习思维导图

【解决问题】:如何学习leaflet更高效呢?一张较好的思维导图能够满足核心知识点的总结。通过学习,可以上传解析和导出数据:上传KML、KMZ、Geojson、shp、zip等,导出Image、pdf、geojson、GML、polyline等,还能学习的更多~~ 【适用人群】: 使用leaflet做开发的小伙伴 【使用场景】:使用leaflet来满足地图开发中的各种要求。 【演示地址】:https://dajianshi.blog.csdn.net/article/details/126747176

2023-03-08

免费openlayers学习思维导图

【解决问题】:如何来高效的学习openlayers,一张思维导图,将核心知识点汇聚,分枝叶查看,促进更好的学习。 【适用人群】: 使用openlayers做开发的小伙伴 【使用场景】:使用openlayers来满足地图开发中的各种要求。 【演示地址】:https://dajianshi.blog.csdn.net/article/details/126706466,提供上传解析和导出示例:上传KML、KMZ、Geojson、shp、zip等,导出Image、pdf、geojson、GML、polyline等

2023-03-08

leaflet加载天地图,3种地图切换【示例源代码】

【解决问题】:如何使用leaflet来加载天地图,并可以3种地图自由的切换。 【演示地址】:https://dajianshi.blog.csdn.net/article/details/127882736 【适用人群】: 使用leaflet做开发的小伙伴 【使用场景】:使用leaflet来满足地图开发中的各种要求。专栏中提供各种地图的加载示例:baidu、高德、google,bing,OSM,stamen,maptiler,天地图,mapbox等

2023-03-07

leaflet清除所有图层【示例源代码】

【解决问题】:如何使用leaflet来清除所有图层,给出一个解决办法 ~~本示例在vue+leaflet中添加各种地图,并清除所有的图层。 貌似很简单的一个示例,但是在学习和工作中非常重要,往往会根据项目的需要来删除图层,达到预期效果。 【适用人群】: 使用leaflet做开发的小伙伴 ~~ 【使用场景】:使用leaflet来满足地图开发中的各种要求。~~ 【演示地址】:https://dajianshi.blog.csdn.net/article/details/126773220

2023-03-07

leaflet加载高德地图示例源代码

解决问题:如何使用leaflet来加载高德地图 示例说明:本示例的目的是介绍演示如何用eaflet添加高德地图,有多种形式,分别是高德路网图、高德卫星影像图、高德矢量地图等。 适用人群: 使用leaflet做开发的小伙伴 使用场景:使用leaflet来满足地图开发中的各种要求。 演示地址:https://dajianshi.blog.csdn.net/article/details/126761464

2023-03-04

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

TA关注的人

提示
确定要删除当前文章?
取消 删除