- 博客(18)
- 收藏
- 关注
原创 openlayers 实现轨迹播放、框选、mark交互等功能
基于项目需求二次封装了openlayers。插件地址:https://github.com/ShengAndShu/ol-map。可以下载到本地查看代码实现和demo。git clonehttps://github.com/ShengAndShu/shengandshu.github.io.gitcd ol-mapnpm installnpm run dev轨迹播放...
2019-05-06 16:47:30
2492
1
原创 mac查看和配置node环境变量
一、检查PATH配置是否正确1. 查看npm全局包可执行文件路径npm -g bin2. 查看PATH环境变量echo $PATH如果PATH里不包括第一步的路径,说明环境变量没有配置好。二、配置PATH1. 打开配置文件vi ./.bash_profile2. 添加一行PATH(按i进入insert才能编辑)PATH=$PATH:/usr/l...
2019-04-29 17:42:46
15013
2
原创 canvas如何判断鼠标是否选中图形或线段
一、是否在闭合路径内1. 几何判断(适合规则图形)矩形:function isInsideRect (x0, y0, width, height, x, y) { return x >= x0 && x <= (x0 + width) && y >= y0 && y <= (y0 + height);}...
2018-11-23 12:10:24
5834
原创 angular何时应该手动unsubscribe
需要手动unsubscribe的情况:表单、路由、Renderer服务、infinite observable (如interval创建的)、redux中的store。不需要手动unsubscribe的情况:async pipe、HostListener、finite observable (如timer创建的和服务中创建的)。取消订阅的小技巧:使用takeUntilexpo...
2018-11-15 19:49:06
679
原创 angular5 升级到 angular7 步骤
一般情况下按照官网升级指南 update.angular.io 能够完成,但有些细节总是报错,这里记录一下。一、升级步骤1. 移除node_modules文件夹、package-lock.json或yarn.lock.2. 升级angular cli。ng5的cli是没有ng update命令的,必须升级到ng6以上才能执行npm install -g @angular/cli...
2018-11-01 10:09:49
3216
原创 angular使用拦截器统一配置接口错误提示
拦截器代码如下:import {Injectable} from '@angular/core';import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse} from '@angular/common/http';import {Observable} from 'rxjs/Observable'...
2018-09-18 11:33:13
4417
原创 angular 使用blob二进制流的方式下载后台文件
先说两个比较古老的js下载方式,1. window.open(src)和window.location = src2. form表单提交这两个方式都有局限性,对于需要传递大量参数的下载请求,可以这样写:this.http.post(`${this.uri}/exportdata.file`, params, {responseType: 'blob'}).subscribe(da...
2018-07-20 10:31:29
13281
3
原创 openlayers wms 和 canvas toDataURL的跨域问题
项目有个需求要把openlayers的地图转成base64用来导出,本来以为可以和echarts一样,用canvas的toDataURL就简单解决了,结果给我报了这个错误:Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.原来是跨域了,而echarts生成的canva...
2018-06-05 09:43:41
1405
原创 angular 接口请求不到数据的问题
最近在用ng5升级ext的老项目,发现post请求一直请求不到数据,最终发现原因是数据格式的问题。服务器接口接收的是form表单格式,而前端post请求发送的是json数据格式。比如下面这个请求:this.http.post(`${this.uri}/data/list.json`, req, headers);export const headers = {headers: new HttpH...
2018-03-20 11:07:48
1420
原创 angular4项目启动步骤
1. 安装node 官网地址:http://nodejs.cn/ 安装完成后,在命令行工具输入 node –v 可验证是否安装成功2. 配置淘宝镜像源 从国外服务器下载ng4和依赖包很慢,通过配置淘宝镜像源可以提高下载速度。 打开命令行工具输入:npm config set registry https://registry.npm.taobao.org配置完成后可通过npm c
2017-11-22 14:08:57
7055
1
原创 babel入门和那些坑
最初的babel只是单纯的ES6转ES5工具,随着应用范围越来越广,最新的babel6已经变成了一个转译平台,ES6转ES5只是其中一个插件的功能。 在线体验babel5 下面简单说下如何使用和可能遇到的坑。安装方式1. 进入项目目录,安装babel-cli (babel6 cli) 和 babel-preset-es2015(插件集合)。npm install --save-dev babel
2017-07-11 17:31:18
3534
原创 IE8和IE9使用filter实现渐变背景时的颜色问题
linear-gradient最低只支持IE10,所以要兼容IE8和IE9的话只能使用filter替代。代码如下:filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da,endColorstr=#1C85FB);/*IE<9>*/-ms-filter:"progid:DXImag
2017-06-29 17:24:03
991
原创 单行中文如何实现两端对齐
text-align: justify可以实现英文的两端对齐,但是它有两个缺陷: 只对多行文本有效,并且多行文本的最后一行无效 IE浏览器下只对英文有效 对于问题1,可以用 text-align-last: justify 解决,我自己测试在IE chrome firefox下都是有效果的; 对于问题2,可以用IE的私有属性 text-justify: inter-ideogr
2017-06-27 18:40:34
560
原创 javascript中神奇的隐式转换
最常见的==和!=造成的隐式转换,网上已经有很多人总结了,总结起来就一张图:Object → String → Number ↑ Boolean不同的类型会按箭头方向转换直到类型相等。 还有两点就是,null == undefined, 两者和其他类型做==运算都为false;NaN和所有类型包括自身做==运算都为false。下面是重点,到底哪些运算会造成
2017-05-11 10:41:59
444
原创 页面输出换行的问题
从textarea或者input获取的文本,再输出时会有换行消失的问题。实际上是/r和的区别。解决方法有两个:1.对文本内容进行替换str.replaceAll(" "," ").replaceAll("\r","br/>");2. 使用pre标签有一个缺点,pre标签内的内容不会自动换行,需要填加以下样式:pre {white-space:
2017-04-26 14:10:54
2426
原创 我的z-index怎么“失效”了?
大家有没有遇到这样的问题,给一个元素加上transform或者opacity等效果后,它的子元素的z-index就“失效了”?这里普及一个概念:stacking context,中文翻译叫做“堆叠上下文”,这里我们简称做“层”。 实际上,真正决定页面上堆叠顺序的并不是z-index,而是层。一个层就是页面上Z轴的一个单位,并且页面的Z轴并不是一维的,而是多维的,每一个层内部还可以包含多个层。
2017-02-25 21:54:12
4857
1
原创 javascript中的n++运算,它的运算过程到底是怎样的
var n=1;n=n++;console.log(n) //1之前我一直弄不懂为什么n++最终没有起到效果,原来我并没有弄懂后缀++的运算过程。 先看一道题目:var a=3,b;b=a++*a++;console.log(b) //12可以看出第一个a++是用3进行其他运算,第二个a++是用4进行其他运算,我们可以得出结论: 后缀++的运算过程:先用变量原值去参加其他运算(
2017-02-22 12:32:17
2797
原创 fullpage.js如何重置每页的animate()动画
fullpage插件如何重置每页的animate()动画我之前的在线简历每页的animate()动画只能在第一次加载时才会有效,第二次再翻到该页就没有动画了。 我仔细思考之后才发现: jQuery的animate()更像是CSS3的transition+transform,而不是像animation,animate()是会改变dom样式的afterLoad: function(anchorLin
2017-02-20 14:24:22
5892
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人