- 博客(132)
- 收藏
- 关注
RSS订阅原创 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
342
原创 openlayer:15控制Icon图标大小
摘要：OpenLayers中自定义矢量图标时，若引入的坐标点图片尺寸过大，可通过设置scale参数调整大小。例如使用newIcon({src:spjkPosition, scale:0.4})将图标缩放至原尺寸的40%，使地图标记更协调。该方法简单高效，无需修改源文件即可实现图标尺寸适配。
2025-05-29 11:59:20
282
原创 openlayer:14在某一区县内（一定区域内）加载不同类型的坐标位置，点击后弹出overlay弹窗显示坐标点详细信息，点击弹窗上关闭按钮关闭弹窗（3）
本文介绍了如何使用OpenLayers在区县地图上加载不同颜色的坐标点，并通过点击展示详细信息。之前在12章节我们是利用了forEachFeatureAtPixel配合getFeaturesAtPixel办法实现了效果，13章节们通过forEachFeatureAtPixel办法也可以实现相同效果，现在我们在使用Select交互类来实现相同效果。
2025-05-23 10:38:39
183
原创 openlayer:13在某一区县内（一定区域内）加载不同类型的坐标位置，点击后弹出overlay弹窗显示坐标点详细信息，点击弹窗上关闭按钮关闭弹窗（2）
本文介绍了如何使用OpenLayers在区县地图上加载不同颜色的坐标点，并通过点击展示详细信息。首先，设置地图视图和天地图底图，然后创建三种颜色的坐标点图层（黄、红、绿），分别用不同图标表示。绿色坐标点包含名称、省市区等属性信息。通过添加点击事件监听，当用户点击绿色点时，会弹出信息框显示该点的详细属性数据。实现过程包括创建矢量图层、设置点样式、绑定点击事件、处理特征属性等。通过forEachFeatureAtPixel方法获取点击位置的特征信息，使用Overlay实现弹窗功能，动态显示所选点的详细信息。
2025-05-23 10:19:53
366
原创 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
227
原创 openlayer:08点击实现切换图层之setVisible
本文介绍了在地图应用中控制图层显示的方法。通过使用OpenLayers库，可以创建包含多个图层（如底图、标记图层）的地图视图。核心功能是通过setVisible方法切换图层可见性：调用biaojilayer.setVisible(false)隐藏标记层，biaojilayer.setVisible(true)重新显示。代码示例展示了如何在React组件中实现地图初始化、图层配置及交互控制，最终通过按钮点击事件实现图层切换功能。这种技术可广泛应用于需要动态控制图层显示的WebGIS系统中。<｜end▁o
2025-05-21 15:52:16
126
原创 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
654
原创 openlayer:12在某一区县内（一定区域内）加载不同类型的坐标位置，点击后弹出overlay弹窗显示坐标点详细信息，点击弹窗上关闭按钮关闭弹窗
本文介绍了一个基于OpenLayers的地图应用实现，通过不同颜色图标区分不同类型的坐标点。系统使用React框架，利用天地图作为底图，加载了黄色、红色和绿色三种坐标点（分别代表不同类型的地点）。点击绿色坐标点时，会弹出信息框显示该点的名称、省份、城市和区县信息。实现过程包括：1)初始化地图视图和图层；2)创建三种不同颜色的坐标点图层并设置样式；3)添加点击事件处理，通过forEachFeatureAtPixel方法获取点击位置的特征信息；4)使用Overlay实现弹窗功能，动态显示所选点的详细信息。该系统
2025-05-21 15:16:48
693
原创 openlayer:11点击地图上省份实现overlay提示省份名称并修改对应所点省份区域颜色
本文介绍了如何通过点击地图上的省份，利用Overlay弹窗显示省份名称，并改变所点省份区域颜色的实现方法。首先，定义了全局变量map和popup，用于存储地图和弹窗对象。接着，使用useState定义name来存储省份名称，并设置地图视图的中心点和缩放级别。通过TileLayer加载天地图的三个图层，并使用VectorLayer加载矢量数据，设置样式以突出显示省份范围。然后，创建Overlay弹窗并将其添加到地图中。通过监听地图的点击事件，获取点击位置的省份信息，更新name并改变该省份的样式，最后将弹窗定
2025-05-21 14:54:11
389
原创 openlayer:10点击地图上某些省份利用Overlay实现提示省份名称
本文介绍了如何通过OpenLayers实现点击地图上的省份并在相应位置显示提示框的功能。首先，定义了两个全局变量map和popupp，分别用于存储地图实例和弹窗。接着，通过useState预留了一个状态变量name，用于存储省份名称。地图的视图和图层（包括影像图层、底图图层、标注图层和矢量图层）被初始化，其中矢量图层的数据源来自阿里云的GeoJSON数据。通过Overlay创建了一个提示框，并将其与地图关联。最后，为地图添加了点击事件监听器，当用户点击矢量图层时，获取点击位置的省份名称和中心点坐标，并在该位
2025-05-21 14:33:26
196
原创 openlayer:07点击实现切换图层之addLayer
在地图应用中，通常包含多个图层，如影像图层、底图图层和注记图层。为了显示特定图层，可以将其置于最上层。实现图层切换的三种方法包括：1. 使用removeLayer和addLayer方法，通过移除和添加图层来控制显示；2. 使用setVisible方法，通过设置图层的可见性来切换显示；3. 使用setZIndex方法，通过调整图层的层级顺序来控制显示。这些方法可以根据需求灵活选择，以实现地图图层的动态切换。
2025-05-21 13:50:09
142
原创 openlayer:06点击按钮实现地图动画移动
本文介绍了如何通过JavaScript和OpenLayers库实现地图的动画切换功能。首先，使用View类设置地图的初始中心点为北京，并创建两个瓦片图层，分别用于显示地图和标注。接着，定义了两个函数go和back，分别用于将地图中心点平滑切换到辽宁和北京。这两个函数通过view.animate方法实现动画效果，设置目标中心点和动画持续时间。最后，将这些功能集成到一个React组件中，通过点击按钮触发相应的函数，实现地图的动画切换。完整代码展示了如何初始化地图、添加图层以及实现动画切换功能。
2025-05-21 13:32:09
316
原创 openlayer:05点击按钮实现地图整体向上和向下移动
本文介绍了如何通过点击按钮实现地图的上下移动。首先，使用View创建地图视图，并设置中心点和缩放级别。接着，通过TileLayer加载天地图的底图和标注图层。在React组件中，使用useEffect初始化地图，并定义up和down函数分别处理地图的上下移动操作。up函数将地图中心点的纬度减少10000，down函数则增加10000，从而实现地图的上下移动。最后，在页面中添加两个按钮，分别绑定up和down函数，点击按钮即可实现地图的移动效果
2025-05-21 11:17:53
169
原创 openlayer:04点击省份实现改变对应区域颜色并且弹出省份名字
点击省份实现改变对应区域颜色并且弹出省份名字，并将省份名字写入到我们准备好的div中显示出来。
2025-05-21 10:50:59
214
原创 openlayer:03点击不同省份改变对应省份所在区域背景色
例如:点击了内蒙古，内蒙古的背景色就会发生改变，依此用来区分与不同的省份效果。如何在地图中点击不同省份，实现改变对应省份所在区域的背景色。
2025-05-21 10:04:10
169
原创 openlayer:02设置某区县级地图边框和颜色
本文介绍了如何在地图中单独突出显示某个区县（如黑山县），并为其设置样式以便更好地区分。首先，通过设置地图的中心点和缩放比例，确保黑山县在地图上清晰可见。接着，使用天地图提供的瓦片图层作为底图，并通过矢量图层加载黑山县的边界数据。矢量图层的样式设置为红色填充和绿色边框，以突出显示该区域。最后，通过React组件将这些图层整合到地图中，实现区县的单独显示和样式设置。
2025-05-21 09:42:01
452
原创 openlayer:01设置地图边框和颜色
可以通过以下步骤实现：首先，创建一个视图（View），设置中心点和缩放级别。接着，添加影像图层、底图图层、标记图层、矢量图层。并将是矢量图层绘制上背景色和边框。最后一起添加到地图实例中来。即可完成一个如下效果的地图。如何使用OpenLayers绘制带有绿色边框和半透明红色背景的地图？
2025-05-21 09:01:50
165
原创 React中使用openLayer画地图
OpenLayers（简称ol）是一个开源的WebGIS前端开发库，基于JavaScript实现，主要用于在网页中嵌入动态二维地图。本文介绍了如何使用OpenLayers在React项目中创建一个地图应用，并实现点击自定义坐标点显示相关信息的功能。首先，通过引入OpenLayers的相关组件，创建地图视图和图层，包括底图、标注和自定义区域图层。接着，定义黄色、蓝色和绿色的坐标点，并将其添加到地图中。通过添加点击事件，用户点击这些坐标点时，会弹出显示相关信息的卡片。最后，提供了完整的代码示例，展示了如何实现这
2025-05-16 11:48:43
546
原创 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
139
原创 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
148
原创 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
329
原创 react-native 安卓APK打包流程
一般都是在你的C盘中，我的是：C:\Users\xxx\.android下面，如果没有gradle.properties文件，你就自己动手创建。：一般在你的项目目录/android/gradle.properties中，同样加上上面的代码。），你需要在命令行中先进入bin中才能执行keytool命令。这里切记，不要删除原来的任何内容，只是将新内容加入进来。全局配置对所有项目有效，项目级配置只对所在项目有效。变量方法：一种是全局配置，另外一种是项目级配置。即：将签名放到项目目录下的。最后它会生成一个叫做。
2025-04-29 09:43:00
558
原创 React-Native项目矢量图标库（react-native-vector-icons）以及如何使用
验证图标库是否成功，可以在任何页面中引入：import Icon from 'react-native-vector-icons/FontAwesome';然后再使用图标：<Icon name="rocket" size={30} color="#900"/>'MaterialIcons.ttf', 'FontAwesome.ttf，这两个是是我自己用的，你想用别的图标库就自己手动加进来，例如：想用"Ionicons",就改成下面4这样。
2025-04-27 11:54:02
237
原创 React Hooks使用方法：useState，useRef，useEffect,useReducer,useContext用法实战案例
react hooks介绍，包括了state，ref，effect，reducer，context等常见hooks，也包括forwardRef和createContext用法，下面看代码吧，我用的是js写的。每个hook都做了个案例。
2025-03-26 20:20:41
342
原创 使用vite脚手架搭建react项目
然后回自动提示一些选择项，例如framework你要用哪个？你舅妈慢慢根据自己情况来选择就行了。都选好了，就会告诉你DONE了，可以开始进入项目启动了。下面就是进入你创建的项目，我的是my-react-app，然后npm install ，install结束后，就可以启动项目了。(my-react-app 这是我自己的项目名，你自己可以随便取名字)替换npm install -g create-react-app。新的脚手架据说很快，是原来的webpack的700倍。先会问你，确定继续吗？
2025-03-14 11:57:45
374
原创 react中如何使用使用react-redux进行数据管理
以上就是react-redux的使用过程，下面我们开始优化部分：当一个组件只有一个render生命周期，那么我们可以改写成一个无状态组件（UI组件到无状态组件，性能提升更好）
2025-03-05 15:04:56
299
原创 react中如何使用redux，真实代码演示，并如何优化action
react中数据管理使用什么？首选redux。redux怎么使用？如何和我们的react相结合呢？以及优化redux中action？
2025-03-03 13:37:54
577
原创 javascript 正则表达式
正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换。search() 和 replace()search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。replace() 方法用于在字符串中用一些字符串替换另一些字符串，或替换一个与正则表达式匹配的子串。 修饰符 可以在全局搜索中不区分大小写:方括号用于查找
2025-02-23 15:46:33
856
原创 nodejs和npm在gitbash中提示Not Found情况的解决办法
很多小伙伴学习了node以后，在cmd命令行中可以正常的获取node版本和npm版本，但是我们经常使用gitbash来管理git，这时候下载完gitbash后，在gitbash中输入node -v和npm -v会提示Not Found。其实就是环境变量问题导致的，点击开控制面板—>系统（见下图）
2024-11-15 13:36:58
793
2
原创 axios封装和refresh_token请求的问题
1.先说下我的需求：1.1为了方便以后管理axios，我封转了下一层axios，并把它叫做util。至于后面的一些具体的请求，我并没有封装成类似action函数或者对象。（因为懒，就先把axios对象搞了一层封装仅此而已）1.2登陆成功后获取到token和refresh_token，其中token有效时间是两个小时，refresh_token永久有效。token过期后需要用refresh_token重新请求，获取一个新的token和refresh_token。同时根据情况把token加在了c...
2021-12-08 16:47:33
1481
原创 React中Promise对象和Axios插件组合使用
看见你们写封装我都闹心，axios不就是promise的二次封装了，天天看面试题里面写的，axios是又XMlhttpRequest又 node中http 又从promise哪里搞了几个api。说到底，axios不就是他们几个东西的从新组合产生的一个玩意吗？那还用promise封装axios干什么？吃饱闲的吧。。。Login(){ var username=this.state.tel; var password=this.state.password; let promise=...
2021-09-16 20:54:05
442
原创 Https 连接和断开过程
http协议属于明文传输协议，交互过程以及数据传输都没有进行加密，通信双方也没有进行任何认证，通信过程非常容易遭遇劫持、监听、篡改，严重情况下，会造成恶意的流量劫持等问题，甚至造成个人隐私泄露（比如银行卡卡号和密码泄露）等严重的安全问题。1、客户端发送请求到服务端，建立连接(http三次握手)2、客户端发送请求到服务端，建立连接(SSL/TSL握手)1）、客户端发起https请求，服务...
2021-09-16 11:56:48
855
原创 ES6 新增属性方法的学习记录
1.let 命令1..新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。2.不存在变量声明的提升，变量一定要在声明后使用，否则报错。3.暂时性死区var tmp = 123;if (true) { tmp = 'abc'; // ReferenceError let tmp;}上面代码中，存在全局变量tmp，但是块级作用域内let又声明了一个局部变量tmp，导致后者绑定这个块级作用域，所以在let声明变量前，对t
2021-09-16 11:51:19
449
原创 javascript 原型和原型链（图文）
原型链：肯定是抽象的，想要知道原型链，必须知道原型，构造函数，实例之间的关系！我说下我理解的原型链：对象通过自身__proto__属性向上查找的过程！我说完了，结合下面的笔记，小伙伴理解下.........构造函数创建对象：function Person() {}var person = new Person();person.name = 'Kevin';consol...
2021-09-10 11:05:32
88
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人