纯爱枫若情的博客

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

打造最简洁的 typescript + react + webpack + eslint 开发环境前言作为一枚前端开发者来说，与时俱进是少不了的。近些年来的各种前端开发工具层出不穷，让人眼花缭乱。虽然单纯的写一个页面，用 html、css、JavaScript 三者就够了，甚至有的简单的页面，连 JavaScript 也不需要，单凭 html + css 就足以胜任。但是对于大型的项目来说，不用前端框架开发，项目简直就是灾难现场。一般而言，大型项目都不会是由一个人单独开发完成的，而是需要多人协作

nodejs 前后端数据加密方案前言即时没有深入研究过密码学，但是对于数据加密，我想应该很多同学都有所接触吧。虽然对于前端来说，其实数据加密的意义并不大。你代码都给人家了，只要有技术，有耐心，破解就只是时间的问题了。在对待前端加密的态度上面，我始终秉承着一句话：“防小人，不防君子”。但是奈何，很多时候，你不想做这么白费心力的事情，但是老板不答应。我本将心向明月，奈何明月照沟渠。很多时...

前端 ajax 加载缓存方案 —— 图片强制缓存前言上一篇 写了关于前端如何缓存 ajax 加载的数据，如果对这个话题感兴趣又没有看过的童鞋，不妨前去一观：https://blog.youkuaiyun.com/lovefengruoqing/article/details/103780958。这一篇文章是上一篇文章的后续，所以，如果没看过上一篇文章的话，有些内容可能理解起来，还是有点障碍的，因为有些前...

前端 ajax 加载缓存方案前言前端页面，对于用户来说，衡量其好坏，最直观的印象是加载速度。如果页面一点开即渲染好了，那么用户第一印象分也会高，其次才是页面设计的美观度，页面布局的合理性等等因素。一些常用的前端缓存我想，前端工程师都知道，由于网络传输的环境的限制，很多时候，页面加载的瓶颈其实是在 ajax 请求上面的。对于 html、css、image 等等静态资源，服务器一般都会通知...

一文让你搞懂cookie不知道你是否了解 cookie，并且掌握了它的用法。如果你像我以前一样，对 cookie 的概念也是略知一二，但是用起来却一筹莫展，那么此时此刻你是幸运的。只要你跟随者我这篇文章的步伐，就能让你彻底的搞懂 cookie 了。接下来，让我们言归正传吧。什么是 cookie首先让我们引用一段 mdn 上的 cookie 的定义：An HTTP cook...

html 元素自适应对于我们做前端可视化的人来说，最苦恼的一个地方莫过于，客户需要我们对产品做自适应，特别是还需要做 pc 端的自适应。一般，面对这个需求的时候，由普通的 html 元素（不包含 canvas）构成的页面，你可以通过对元素的尺寸进行特殊的设置，不采用常用的 px 方案，而是通过设置百分比、vw、em 等方式，或者通过媒体查询，或者通过近些年比较流行的 flex 弹性布局 等...

缘起有时候，在项目中出现的问题，往往是因为对一些基本概念理解的不太透彻，导致在使用过程中进行大量的误用，最后导致在找 bug 的过程中搞得心力交瘁。最近我就碰到一起由于 removeEventListener 移除“失效” 导致引起的 bug。起因是由于，我们之前做了一个项目，项目是用 vue 写的。由于是和同事一起写的，所以对于有些地方，掌握的还是很难达到自己写的代码那么透彻的。因为我们...

作为一名前端数据可视化工程师来说，canvas 的使用可以说是最最基础的基本功了。canvas 虽然只是一个 html 的标签，但是可以干的事情，却远远比普通的 html 标签大得多。canvas 是一个画布，提供给我们绘图的功能，而且更神奇的是，它同时给我们提供了 2d 绘图和 3d 绘图的功能。这个 2d 和 3d 当然是广义的概念，不针对具体背后使用的技术原理。如果真的要细分的话，可...

create-react-app 是非常好用的前端 react 脚手架工具，而且还是 Facebook 官方出品的，如果没有特殊的要求，现阶段一般都推荐直接使用这个来构建项目。但是最近碰到一个问题，折腾了我好久才找到解决方案。首先我们知道，create-react-app 默认是配置了 eslint 的，但是如果我们不将配置 eject 出来的情况下，我们是无法通过在项目根目录添加 .esli...

页面访问时候 Mixed Content 错误的解决方案之前给客户做的一个项目，我们提供的是纯前端的三维数据可视化界面，但是数据还是从客户那边获取过来的。客户给我们提供了一个数据接口，我们通过接口获取到数据以后，再经过处理，然后展示到我们的界面上。之前从开发，到测试，到交付，这种模式一直用的没问题。后来某一天，客户突然找过来，问为什么他们将项目打包以后，部署到线上去，就发现出问题了，页面场...

cnpm 安装全局模块引发的思考起因因为工作的时候，公司提供的是 Windows 台式机，因此一般都是在 Windows 环境下开发的。但是最近在用 cnpm 安装脚本的时候，忽然发现一个很有意思的问题：用 cnpm 安装的全局脚本，比如 vue-cli 居然只能在 cmd 中运行，无法在 powerShell 中运行。类似的问题，其实以前也碰到过，但是以前一般都是报着能用就用，不去深究原...

react 脚手架打包不生成 sourceMap 的解决方案前言我相信很多前端工程师都跟我一样，用惯了开源的项目脚手架工具以后，都不习惯自己配置 webpack 了。经常听同行们开玩笑说，某某某个公司要启动一个项目，所有的人员都配置好了，就缺一个首席 webpack 工程师了。虽然是一句玩笑话，但是从侧面也反映出来了，想把 webpack 配置好，是不多么不容易的事情。自己动手给项目配置 ...

虽然本身是一枚前端数据可视化工程师，但是说实话，由于本身从事这一行的时间并不长，因此对于一些基础的知识，了解的其实并不透彻，也就是俗话说的，知其然不知其所以然吧。目前，对于前端的数据可视化来说，主要有三种不同的方向吧，分别是canvas 2d，canvas 3d webgl 以及 svg。这三种方式各有优劣吧，对于不同的场景，相互配合起来，才能发挥最大的作用。因此对于一个前端数据可视化工程师来...

前言chrome 浏览器有 12 px 的字体的限制，因此对于 vw 自适应布局，非常的不友好。我之前曾经写过一篇文章，用 svg 辅助页面文字自适应，它可以解决常见的 html 元素里面的文字不能小于 12 px 的问题。很不幸的是，最近我们的项目中加了 input 标签，于是采用之前的方案的问题就浮出水面了——它无法让 input 标签里面的字体在 chrome 中突破 12 px。但...

前言我们知道，在前端开发的过程中，最让人脑壳疼的就是页面的适配了。之所以说让人脑壳痛，倒不是说页面适配多么的困难。他不困难，就是做起来很很繁琐，特别是对于要移动端和 pc 端均要适配的页面，那处理起来就让人更头疼了。最近在做页面适配的时候，发现对于全设备（包括移动端和 pc 端）适配的时候，vw 和 vh 布局是一个很不错的方式（后面我们统一称呼维 vw 布局）。虽然不能保证在所有的屏幕尺寸...