Javascript
文章平均质量分 93
纯爱枫若情
前端数据可视化工程师
展开
-
vue-router 4.0 动态路由会跳转到 404 页面的问题
当然以上的代码只适用于我们文章一开始假设的场景,真实的业务场景中,应该会有更多更复杂的情况,但是万变不离其宗,只要理清了思路,掌握了原理,找到了应对方案,再复杂的场景也能一步步抽丝剥茧,应付起来将会游刃有余。所以,我们就会借用,router 提供的一些列的生命周期函数,来帮助我们确保,当用户信息存在的时候,能自动添加我们的动态路由。一种场景是,当用户未登录,这时候,也没有 vip 这个路由的存在,那么路由匹配不到,会直接被。为了用户体验的友好性,我们不可能让用户每次用我们的页面的时候,都先执行一遍登录。原创 2023-07-10 10:42:59 · 6586 阅读 · 2 评论 -
webgis —— 从指定层级开始显示某一张影像图
在效果上,我们的方案无疑是更胜一筹的,因为我们可以保证,在全球的任何地方、缩放到任何层级下某个坐标点上都会存在一张瓦片地图,区别只是,如果该坐标点落在我们关心的重点区域,就会出现精度高的瓦片,否则,只是一张放大了的低精度的瓦片。假设我们有一张 1m 分辨率的影像,差不多等同于,影像图中的一个像素点,就表示地理上的 1m x 1m 大小的范围,该幅图像表示的范围越大,就需要由越多的像素点组成。所以如果我们制作一副某个区域的影像图,拿不同分辨率的影像,放在对应的层级,最终构成一张影像金字塔,效果才是最自然的。原创 2022-08-24 22:37:20 · 1096 阅读 · 0 评论 -
react 中更好的 svg 使用方式
之前一直用 image 的方式使用 svg,后来,改把 svg 上传到阿里巴巴的 iconfont-阿里巴巴矢量图标库 使用。前段时间,iconfont 出问题了,不支持上传 svg,也不支持生成 cdn 了,只能下载到本地使用。后来,尝试使用了一下本地使用的方式,还是太麻烦,最主要,已经没法上传自己的 svg 了,还不利于团队协作,太不友好了。于是研究了一下,才发现,原来早就有更好的实现方式了,可以完全不依赖 iconfont 生成的资源来运作。说实话,有些细节,如果不是自己慢慢摸索,很难在一开始就发现。原创 2022-06-24 17:08:08 · 3987 阅读 · 0 评论 -
cesium 多边形线类型引发的思考
默认情况下,如果你用 entity 创建一个 rectangle 对象,你会发现他长下面这个样子。rectangle 的边是沿着经纬线的。但是如果你用 entity 创建一个 polygon 对象,你会发现,和 rectangle 长得不太一致,虽然,传入的坐标是一致的。观察一下,我们会发现,polygon 的边并不是沿着经纬度生成的。这样看好像不太直观,那我们把两个对象同时生成,就能更清楚的看出来差别了。当然为了区分,我给 polygon 加了点透明度,能够看的更清楚些。说来惭愧,很早接原创 2022-04-29 14:50:28 · 528 阅读 · 0 评论 -
解决 eslint 针对 jsdoc 类型变量 no-unused-vars 的报错
解决 eslint 针对 jsdoc 类型变量 no-unused-vars 的报错前言前端如果规范开发的话,肯定离不开 eslint。怎么用 eslint,在这里就不赘述了,不是这篇文章想展开的话题。当然,如果作为前端,你们团队是选用 typescript 开发的话,这篇文章想探求的话题,或许压根就不会成为你的烦恼。但是如果是用 js 的话,开发的时候又会用 eslint 来规范代码的话,并且,注重代码质量以及维护成本的话,或许也会碰到如同我一样的烦恼。虽然个人一直想用 typescript 进原创 2022-01-05 16:47:05 · 1838 阅读 · 0 评论 -
采用 canvas.toBlob 导出图片
采用 canvas.toBlob 导出图片前言一直以来,从工作以后接触都是与前端数据可视化相关的工作,所以对于 canvas 可谓是很熟悉了,这个标签要是从 w3c 的规范中抽离出去,可能我就自动失业了。闲言碎语不多说,开始回到正题。用 canvas 很多,难免要碰到将 canvas 绘制好的东西,导出成图片的需求。之前每次有将 canvas 导出图片的需求的时候,一般都是习惯性的采用 HTMLCanvasElement.toDataURL() - Web APIs | MDN 方法。最近发现,原创 2022-01-04 22:29:56 · 2735 阅读 · 0 评论 -
将 gif 贴到 cesium 三维球上
前言最近做项目的过程中,碰到一些不太寻常的需求——将 gif 图贴到三维球上。首先我们分析下这一需求,朝 cesium 三维球上贴图并非难事,很多方式都能做到。采用多边形、方形、甚至于 SingleTileImageryProvider api,都能做到。但是问题最麻烦的地方在于,不仅仅要贴图片,而是需要贴 gif 动图。如果不是动图,而是一系列静态图片的话,实现起来的难度反而小一些。无非是,设置一些定时器,定时将当前加载的图片切换为下一张。笔者之前,就做过这种轮播效果。原创 2021-09-24 11:29:52 · 1151 阅读 · 0 评论 -
当使用 history 模式的前端路由时静态资源服务器配置详解
前言对于前端工程师而言,多多少少会碰到按需加载的需求。比如一个系统,需要用户登陆以后才能使用,对于传统的前后端未分离的情况,我们一般的处理方式是,当检测到用户未登录的时候,一般会重定向到登录页面,让用户进行登录。但是对于前后端分离的情况,前端工程师一般倾向于单页面的处理模式,而想要处理这种情况的话,我们一般传统的做法是,会选择采用 location.search 的方式,即通过参数来判断。比如检测到用户没登陆,我们会刷新页面,自动在地址后面加上诸如 ?page=login 等形式的参数,原创 2021-05-19 12:40:42 · 1763 阅读 · 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 · 3280 阅读 · 0 评论 -
离线环境下使用 cesium
前言不知道你在使用 cesium 的时候,有没有离线使用的需求。也许你会说没有,但是如果你碰到如下情景,你该怎么处理呢?官方示例没法查看对于使用 cesium 的人来说,应该都会有一种困惑,明明是从官方网站上下载下来的包,但是没过多久,官方自带的示例都没使用了。打开以后,会发现三维部分变成黑黑的一片了,三维球并没有被创建出来。打开控制台,会发现如下这条请求报错了。从返回的参数,不难看出,之所以出现这个问题,是因为 token 未验证通过。为什么会出现这种情况呢?别着急,后面我会奉上自己原创 2021-04-13 23:29:49 · 6651 阅读 · 5 评论 -
cesium 直接加载 geotiff 影像图
前言最近碰到了一个需求,需要通过 cesium 直接加载 geotiff 影像图。咋一听,这个需求好像蛮奇怪,cesium 本身本来就支持加载 tile 影像图,也就是所谓的切片地图。原理其实就是,通过 geoserver 等工具,按照一定的规则和坐标系规则,切好对应的切片。而 cesium 里面,加载瓦片地图也很简单,想要显示哪个区域的地图,就根据对应的规则,去 geoserver 里请求对应的切片。这些逻辑在 cesium 里面,也已经封装好了,直接调用就好了。但是如果不想发布到 geoserv原创 2021-03-29 17:39:05 · 7063 阅读 · 19 评论 -
vscode 配合 eslint 自动格式化代码
vscode 配合 eslint 自动格式化代码前言最近在主导开发一个新项目,公司要求用 vue 来开发,用 vue-cli 生成了项目,就着手开动了。但是后来发现一个问题,挺令人恼火的。因为我默认在项目中开启了 eslint 检测代码,来保证项目代码的规范性。这个初衷是好的,但是坏就坏在,eslint 检测代码一开启,才发现自己代码中到处都是不符合规范的问题。一般情况下,遇到问题,第一...原创 2019-04-23 18:25:39 · 25293 阅读 · 1 评论 -
cesium 页面多 viewer 地图加载过缓解决方案
cesium 页面多 viewer 地图加载过缓问题解决方案小小吐槽一下自从开始搞 cesium 相关的东西,各种疑难杂症就开始接踵而至,层出不穷。更让人“气愤”的是,有些问题,就连 StackOverflow、Google 这种传统的解决问题的大杀招都不好用了,简直要给人气哭了好嘛!????不知道是不是因为搞 cesium 的人太少了,还是因为愿意分享的人太少了,不过从 GitHub 的关注度,其实也能看出点端倪。就拿同是 web 可视化三维框架的 three.js 和 cesium 来作对比吧原创 2020-12-28 17:43:04 · 6968 阅读 · 10 评论 -
cesium 切换瓦片地图的加载方式
cesium 切换瓦片地图的加载方式如果你熟悉 cesium,那么你或多或少应该用过或者了解如何用 cesium 加载瓦片地图。熟悉加载瓦片地图这本身不是一个太难的工作,一般来说,只要你照着官方的沙盒中的示例,一般都能轻松掌握。但是问题是,只要你细心研究过,你就会发现,cesium 加载瓦片地图,居然是用 ajax 请求的方式来加载贴图的。这种加载方式的优劣我们姑且不论,cesium 选择这种方式必然会有其意义所在。但是问题是,为什么翻遍 api 和源码,都没有找到一个方式,可以更换贴图的加载方原创 2020-12-07 00:14:11 · 4357 阅读 · 3 评论 -
cesium 模拟地球自转
cesium 模拟地球自转cesium 现有的机制分析默认情况下,cesium 的球体其实在三维中是保持静止的状态。而随着时间的流逝,默认的背景星空,是在不断地旋转的。这个逻辑,我们从 cesium 的源码中就能发现端倪。cesium 的 Scene 对象中,有个 render 方法,每一帧都被会调用,用于场景的重绘。而 render 中有个 updateEnvironment 方法,用于更新环境updateEnvironment 方法中,有一段更新 skyBox 的代码,同时我们能看到的原创 2020-11-04 11:14:17 · 3107 阅读 · 3 评论 -
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 · 1283 阅读 · 1 评论 -
使用 socket.io 的时候,打包后台代码碰到的问题
前言一般情况下,我们只会针对前端代码,用 webpack 或者其他流行的打包工具进行打包。因为对于前端而言,打包有好些不言而喻的好处,比如:代码开发的时候更模块化在生产环境下,减少 http 请求,使页面加载更快在 babel 等工具的协助下,让我们可以在老版本的浏览器上运行最新的 js 特性可以选择性的使用 typescript 进行开发,给前端代码加上类型限制。。。由我上面列的几条可以看到,对于目前阶段,前端项目打包,已经是主流的选择了。但是你有没有碰到后端也要打包的呢?其实对于原创 2020-06-25 14:08:38 · 672 阅读 · 0 评论 -
nodejs 前后端数据加密方案
nodejs 前后端数据加密方案前言即时没有深入研究过密码学,但是对于数据加密,我想应该很多同学都有所接触吧。虽然对于前端来说,其实数据加密的意义并不大。你代码都给人家了,只要有技术,有耐心,破解就只是时间的问题了。在对待前端加密的态度上面,我始终秉承着一句话:“防小人,不防君子”。但是奈何,很多时候,你不想做这么白费心力的事情,但是老板不答应。我本将心向明月,奈何明月照沟渠。很多时...原创 2020-03-22 13:27:15 · 2644 阅读 · 0 评论 -
前端 ajax 加载缓存方案 —— 图片强制缓存
前端 ajax 加载缓存方案 —— 图片强制缓存前言上一篇 写了关于前端如何缓存 ajax 加载的数据,如果对这个话题感兴趣又没有看过的童鞋,不妨前去一观:https://blog.csdn.net/lovefengruoqing/article/details/103780958。这一篇文章是上一篇文章的后续,所以,如果没看过上一篇文章的话,有些内容可能理解起来,还是有点障碍的,因为有些前...原创 2020-01-17 23:07:35 · 2890 阅读 · 0 评论 -
前端 ajax 加载缓存方案
前端 ajax 加载缓存方案前言前端页面,对于用户来说,衡量其好坏,最直观的印象是加载速度。如果页面一点开即渲染好了,那么用户第一印象分也会高,其次才是页面设计的美观度,页面布局的合理性等等因素。一些常用的前端缓存我想,前端工程师都知道,由于网络传输的环境的限制,很多时候,页面加载的瓶颈其实是在 ajax 请求上面的。对于 html、css、image 等等静态资源,服务器一般都会通知...原创 2019-12-31 13:07:01 · 804 阅读 · 1 评论 -
一文让你搞懂cookie
一文让你搞懂cookie不知道你是否了解 cookie,并且掌握了它的用法。如果你像我以前一样,对 cookie 的概念也是略知一二,但是用起来却一筹莫展,那么此时此刻你是幸运的。只要你跟随者我这篇文章的步伐,就能让你彻底的搞懂 cookie 了。接下来,让我们言归正传吧。什么是 cookie首先让我们引用一段 mdn 上的 cookie 的定义:An HTTP cook...原创 2019-12-23 01:00:24 · 756 阅读 · 0 评论 -
给 dom 元素添加 onresize 功能
html 元素自适应对于我们做前端可视化的人来说,最苦恼的一个地方莫过于,客户需要我们对产品做自适应,特别是还需要做 pc 端的自适应。一般,面对这个需求的时候,由普通的 html 元素(不包含 canvas)构成的页面,你可以通过对元素的尺寸进行特殊的设置,不采用常用的 px 方案,而是通过设置百分比、vw、em 等方式,或者通过媒体查询,或者通过近些年比较流行的 flex 弹性布局 等...原创 2019-11-18 19:17:56 · 1454 阅读 · 0 评论 -
removeEventListener “不生效”的思考
缘起有时候,在项目中出现的问题,往往是因为对一些基本概念理解的不太透彻,导致在使用过程中进行大量的误用,最后导致在找 bug 的过程中搞得心力交瘁。最近我就碰到一起由于 removeEventListener 移除“失效” 导致引起的 bug。起因是由于,我们之前做了一个项目,项目是用 vue 写的。由于是和同事一起写的,所以对于有些地方,掌握的还是很难达到自己写的代码那么透彻的。因为我们...原创 2019-11-12 13:16:47 · 8027 阅读 · 1 评论 -
canvas 性能优化之 putImageData 的思考
作为一名前端数据可视化工程师来说,canvas 的使用可以说是最最基础的基本功了。canvas 虽然只是一个 html 的标签,但是可以干的事情,却远远比普通的 html 标签大得多。canvas 是一个画布,提供给我们绘图的功能,而且更神奇的是,它同时给我们提供了 2d 绘图和 3d 绘图的功能。这个 2d 和 3d 当然是广义的概念,不针对具体背后使用的技术原理。如果真的要细分的话,可...原创 2019-10-14 09:59:10 · 3673 阅读 · 0 评论 -
解决 create-react-app 生成的项目中不弹出配置就无法自定义 eslint global 变量的问题
create-react-app 是非常好用的前端 react 脚手架工具,而且还是 Facebook 官方出品的,如果没有特殊的要求,现阶段一般都推荐直接使用这个来构建项目。但是最近碰到一个问题,折腾了我好久才找到解决方案。首先我们知道,create-react-app 默认是配置了 eslint 的,但是如果我们不将配置 eject 出来的情况下,我们是无法通过在项目根目录添加 .esli...原创 2019-10-13 10:55:26 · 1005 阅读 · 0 评论 -
针对 windows 32/64 位系统,构建一键运行的 nodejs 静态资源服务器
前言因为工作性质,经常需要给客户发包,更新迭代我们正在做的项目的版本。大部分时候,我们的项目主要是依赖浏览器环境运行的,偶尔可能要带上数据库,带上后台服务器。但是问题就在于,我们主要做 2d、3d 数据可视化产品的。通俗点说,就是主要用到 canvas 2d 或者 canvas 3d webgl 来做我们的产品。由于浏览器的安全限制或者技术本身的限制,代码运行的时候,有些资源只能跑在服务器...原创 2019-06-12 14:43:00 · 718 阅读 · 0 评论 -
js 函数的重载
我们知道,很多编程语言都有函数的重载。所谓的重载,看定义:重载,简单说,就是函数或者方法有相同的名称,但是参数列表不相同的情形,这样的同名不同参数的函数或者方法之间,互相称之为重载函数或者方法。同名函数,根据传入的参数类型不同,来执行对应的方法。所以从这个定义中,我们能够得出,js 并不具备函数的重载功能。因为 js 不用对传入的参数的类型,进行严格的定义。所以,即使我们写了同名的函...原创 2019-05-07 01:32:21 · 345 阅读 · 0 评论 -
canvas 配合 zrender 绘制椭圆布局
前言最近碰到个用 canvas 绘制椭圆形的问题,研究了一下,发现挺有意思的。在经过一顿摸索以后,实现的效果,也还是挺不错的,在这个过程中也学到了不少东西吧。ellipse 方法兼容性问题之前没绘制过椭圆,上手,当然是想找找 canvas 原生有没有类似的 api 了。于是就上 mdn 搜索一番,这一找,还真的发现有类似的 api,不得不感概,这就太巧了,这问题不就不算问题了么。但是...原创 2019-04-28 18:10:30 · 921 阅读 · 0 评论 -
canvas 原生 api 实现锥形渐变(conic-gradient)
canvas 原生 api 实现锥形渐变(conic-gradient)原创 2019-04-26 00:56:20 · 1194 阅读 · 0 评论 -
如何在html页面上画一条渐变线
1.前言有时候,你需要画一条这种渐变线:你抓耳挠腮,冥思苦想,最后发现好像还是没有什么明确的思路。别慌,接下来我将手把手教你几种方法,在页面上画渐变线。2.正文2.1div实现 用div配合css3可以完美的实现这种渐变效果:图片: https://images-cdn.shimo.im/VLhelHbIoKgFDkpf/image.png而实现这种效果的代码...原创 2018-06-29 18:28:03 · 9745 阅读 · 0 评论 -
js中自己实现bind函数的方式
前言最近由于工作比较忙,好久都没时间静下心来研究一些东西了。今天在研究 call 和 apply 的区别的时候,看到 github 上面的一篇文章,看完以后,感觉启发很大。文章链接为 https://github.com/lin-xin/blog/issues/7 ,有兴趣的童鞋可以前往学习一下。但是我主要想写的并不是我今天学习了这篇博文,那样也就太没有技术含量了对吧。bind...原创 2018-05-04 19:06:24 · 17841 阅读 · 6 评论 -
今天做过的一道js题目解析
今天做过的一道js题目解析time:2017-03-03 22:11:45今天做题的时候,无意中做到一道这样的题:var obj = {"key":"1", "value":"2"};var newObj = obj;newObj.value += obj.key;console.log(newObj);初看的时候,感觉好简单,当时就不加思索的给出了{"key": "1", "value":"原创 2017-03-04 09:40:02 · 676 阅读 · 1 评论 -
验证JavaScript函数“按参数传递”特性引发的思考
验证JavaScript函数“按参数传递”特性引发的思考俗话说,“书读百遍,其义自见”。阅读专业性的书籍更是需要不断去啃,直到读懂,完全理解为止。之前看了好几遍《JavaScript高级程序设计》,每看一遍都觉得好像对JavaScript这门语言有了更深层次的理解。这次看到本书的“4.1 基本类型和引用类型的值”这一章节的时候,又忍不住动手验证了一下代码。原创 2017-03-01 13:55:24 · 306 阅读 · 0 评论 -
vue 子元素捕获导致其 click 事件被父元素 mousedown 事件“屏蔽掉”的问题
今天在做产品的时候,碰到一个需要添加右键菜单的功能。本来一般碰到这种问题,都是直接找找看下有没有类似的插件,毕竟比较省心,但是缺点是,需要小小的看下代码,学下api。但是找了一圈,弹出框有不少优秀的开源插件,但是右键菜单还真是没找到合适的啊,找到几个,用的人特别少,看了下代码,感觉还不如自己开发一个。毕竟用的 vue,写起来也不是太过于繁琐。于是说干就干,经过一段时间的劈里啪啦的奋战,终于初...原创 2019-07-08 17:37:48 · 3978 阅读 · 0 评论 -
1. 深入理解 WebGLShader 对象
概念WebGL API 的 WebGLShader 可以是一个顶点着色器(vertex shader)或片元着色器(fragment shader)。每个 WebGLProgram 都需要这两种类型的着色器。创建流程要创建一个 WebGLShader 需要使用 WebGLRenderingContext.createShader,通过 WebGLRenderingContext.shade...原创 2019-07-19 17:22:03 · 684 阅读 · 0 评论 -
react 脚手架打包不生成 sourceMap 的解决方案
react 脚手架打包不生成 sourceMap 的解决方案前言我相信很多前端工程师都跟我一样,用惯了开源的项目脚手架工具以后,都不习惯自己配置 webpack 了。经常听同行们开玩笑说,某某某个公司要启动一个项目,所有的人员都配置好了,就缺一个首席 webpack 工程师了。虽然是一句玩笑话,但是从侧面也反映出来了,想把 webpack 配置好,是不多么不容易的事情。自己动手给项目配置 ...原创 2019-09-28 10:59:36 · 4439 阅读 · 3 评论 -
echarts 移动端自适应配置不生效的问题
echarts 是百度开源的一个数据可视化图表库,用来展示数据非常的便捷。下面是官网的简介:ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。最近在...原创 2019-09-06 23:57:39 · 2610 阅读 · 0 评论 -
canvas 适配浏览器可视窗口出现滚动条问题
canvas 适配浏览器可视窗口出现滚动条问题一般来说,对于前端数据可视化工程师来说,canvas 是个极好的工具。既能用 canvas 2d 调用 CanvasRenderingContext2D 的 api 来绘制各种图表、图形,这个主要依赖 cpu 来计算。也能用 canvas 3d webgl 来绘制各种图形、图表,它主要依赖 gpu 来绘制各种图形。最近突然遇到一个问题是,我有一个...原创 2019-09-17 16:06:09 · 4720 阅读 · 0 评论 -
用 scale 打造自由缩放的 canvas 画布
虽然本身是一枚前端数据可视化工程师,但是说实话,由于本身从事这一行的时间并不长,因此对于一些基础的知识,了解的其实并不透彻,也就是俗话说的,知其然不知其所以然吧。目前,对于前端的数据可视化来说,主要有三种不同的方向吧,分别是canvas 2d,canvas 3d webgl 以及 svg。这三种方式各有优劣吧,对于不同的场景,相互配合起来,才能发挥最大的作用。因此对于一个前端数据可视化工程师来...原创 2019-08-29 23:11:17 · 4456 阅读 · 2 评论 -
用 translate 构建无限大小的画布
之前写过一篇文章——用 scale 构建可缩放的画布,这次就来介绍下,另外一个很有意思的 canvas api,叫做 translate。按照惯例,还是先上 mdn 文档:https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/translate,避免因为我个人的拙见,而对大家产生什么误导。首先 tra...原创 2019-08-29 23:05:36 · 2623 阅读 · 1 评论