纯爱枫若情-CSDN博客

原创 vscode 通过 ssh 远程开发解决 node.js 版本问题

vscode 通过官方提供的插件，让我们可以直接通过 ssh 的连接方式，打开服务器上的代码库，远程进行开发。我相信，“高端” vscode 玩家一定尝试过该玩法，简直好处多多。但是用久了，难免会碰到一些问题。

2023-12-07 20:54:28 1362

原创 vue-router 4.0 动态路由会跳转到 404 页面的问题

当然以上的代码只适用于我们文章一开始假设的场景，真实的业务场景中，应该会有更多更复杂的情况，但是万变不离其宗，只要理清了思路，掌握了原理，找到了应对方案，再复杂的场景也能一步步抽丝剥茧，应付起来将会游刃有余。所以，我们就会借用，router 提供的一些列的生命周期函数，来帮助我们确保，当用户信息存在的时候，能自动添加我们的动态路由。一种场景是，当用户未登录，这时候，也没有 vip 这个路由的存在，那么路由匹配不到，会直接被。为了用户体验的友好性，我们不可能让用户每次用我们的页面的时候，都先执行一遍登录。

2023-07-10 10:42:59 5358 1

原创 sse 通过 deno 的正确打开方式

是一种通过 HTTP 实现 web 前端应用的服务器端推送的规范，它是属于上面我们说到的。首先，我们得了解下，在 deno 中，如何用标准库实现一个 http server。了解完以上这些前置信息后，回到我们这篇文章想要谈论的正题上来。不了解的童鞋可以去 deno 官网了解下，这里不做详细的介绍。deno 官方的示例中，有一个示例展示如何发送流数据。可能有些不了解的童鞋要问了，什么是 deno?"EventSource 结束消息异常""EventSource 连接成功"

2023-03-03 11:23:00 432 1

原创 webgis —— 为瓦片构建缓存

了解 webgis 或接触过 webgis 相关应用的童鞋应该知道，webgis 应用有个特点，加载影像地图或者矢量地图是刚需。相信对于国内的 gis 行业的从业者来说，天地图应该不是一个陌生的存在吧。它是官方出品的地图，权威性较高。它更新比较及时，每年都会对部分区域的影像进行更新。国内热门地方，影像精度较高，达到亚米级别。坐标系采用 wgs84 坐标系，无偏差，无加密。至于缺点嘛，这里就不做过多的介绍了，用过的童鞋自然会明白。

2022-12-13 15:32:43 1641 2

原创 webgis —— 从指定层级开始显示某一张影像图

在效果上，我们的方案无疑是更胜一筹的，因为我们可以保证，在全球的任何地方、缩放到任何层级下某个坐标点上都会存在一张瓦片地图，区别只是，如果该坐标点落在我们关心的重点区域，就会出现精度高的瓦片，否则，只是一张放大了的低精度的瓦片。假设我们有一张 1m 分辨率的影像，差不多等同于，影像图中的一个像素点，就表示地理上的 1m x 1m 大小的范围，该幅图像表示的范围越大，就需要由越多的像素点组成。所以如果我们制作一副某个区域的影像图，拿不同分辨率的影像，放在对应的层级，最终构成一张影像金字塔，效果才是最自然的。

2022-08-24 22:37:20 1017

原创 webgis —— geoserver 更优秀的瓦片格式

刚进目前所在的这家公司之前，其实我没有做过 webgis 方面的开发工作的，所以对于 gis 开发，我算是个完完全全的新手。那时候，我甚至连 wmts、wms 服务都不太能分得清。更不要说什么 openlayers、cesium、geoserver 这些了，统统都没怎么用过。想想，人对于未知的东西，就会产生恐惧。而客服恐惧的最好方式，就是不停的学习。很多时候，有了好的学习资料，有了好的学习方式，甚至于有了好的老师，完全可以让你事半功倍。相反，如果这些都没有，也只能让你事倍功半了。回过头来想想，对于 webg

2022-07-07 23:48:50 1454 3

原创 react 中更好的 svg 使用方式

之前一直用 image 的方式使用 svg，后来，改把 svg 上传到阿里巴巴的 iconfont-阿里巴巴矢量图标库使用。前段时间，iconfont 出问题了，不支持上传 svg，也不支持生成 cdn 了，只能下载到本地使用。后来，尝试使用了一下本地使用的方式，还是太麻烦，最主要，已经没法上传自己的 svg 了，还不利于团队协作，太不友好了。于是研究了一下，才发现，原来早就有更好的实现方式了，可以完全不依赖 iconfont 生成的资源来运作。说实话，有些细节，如果不是自己慢慢摸索，很难在一开始就发现。

2022-06-24 17:08:08 3902

原创记一次发现墙火墙导致web网站无法正常访问的问题

前些天，公司的一个项目需要重新在异地的服务器上部署。说实话，因为一些特殊的原因，这个项目已经反复部署过很多遍了，说是得心应手也不过分了。在我们经过一些列的忙活之后，本以为即将大功告成的时候，却发生了意外，在做最后一步外网映射的时候，出现了让大家都束手无措的局面。在服务器所在的局域网内，直接通过内网 ip 地址访问的时候，网页是能够正常打开的。但是，当我们想通过映射出来的网址，访问网站的时候，发现老是出现访问不了的情况。一开始我们以为是服务器的网络状态太差。这种情况在之前也出现过，所以出了问题，第一时间我们就

2022-06-17 09:55:50 755

原创记一次浏览器预检请求跨域问题的踩坑

通用的跨域处理方案如果你是一枚前端工程师，我想应该或多或少对浏览器跨域请求有一些了解。跨域的详细知识，就不再这篇文章里赘述了。不太了解或者有兴趣了解一下的童鞋可以参考下 mdn 上的这篇文章：Cross-Origin Resource Sharing (CORS) - HTTP | MDN。文章内容写的很详尽，相信你看完以后，一定会有种恍然大悟的感觉。既然这篇文章，是想要记录下踩坑的历程，接下来肯定得详细记录下，坑出现在哪儿了。一般情况下，出现需要跨域请求之时，对于要求不高的地方，直接改下 we

2022-05-17 15:02:27 2053 1

原创 cesium 多边形线类型引发的思考

默认情况下，如果你用 entity 创建一个 rectangle 对象，你会发现他长下面这个样子。rectangle 的边是沿着经纬线的。但是如果你用 entity 创建一个 polygon 对象，你会发现，和 rectangle 长得不太一致，虽然，传入的坐标是一致的。观察一下，我们会发现，polygon 的边并不是沿着经纬度生成的。这样看好像不太直观，那我们把两个对象同时生成，就能更清楚的看出来差别了。当然为了区分，我给 polygon 加了点透明度，能够看的更清楚些。说来惭愧，很早接

2022-04-29 14:50:28 510

原创 css 多列布局不同浏览器兼容性引发的思考

css3 中引入了多列布局的模式。在 mdn 上有一篇文章，详细的介绍了相关信息，有兴趣的童鞋可以阅读下这篇文章：Multiple-column layout - Learn web development | MDN。但是笔者想针对每个应用了 column 布局的块级区域应用 flex 布局的时候，会出现火狐浏览器布局和 chrome 浏览器不相同的情况。demo 地址：multiple-column在 chrome 浏览器打开，状态是这样：但是在火狐浏览器上，打开，状态是这样的：很明显能

2022-04-26 14:26:44 397

原创解决 eslint 针对 jsdoc 类型变量 no-unused-vars 的报错

解决 eslint 针对 jsdoc 类型变量 no-unused-vars 的报错前言前端如果规范开发的话，肯定离不开 eslint。怎么用 eslint，在这里就不赘述了，不是这篇文章想展开的话题。当然，如果作为前端，你们团队是选用 typescript 开发的话，这篇文章想探求的话题，或许压根就不会成为你的烦恼。但是如果是用 js 的话，开发的时候又会用 eslint 来规范代码的话，并且，注重代码质量以及维护成本的话，或许也会碰到如同我一样的烦恼。虽然个人一直想用 typescript 进

2022-01-05 16:47:05 1798

原创采用 canvas.toBlob 导出图片

采用 canvas.toBlob 导出图片前言一直以来，从工作以后接触都是与前端数据可视化相关的工作，所以对于 canvas 可谓是很熟悉了，这个标签要是从 w3c 的规范中抽离出去，可能我就自动失业了。闲言碎语不多说，开始回到正题。用 canvas 很多，难免要碰到将 canvas 绘制好的东西，导出成图片的需求。之前每次有将 canvas 导出图片的需求的时候，一般都是习惯性的采用 HTMLCanvasElement.toDataURL() - Web APIs | MDN 方法。最近发现，

2022-01-04 22:29:56 2552

原创 nginx 发布前端资源的缓存方案

nginx 发布前端资源的缓存方案前言对于前端开发者来说，最头疼的事情莫过于。当你兴冲冲的给项目打包以后，上传到 nginx 等静态资源服务器发布以后，自己本地验证没问题，以为万事大吉，结果测试人员、用户反馈系统没更新，让你顿时感觉如同吃了苍蝇般难受。没办法，作为一个专业的开发人员，用户反馈程序出问题，第一时间就要找到问题出现的原因。于是你开始进行检查确认工作，先是打开浏览器访问系统发现没问题，确实是更新以后的版本。然后你开始对自己更新的过程产生了怀疑，上服务器，检查一下更新以后的资源文件，再三的详

2021-12-18 18:00:53 4948

原创 windows 下将 nginx 安装为服务

在 linux 和 mac 下面，可以很快捷的通过各种工作或者源码编译的方式，安装使用 nginx。但是由于平台的原因，在 windows 下大部分人都是直接用的 nginx 官方提供的二进制包。这个二进制包，下载下来以后，双击就能直接运行 nginx，在免安装模式下就能用。但是问题是，虽然 nginx 很稳定，一般不会轻易挂掉，但是 windows 系统不像 linux 机器一样，一旦开机，如果不是由于断电或者服务器故障这种意外的情况发生，一般都不会关机。正常情况下，大部分人在用完 nginx 机器

2021-12-15 13:45:57 4109

原创 cesium 解决 WebGLRenderingContext 丢失问题

通常来说，对于大多数使用场景，页面上只需要创建一个 cesium 的 viewer 就够用了。但是架不住，某些情况下，会需要多个 viewer 的存在。了解 cesium 的童鞋应该知道，一般情况下，一个 viewer 对应着一个 webgl context，如果有多个就会存在多个 WebGLRenderingContext。如果还不了解 WebGLRenderingContext 是什么的童鞋，建议去了解学习下 webgl 相关的知识，下面送上学习链接：https://develope

2021-11-29 17:35:19 5049 2

原创将 gif 贴到 cesium 三维球上

前言最近做项目的过程中，碰到一些不太寻常的需求——将 gif 图贴到三维球上。首先我们分析下这一需求，朝 cesium 三维球上贴图并非难事，很多方式都能做到。采用多边形、方形、甚至于 SingleTileImageryProvider api，都能做到。但是问题最麻烦的地方在于，不仅仅要贴图片，而是需要贴 gif 动图。如果不是动图，而是一系列静态图片的话，实现起来的难度反而小一些。无非是，设置一些定时器，定时将当前加载的图片切换为下一张。笔者之前，就做过这种轮播效果。

2021-09-24 11:29:52 1106

原创当使用 history 模式的前端路由时静态资源服务器配置详解

前言对于前端工程师而言，多多少少会碰到按需加载的需求。比如一个系统，需要用户登陆以后才能使用，对于传统的前后端未分离的情况，我们一般的处理方式是，当检测到用户未登录的时候，一般会重定向到登录页面，让用户进行登录。但是对于前后端分离的情况，前端工程师一般倾向于单页面的处理模式，而想要处理这种情况的话，我们一般传统的做法是，会选择采用 location.search 的方式，即通过参数来判断。比如检测到用户没登陆，我们会刷新页面，自动在地址后面加上诸如 ?page=login 等形式的参数，

2021-05-19 12:40:42 1670 1

原创高德地图 sdk 加载 geoserver 发布的瓦片地图服务

前言最近，碰到了需求，想要在高德 sdk 中使用在 geoserver 里面发布的瓦片地图。还好经过一番研究，在其官方文档中发现，从新版本（v1.4.3开始）的高德 sdk 开始，已经支持加载第三方 wms/wmts 服务了。为了测试一下是否能用，我们先将官方的示例拷贝过来试一试。wms 服务先试试 wms 服务加载：var wms = new AMap.TileLayer.WMS({ url: "https://ahocevar.com/geoserver/wms", blend:

2021-05-13 16:11:06 3055

原创离线环境下使用 cesium

前言不知道你在使用 cesium 的时候，有没有离线使用的需求。也许你会说没有，但是如果你碰到如下情景，你该怎么处理呢？官方示例没法查看对于使用 cesium 的人来说，应该都会有一种困惑，明明是从官方网站上下载下来的包，但是没过多久，官方自带的示例都没使用了。打开以后，会发现三维部分变成黑黑的一片了，三维球并没有被创建出来。打开控制台，会发现如下这条请求报错了。从返回的参数，不难看出，之所以出现这个问题，是因为 token 未验证通过。为什么会出现这种情况呢？别着急，后面我会奉上自己

2021-04-13 23:29:49 6123 5

原创用伪类和 svg 来实现 loading 效果

前言之前用 antd，一直很好奇，antd 里面这种按钮的 loading 效果是怎么做出来的。最近刚好有兴趣，就花时间好好的研究了一下，这个效果究竟是如何实现的。首先我们打开控制台，可以看到，加载的时候，动态的遮罩，就是通过这个 ::before 这个伪类添加上去的。想要自己尝试的童鞋，可以试着将 before 删除掉，就会发现，按钮上的遮罩消失了。而按钮文字上的 loading 小圆圈又是如何实现的呢？这个很简单，antd 本身就有这种 Icon 组件。知道了基本原理以后，那么我们就可

2021-04-09 23:57:33 436

原创 cesium 直接加载 geotiff 影像图

前言最近碰到了一个需求，需要通过 cesium 直接加载 geotiff 影像图。咋一听，这个需求好像蛮奇怪，cesium 本身本来就支持加载 tile 影像图，也就是所谓的切片地图。原理其实就是，通过 geoserver 等工具，按照一定的规则和坐标系规则，切好对应的切片。而 cesium 里面，加载瓦片地图也很简单，想要显示哪个区域的地图，就根据对应的规则，去 geoserver 里请求对应的切片。这些逻辑在 cesium 里面，也已经封装好了，直接调用就好了。但是如果不想发布到 geoserv

2021-03-29 17:39:05 6697 19

原创 cesium 页面多 viewer 地图加载过缓解决方案

cesium 页面多 viewer 地图加载过缓问题解决方案小小吐槽一下自从开始搞 cesium 相关的东西，各种疑难杂症就开始接踵而至，层出不穷。更让人“气愤”的是，有些问题，就连 StackOverflow、Google 这种传统的解决问题的大杀招都不好用了，简直要给人气哭了好嘛！????不知道是不是因为搞 cesium 的人太少了，还是因为愿意分享的人太少了，不过从 GitHub 的关注度，其实也能看出点端倪。就拿同是 web 可视化三维框架的 three.js 和 cesium 来作对比吧

2020-12-28 17:43:04 6717 10

原创 cesium 切换瓦片地图的加载方式

cesium 切换瓦片地图的加载方式如果你熟悉 cesium，那么你或多或少应该用过或者了解如何用 cesium 加载瓦片地图。熟悉加载瓦片地图这本身不是一个太难的工作，一般来说，只要你照着官方的沙盒中的示例，一般都能轻松掌握。但是问题是，只要你细心研究过，你就会发现，cesium 加载瓦片地图，居然是用 ajax 请求的方式来加载贴图的。这种加载方式的优劣我们姑且不论，cesium 选择这种方式必然会有其意义所在。但是问题是，为什么翻遍 api 和源码，都没有找到一个方式，可以更换贴图的加载方

2020-12-07 00:14:11 4259 3

原创 cesium 模拟地球自转

cesium 模拟地球自转cesium 现有的机制分析默认情况下，cesium 的球体其实在三维中是保持静止的状态。而随着时间的流逝，默认的背景星空，是在不断地旋转的。这个逻辑，我们从 cesium 的源码中就能发现端倪。cesium 的 Scene 对象中，有个 render 方法，每一帧都被会调用，用于场景的重绘。而 render 中有个 updateEnvironment 方法，用于更新环境updateEnvironment 方法中，有一段更新 skyBox 的代码，同时我们能看到的

2020-11-04 11:14:17 2994 3

原创 line-height 引发的思考

line-height 引发的思考 ????发人深思上一篇文章发过 dat.gui 相关的内容，这一篇，巧的是，又是与 dat.gui 有那么点关联的。前些天，同事忽然问我一个问题，他说他在代码里面引入了 antd 的 css，却导致 dat.gui 的输入框的高度发生了改变，就下下面这样：但是很奇怪的是，为什么用 chrome 的 devtool，却并为发现，针对该 input 元素，对高度有啥改动。刚开始，听到这问题的时候，我也很困惑，没有结论，到底是什么导致的。但是，凭借多年的开发经验

2020-07-30 23:28:06 274 1

原创 dat.gui 控制显示_隐藏状态

dat.gui 控制显示/隐藏状态作为一枚前端工程师，如果你用过 three.js，那么你一定被安利过了 dat.gui 这个工具。如果你没用过 dat.gui，又感兴趣的话，建议你去官方仓库去了解下 https://github.com/dataarts/dat.gui。这里还有个很有趣的网站：http://workshop.chromeexperiments.com/examples/gui/#1–Basic-Usage，可以帮助你直观的感受下，dat.gui 的用法。![截屏2020-07-2

2020-07-28 01:35:30 1235 1

空空如也

空空如也