- 博客(150)
- 收藏
- 关注
RSS订阅原创 如何在NPM上发布自己的React组件(包)
本文详细介绍了如何将React组件封装并发布为npm包的完整流程。首先通过npm init初始化项目，创建src、lib、test目录结构。然后编写React组件代码（包含JS和CSS文件）及入口文件index.js。接着配置Babel进行ES6转码，安装相关依赖后修改package.json中的main入口和scripts命令。创建.babelrc配置文件后运行npm run lib进行打包，最后通过npm login登录并npm publish发布到npm仓库。整个过程涵盖了从项目初始化到最终发布的完整
2025-07-31 12:07:38
359
原创 如何在在NPM发布一个React组件
本文介绍了如何创建一个React复选框列表组件并发布到npm的完整流程。首先注册npm账号并创建React项目，然后构建包含全选/单选功能的CheckboxList组件，包括组件代码、样式及数据管理逻辑。接着配置package.json文件和babel相关依赖，完成组件打包后通过npm login和npm publish发布组件。文章详细说明了组件开发、打包配置、发布准备等关键步骤，并附上了项目目录结构和配置文件内容，为开发者提供了完整的React组件开发与发布指南。
2025-07-29 17:36:18
260
原创 Node.js 版本兼容问题：minimatch@10.0.3和minio@7.0.28 冲突的解决
我们在构架项目时候，经常会遇到依赖包因当前 Node.js 环境不兼容的问题。比如像我当前的项目，是使用公司开发的框架的写的，要求install安装依赖包必须使用node18环境，然后run start使用node16环境运行。所以没办法，只能使用node18来install依赖包，但是这个minimatch在node18下不适配，安装失败。最终果断选择降低minimatch@10.0.3的版本，降到了"minimatch": "9.0.5"。yarn 就会强制所有依赖链中对 minimatch
2025-07-24 15:52:14
465
原创 openlayer 实现天气预警一张图
本文介绍了使用OpenLayers和React实现天气预警地图的技术方案。系统通过不同颜色（蓝色、黄色、橙色、红色）的点位展示不同级别的天气预警信息，实现了以下功能： 点击点位显示详细预警信息（标题、生效时间和描述内容） 相同颜色的点位在一定距离内自动聚合 通过图例控制各预警级别的显示/隐藏 使用天德地图作为底图 处理了API接口不稳定的情况，提供模拟数据确保开发体验 技术实现上采用了OpenLayers的矢量图层、聚合功能、样式定制和交互事件，结合React的状态管理。系统还预留了与降水量地图切换的接口，
2025-07-23 14:48:45
456
原创 React 实现人员列表多选、全选与取消全选功能
本文介绍了一个人员选择功能的React实现方案，主要包含以下功能点：1) 点击按钮弹出抽屉显示人员列表；2) 支持单选/全选人员，并实时更新选中状态；3) 分页加载人员数据并保持选中状态；4) 提供确认/取消操作。通过useState管理抽屉状态、人员列表、全选状态等数据，实现了onCheckChange处理单选、onCheckAllChange处理全选、handleChangePages处理分页等核心逻辑。代码展示了完整的人员选择交互流程，包括数据初始化、状态更新和UI渲染。
2025-07-18 15:17:41
352
原创 openlayer 绘制lineString线条
本文介绍了使用OpenLayers创建和渲染线状要素（LineString）的基本步骤：首先引入LineString模块，然后创建矢量数据源和图层；接着定义坐标点数组并生成线要素Feature，设置红色线条样式；最后通过useEffect将线图层添加到地图中。整个过程展示了从数据准备到地图渲染的完整流程，适用于地理信息系统的线状要素可视化开发。
2025-07-09 16:34:14
175
原创 openlayer 绘制MultiPolygon多边形
本文介绍了使用OpenLayers的MultiPolygon绘制多边形的步骤：1)引入MultiPolygon模块；2)创建矢量数据源和图层；3)定义多边形坐标点数组，通过MultiPolygon创建要素并设置红色填充样式；4)将图层添加到地图中渲染。代码展示了从数据准备到地图显示的全流程，适合需要绘制复杂多边形的地理信息开发者参考。
2025-07-09 16:16:42
157
原创 openlayer 绘制Polygon 多边形
使用OpenLayers绘制多边形的方法：1.创建矢量图层(VectorLayer)和矢量数据源(VectorSource)；2.准备多边形坐标数据(经度纬度数组)，创建Feature对象并设置多边形样式；3.将Feature添加到数据源，并将图层添加到地图(Map)对象中。关键点：坐标数据需要转换为地图投影坐标系(fromLonLat)，多边形样式通过Fill设置填充颜色，最终通过Map对象渲染显示。代码示例展示了从数据准备到地图渲染的完整流程。
2025-07-09 16:09:08
176
原创 openlayer 实现排水闸站总览和监测
实现效果如下图，需要将排水站、液位计、视频监控分别使用不同图标显示在地图上。点击左侧排水站、液位计、视频监控，对应地图上的点位消失，再次点击对应点位显示。点击某排水站位，对应的排水站弹出popup弹窗提示相关信息。 第二步：引入相关依赖 第三步：创建相关对象 第四步：定义state 第五步：绘制视图、瓦片图层和行政区域矢量范围图第六步：液位计和视频监控数据模拟第七步：排水闸站数据模拟 第九步：map挂载、点击弹窗提示 第十步：htm
2025-07-09 14:56:11
354
原创 openlayer 常用方法总结
想看vectorSource具体长什么样子的，请看下面这个截图。想看几何图形具体长什么样子的，请看下面这个截图。想看返回值具体长什么样子的，请看下面这个截图。
2025-07-09 14:03:17
295
原创 使用animation和keyframes制作一个可以旋转的水泵效果
摘要：该项目通过CSS动画实现了一个旋转的水泵效果。HTML部分包含两个嵌套的图片元素（轮廓和叶片），CSS使用flex布局居中显示。叶片图片通过@keyframes定义了持续5秒的360度无限旋转动画，模拟水泵工作状态。关键代码包括：叶片设置负边距定位，以及从0度到360度的线性旋转动画。这种方法简洁高效地实现了动态视觉效果。
2025-06-18 14:19:34
232
原创 css3 背景色渐变
摘要：CSS中的linear-gradient属性用于创建线性渐变效果，主要通过设置角度值(0deg、90deg、180deg、270deg)或方向关键词(to top/right/bottom/left)控制渐变方向。0deg等同于to top(由下向上)，90deg对应to right(由左向右)，180deg相当于to bottom(由上向下)，270deg等同于to left(由右向左)。该属性为网页元素提供了灵活的颜色过渡方案。（98字）
2025-06-18 11:27:46
438
原创 git 中:could not parse HEAD和branch “xx“ set up to track origin/xx和src refspec xx does not match any问题
原因是我们之前remove 过，然后又重新建立了关系，你现在本地项目中的分支名一定会变成默认的master分支。此时如果你远程上的分支如果是main或者其他的名字，那么你一定git push 不上去。这个问题主要是你的git导致的。一般都是Git 无法正确读取或解析。并且如果你要是继续git push肯定会提示：branch "xx" set up to track "origin/xx"这类信息，说明你在合并或拉取操作中存在冲突或问题。
2025-06-18 09:56:46
452
原创 React 中实现获取未来5天的天气预报
本文介绍了使用React开发大屏项目中5日天气预报模块的实现过程。主要步骤包括：1) 安装和风天气图标依赖；2) 通过API获取天气数据并存储到state；3) 实现日期格式转换方法；4) 构建包含日期、温度区间柱状图和天气状况的组件布局。代码展示了如何调用和风天气API、处理返回数据，并通过CSS样式化温度区间显示。组件最终呈现未来5天的天气预报卡片，包含日期、最高/最低温度及天气图标等信息。
2025-06-16 16:38:35
223
原创 openLayer 实现降水量分布图
文章摘要： 本文介绍了使用OpenLayers实现降水分布图预警监测的方法。通过React框架引入相关依赖和图层资源，定义不同降雨量级别（小雨至大暴雨）的矢量图层和样式。关键步骤包括：1) 获取并处理降雨量数据，根据参数分类；2) 创建多边形Feature并设置样式；3) 将各图层添加到地图中；4) 通过点击图例图标控制对应图层的显示/隐藏。文中提供了完整的代码示例，包括数据获取、图层渲染和图例交互的实现细节，最终实现了一个可交互的降水预警监测系统。
2025-06-16 14:47:23
484
原创 Windows下NVM的安装与使用
Windows下使用NVM管理多版本Node.js NVM（Node Version Manager）是Node.js版本管理工具，支持在同一设备上安装和切换不同版本，解决项目间Node.js版本不兼容问题。 下载NVM：访问官网https://nvm.uihtm.com 查看本地版本：nvm -v 列出可安装版本：nvm list available 安装指定版本：nvm install 18.2.0 切换版本：nvm use 18.2.0 删除版本：nvm uninstall 18.2.0 通过NVM可
2025-05-30 14:34:13
602
原创 openlayer:15控制Icon图标大小
摘要：OpenLayers中自定义矢量图标时，若引入的坐标点图片尺寸过大，可通过设置scale参数调整大小。例如使用newIcon({src:spjkPosition, scale:0.4})将图标缩放至原尺寸的40%，使地图标记更协调。该方法简单高效，无需修改源文件即可实现图标尺寸适配。
2025-05-29 11:59:20
423
原创 openlayer:14在某一区县内（一定区域内）加载不同类型的坐标位置，点击后弹出overlay弹窗显示坐标点详细信息，点击弹窗上关闭按钮关闭弹窗（3）
本文介绍了如何使用OpenLayers在区县地图上加载不同颜色的坐标点，并通过点击展示详细信息。之前在12章节我们是利用了forEachFeatureAtPixel配合getFeaturesAtPixel办法实现了效果，13章节们通过forEachFeatureAtPixel办法也可以实现相同效果，现在我们在使用Select交互类来实现相同效果。
2025-05-23 10:38:39
231
原创 openlayer:13在某一区县内（一定区域内）加载不同类型的坐标位置，点击后弹出overlay弹窗显示坐标点详细信息，点击弹窗上关闭按钮关闭弹窗（2）
本文介绍了如何使用OpenLayers在区县地图上加载不同颜色的坐标点，并通过点击展示详细信息。首先，设置地图视图和天地图底图，然后创建三种颜色的坐标点图层（黄、红、绿），分别用不同图标表示。绿色坐标点包含名称、省市区等属性信息。通过添加点击事件监听，当用户点击绿色点时，会弹出信息框显示该点的详细属性数据。实现过程包括创建矢量图层、设置点样式、绑定点击事件、处理特征属性等。通过forEachFeatureAtPixel方法获取点击位置的特征信息，使用Overlay实现弹窗功能，动态显示所选点的详细信息。
2025-05-23 10:19:53
412
原创 openlayer:09点击实现切换图层之setZIndex
本文介绍了如何使用setZIndex方法在OpenLayers中控制图层的显示顺序。通过调整图层的ZIndex值，可以决定哪个图层显示在最上层。例如，biaojilayer.setZIndex(0)和ditulayer.setZIndex(9)将底图置于最上层，而biaojilayer.setZIndex(9)和ditulayer.setZIndex(0)则将标记图层置于最上层。文章还提供了一个完整的React组件代码示例，展示了如何初始化地图、添加图层，并通过按钮切换图层的显示顺序。
2025-05-21 15:55:27
254
原创 openlayer:08点击实现切换图层之setVisible
本文介绍了在地图应用中控制图层显示的方法。通过使用OpenLayers库，可以创建包含多个图层（如底图、标记图层）的地图视图。核心功能是通过setVisible方法切换图层可见性：调用biaojilayer.setVisible(false)隐藏标记层，biaojilayer.setVisible(true)重新显示。代码示例展示了如何在React组件中实现地图初始化、图层配置及交互控制，最终通过按钮点击事件实现图层切换功能。这种技术可广泛应用于需要动态控制图层显示的WebGIS系统中。<｜end▁o
2025-05-21 15:52:16
147
原创 react中运行 npm run dev 报错，提示vite.config.js出现错误 @esbuild/win32-x64
在React项目中运行npm run dev时，如果遇到vite.config.js报错，提示@esbuild/win32-x64在另一个平台中被使用，通常是由于依赖冲突或缓存问题导致的。解决方法是删除node_modules文件夹，并重新安装依赖。具体步骤如下： 删除node_modules文件夹： rm -rf node_modules 重新安装依赖： npm install 或使用Yarn： yarn install 这样可以清除潜在的依赖冲突，确保项目正常运行。
2025-05-21 15:39:37
736
原创 openlayer:12在某一区县内（一定区域内）加载不同类型的坐标位置，点击后弹出overlay弹窗显示坐标点详细信息，点击弹窗上关闭按钮关闭弹窗
本文介绍了一个基于OpenLayers的地图应用实现，通过不同颜色图标区分不同类型的坐标点。系统使用React框架，利用天地图作为底图，加载了黄色、红色和绿色三种坐标点（分别代表不同类型的地点）。点击绿色坐标点时，会弹出信息框显示该点的名称、省份、城市和区县信息。实现过程包括：1)初始化地图视图和图层；2)创建三种不同颜色的坐标点图层并设置样式；3)添加点击事件处理，通过forEachFeatureAtPixel方法获取点击位置的特征信息；4)使用Overlay实现弹窗功能，动态显示所选点的详细信息。该系统
2025-05-21 15:16:48
718
原创 openlayer:11点击地图上省份实现overlay提示省份名称并修改对应所点省份区域颜色
本文介绍了如何通过点击地图上的省份，利用Overlay弹窗显示省份名称，并改变所点省份区域颜色的实现方法。首先，定义了全局变量map和popup，用于存储地图和弹窗对象。接着，使用useState定义name来存储省份名称，并设置地图视图的中心点和缩放级别。通过TileLayer加载天地图的三个图层，并使用VectorLayer加载矢量数据，设置样式以突出显示省份范围。然后，创建Overlay弹窗并将其添加到地图中。通过监听地图的点击事件，获取点击位置的省份信息，更新name并改变该省份的样式，最后将弹窗定
2025-05-21 14:54:11
462
原创 openlayer:10点击地图上某些省份利用Overlay实现提示省份名称
本文介绍了如何通过OpenLayers实现点击地图上的省份并在相应位置显示提示框的功能。首先，定义了两个全局变量map和popupp，分别用于存储地图实例和弹窗。接着，通过useState预留了一个状态变量name，用于存储省份名称。地图的视图和图层（包括影像图层、底图图层、标注图层和矢量图层）被初始化，其中矢量图层的数据源来自阿里云的GeoJSON数据。通过Overlay创建了一个提示框，并将其与地图关联。最后，为地图添加了点击事件监听器，当用户点击矢量图层时，获取点击位置的省份名称和中心点坐标，并在该位
2025-05-21 14:33:26
231
原创 openlayer:07点击实现切换图层之addLayer
在地图应用中，通常包含多个图层，如影像图层、底图图层和注记图层。为了显示特定图层，可以将其置于最上层。实现图层切换的三种方法包括：1. 使用removeLayer和addLayer方法，通过移除和添加图层来控制显示；2. 使用setVisible方法，通过设置图层的可见性来切换显示；3. 使用setZIndex方法，通过调整图层的层级顺序来控制显示。这些方法可以根据需求灵活选择，以实现地图图层的动态切换。
2025-05-21 13:50:09
187
原创 openlayer:06点击按钮实现地图动画移动
本文介绍了如何通过JavaScript和OpenLayers库实现地图的动画切换功能。首先，使用View类设置地图的初始中心点为北京，并创建两个瓦片图层，分别用于显示地图和标注。接着，定义了两个函数go和back，分别用于将地图中心点平滑切换到辽宁和北京。这两个函数通过view.animate方法实现动画效果，设置目标中心点和动画持续时间。最后，将这些功能集成到一个React组件中，通过点击按钮触发相应的函数，实现地图的动画切换。完整代码展示了如何初始化地图、添加图层以及实现动画切换功能。
2025-05-21 13:32:09
365
原创 openlayer:05点击按钮实现地图整体向上和向下移动
本文介绍了如何通过点击按钮实现地图的上下移动。首先，使用View创建地图视图，并设置中心点和缩放级别。接着，通过TileLayer加载天地图的底图和标注图层。在React组件中，使用useEffect初始化地图，并定义up和down函数分别处理地图的上下移动操作。up函数将地图中心点的纬度减少10000，down函数则增加10000，从而实现地图的上下移动。最后，在页面中添加两个按钮，分别绑定up和down函数，点击按钮即可实现地图的移动效果
2025-05-21 11:17:53
215
原创 openlayer:04点击省份实现改变对应区域颜色并且弹出省份名字
点击省份实现改变对应区域颜色并且弹出省份名字，并将省份名字写入到我们准备好的div中显示出来。
2025-05-21 10:50:59
247
原创 openlayer:03点击不同省份改变对应省份所在区域背景色
例如:点击了内蒙古，内蒙古的背景色就会发生改变，依此用来区分与不同的省份效果。如何在地图中点击不同省份，实现改变对应省份所在区域的背景色。
2025-05-21 10:04:10
193
原创 openlayer:02设置某区县级地图边框和颜色
本文介绍了如何在地图中单独突出显示某个区县（如黑山县），并为其设置样式以便更好地区分。首先，通过设置地图的中心点和缩放比例，确保黑山县在地图上清晰可见。接着，使用天地图提供的瓦片图层作为底图，并通过矢量图层加载黑山县的边界数据。矢量图层的样式设置为红色填充和绿色边框，以突出显示该区域。最后，通过React组件将这些图层整合到地图中，实现区县的单独显示和样式设置。
2025-05-21 09:42:01
491
原创 openlayer:01设置地图边框和颜色
可以通过以下步骤实现：首先，创建一个视图（View），设置中心点和缩放级别。接着，添加影像图层、底图图层、标记图层、矢量图层。并将是矢量图层绘制上背景色和边框。最后一起添加到地图实例中来。即可完成一个如下效果的地图。如何使用OpenLayers绘制带有绿色边框和半透明红色背景的地图？
2025-05-21 09:01:50
210
原创 React中使用openLayer画地图
OpenLayers（简称ol）是一个开源的WebGIS前端开发库，基于JavaScript实现，主要用于在网页中嵌入动态二维地图。本文介绍了如何使用OpenLayers在React项目中创建一个地图应用，并实现点击自定义坐标点显示相关信息的功能。首先，通过引入OpenLayers的相关组件，创建地图视图和图层，包括底图、标注和自定义区域图层。接着，定义黄色、蓝色和绿色的坐标点，并将其添加到地图中。通过添加点击事件，用户点击这些坐标点时，会弹出显示相关信息的卡片。最后，提供了完整的代码示例，展示了如何实现这
2025-05-16 11:48:43
611
原创 react-native打包报错：缺少build文件夹
下面开始几个步骤解决这个问题.二、进入android文件夹然中执行：./gradlew assembleDebug --refresh-dependencies。这样D:\XXX\android\app\build就会有了build文件夹，也就有了相关将来build时候的所需文件结构。一、进入项目根文件夹执行：npx react-native build-android --mode=release。二、在项目根文件夹执行：npx react-native start --reset-cache。
2025-04-29 17:31:10
192
原创 RN打包APK报错：createBundleReleaseJsAndAssets\index.android.bundle.hbc: The source file doesn‘t exist解决办法
是 React Native 在 Android 平台上打包 release 包时的一个步骤，主要涉及将 JavaScript 代码和资源打包成 bundle 文件。cd android 并且 ./gradlew clean。npm install（或者yarn install来安装）就这四步，基本都能解决！四、重新用AS编译一下项目。
2025-04-29 17:14:00
219
原创 react-native-vector-icons打包报错并且提示：copyReactNativeVectorIconFonts相关信息
根文件夹中运行：yarn add react-native-vector-icons 对react-native-vector-icons进行修复。二、修改您的项目文件夹 node_modules/react-native-vector-icons/fonts. gradle文件。根文件夹中运行：npx patch-package react-native-vector-icons 进行修复。
2025-04-29 16:51:15
363
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人