Youxingfang的博客

原创 cors问题

原创 git骨架程序同步到新项目

这个选项用于将本地分支与远程分支建立追踪关系。这样，在未来的推送和拉取中，您可以仅使用 git push 和 git pull，而不需要每次都指定远程分支。

原创 filepond设置application/x-rar-compressed无效

filepond设置application/x-rar-compressed无效。

原创 【无标题】

Icon 使用 React Icon 替代，对于 UI 单独设计的图标沿用 iconfont 的引入方法。表单框架：Formik（表单验证优先使用 Yup，具体参考 Formik 文档中关于 Yup 的说明）包管理工具：pnpm，禁用 yarn/cnpm/npm，采用npm官方源，禁用国内镜像。全局样式（Chakra UI，Tailwind CSS，及各组件的样式定义）上传：FilePond （图片预览及编辑通过插件，具体参考其文档）未注明明确版本的组件/工具，视为官网的最新版本。

原创 【无标题】

将vite.confug.ts中的配置。

原创 vue项目启动报错Cannot find module ‘webpack-cli/bin/config-yargs‘

降低webpack-cli版本。

原创 vue 报错 Cannot assign to read only property ‘exports‘ of object ‘#＜Object＞‘ (BaseClient.js:1）

atat。

原创 安装 twin.macro，页面报错Uncaught TypeError: Unable to determine current node version

Uncaught TypeError: Unable to determine current node version

原创 leaflet引入天地图底图

【代码】leaflet引入天地图底图。

原创 模块““react-router-dom“”没有导出的成员“useHistory”

useNavigate 是一个 React Router v6 中的新 Hook，用于在 React 组件中进行路由的导航。这个函数可以接受一个字符串参数，表示要导航到的路径，还可以接受一个可选的对象参数，表示导航的其他选项，例如替换当前路由、在历史记录中前进或后退等。注：useNavigate 只能在 React Router v6 中使用，如果你的项目中使用的是 React Router v5 或更早的版本，你需要继续使用 useHistory。

原创 leaflet图层层级问题（marker和polyline）

原因：marker在markerPane窗格 polyline在overlayPane窗格，这两个窗格各有各的层级z-index;将polyline添加pane属性到markerPane窗格，这样marker和polyline层级就一样啦。layerGroup图层里面添加了marker和polyline,但是有时他们会在不同的图层；窗格是用于控制地图上图层顺序的DOM元素。

原创 react报错@react-refresh

原因：suspended=>当网速慢时，指定路由组件页面未加载出，则需使用suspense中的fallback在指定页面出现前，加载fallback中的内容。

原创 浏览器开机自启动及全屏配置

浏览器打开某应用开机自启动及全屏配置一、第一步：将应用快捷程序放入开机自启动文件夹下，如下图位置：二、第二步1.对应用快捷程序【属性】进行配置，修改目标参数，如下图：目标参数配置：浏览器文件所在位置±-kiosk --disable-pinch +应用地址例：“C:\Program Files\Google\Chrome\Application\chrome.exe” --kiosk --disable-pinch file:///D:/job/index6.html注建议使用谷歌浏

原创 解决微信免登录重定向地址只能带一个参数问题

解决微信免登录重定向地址只能带一个参数问题一、常用方法？const url = encodeURI(“http://192.168.0.56:91/official/login”);export function toAuthorize(recCode,isNetWork) { const APPID = "wx2222222222222"; const url = encodeURI("http://192.168.0.56:91/official/login");location.

原创 h5页面上传文件及图片（vue）

h5页面上传文件及图片1、vant的uploader组件：代码如下（示例）：<van-uploaderaccept="application/pdf,application/xlsx,application/doc,application/docx,image/*" v-model="fileList" :max-size="2000 * 1024" @oversize="onOversize" :max-count="5" :after-read="afterRead"

原创 vue实现数字滚动效果

vue实现数字滚动效果代码如下（示例）：数字滚动组件num.vue<template> <div ref="numberRoll" :data-time="time" class="number-roll" :data-value="num" ></div></template><script>export default { name: "Num", props: { num:

原创 echarts饼图在中间添加图片

echarts饼图在中间添加图片 graphic: { elements: [{ type: "image", z: 3, style: { image: imgSrc, width: 90, height: 90 }, left: 'center',

原创 threejs如何在三维场景中添加点击事件

threejs如何在三维场景中添加点击事件threejs触发点击事件一般通过THREE.Raycaster射线来实现，当射线与物体相交，触发事件 this.$refs.loadDiv.addEventListener( "click", this.onDocumentMouseDown, false ); onDocumentMouseDown: function(event) { event.preventDe

原创 Threejs在vue中使用(场景、相机、渲染器、gltf模型添加、环境贴图等）

前言Three.js ( Javascript 3D library ) 是基于原生WebGL封装运行的三维引擎，WebGL可以看成是浏览器给我们提供的接口，在JavaScript中可以直接用这些API进行3D图形的绘制；而Three.js它封装了诸如场景、灯光、阴影、材质、贴图、空间运算等一系列功能，让你不必要再从底层WebGL开始写起。 Three.js是通过对WebGL接口的封装与简化而形成的一个易用的图形库。Three.js开发3D应用，通常包括渲染器（Renderer）、场景（Scene）、照

原创 gltf模型存在棱角，面不平滑

gltf模型加载出来外部透明部分有很多棱角、不平滑，实际模型里面这个面是平滑的解决办法：一般都是depthWrite，法线 renderOrder问题试着将depthWrite设置为flase

原创 mapbox打开一个弹框后关闭另外一个弹框

var popUps = document.getElementsByClassName("mapboxgl-popup"); if (popUps[0]) popUps[0].remove();//关闭弹框

原创 mapbox弹框使用vue组件、mapbox弹框添加自定义事件

mapbox弹框使用vue组件及弹框popup内元素添加点击事件一、popup内容使用vue组件，添加轮播图1、新建vue文件，添加弹框内容<template> <div> <div class="pop_tit" @click="openD(obj)"> {{ obj.name }}<i class="iconfont icon-jiancedianweidanchuang-you"></i> </di

原创 mapbox地图点位图像更新

mapbox地图点位更新样式中的现有图像this.map.loadImage('../img.png', function (error, image) { if (error) throw error; that.map.addImage('更换图片的ID', image);});注：更新的图片和被替换的图片宽和高要保持一致，否则报错；如仍不能替换，可检查是否是图片存放路径不一致问题导致；...

原创 chunk-vendors.js 语法错误

chunk-vendors.js 语法错误打开错误文件查看解决方法在vue.config.js中添加transpileDependencies参数配置 transpileDependencies: ['@arcgis']

原创 mapbox地图底图切换点位消失啦？

Gamma公式展示 Γ(n)=(n−1)!∀n∈N\Gamma(n) = (n-1)!\quad\foralln\in\mathbb NΓ(n)=(n−1)!∀n∈N 是通过 Euler integralΓ(z)=∫0∞tz−1e−tdt .\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.Γ(z)=∫0∞​tz−1e−tdt.

原创 mapbox底图切换、地形添加

mapbox地形添加：this.map.addSource("mapbox-dem", { type: "raster-dem", url: "mapbox://mapbox.mapbox-terrain-dem-v1", tileSize: 512, maxzoom: 14, });this.map.setTerrain({ source: "mapbox-dem", exaggeration: 1.5 }

原创 mapbox学习笔记

mapbox初学者笔记初学者参考学习链接：http://www.mapbox.cn/help/how-mapbox-works/GeoJson一种用于编码各种地理数据结构的格式{ "type": "Feature", //图形信息 "geometry": { "type": "Point", "coordinates": [125.6, 10.1] }, //属性（包括在弹窗里的title、name和description等） "properties": {

原创 mapbox在vue中的使用

npm 安装：npm install --save mapbox-glcss文件引入方式1：在index.html页面引入<link href='https://api.mapbox.com/mapbox-gl-js/v2.0.0/mapbox-gl.css' rel='stylesheet' />方式2：在main.js中引入import 'mapbox-gl/dist/mapbox-gl.css'vue页面内使用<script>import mapboxgl

转载 clip-path

原创 关于Font Awesome在火狐浏览器上不能正常显示的问题

1.关于Font Awesome在火狐浏览器上不能正常显示的问题，可能原因：浏览器访问地址是本地的，不是http请求！！！