shengandshu-CSDN博客

原创 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 2454 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 14692 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 5657

原创 angular何时应该手动unsubscribe

需要手动unsubscribe的情况：表单、路由、Renderer服务、infinite observable (如interval创建的)、redux中的store。不需要手动unsubscribe的情况：async pipe、HostListener、finite observable (如timer创建的和服务中创建的)。取消订阅的小技巧：使用takeUntilexpo...

2018-11-15 19:49:06 665

原创 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 3203

原创 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 4393

原创 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 13166 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 1371

原创 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 1382

原创 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 7039 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 3504

原创 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 976

原创单行中文如何实现两端对齐

text-align: justify可以实现英文的两端对齐，但是它有两个缺陷：只对多行文本有效，并且多行文本的最后一行无效 IE浏览器下只对英文有效对于问题1，可以用 text-align-last: justify 解决，我自己测试在IE chrome firefox下都是有效果的；对于问题2，可以用IE的私有属性 text-justify: inter-ideogr

2017-06-27 18:40:34 540

原创 javascript中神奇的隐式转换

最常见的==和!=造成的隐式转换，网上已经有很多人总结了，总结起来就一张图：Object → String → Number ↑ Boolean不同的类型会按箭头方向转换直到类型相等。还有两点就是，null == undefined, 两者和其他类型做==运算都为false；NaN和所有类型包括自身做==运算都为false。下面是重点，到底哪些运算会造成

2017-05-11 10:41:59 434

原创页面输出换行的问题

从textarea或者input获取的文本，再输出时会有换行消失的问题。实际上是/r和的区别。解决方法有两个：1.对文本内容进行替换str.replaceAll(" "," ").replaceAll("\r","br/>");2. 使用pre标签有一个缺点，pre标签内的内容不会自动换行，需要填加以下样式：pre {white-space:

2017-04-26 14:10:54 2407

原创我的z-index怎么“失效”了？

大家有没有遇到这样的问题，给一个元素加上transform或者opacity等效果后，它的子元素的z-index就“失效了”？这里普及一个概念：stacking context，中文翻译叫做“堆叠上下文”，这里我们简称做“层”。实际上，真正决定页面上堆叠顺序的并不是z-index，而是层。一个层就是页面上Z轴的一个单位，并且页面的Z轴并不是一维的，而是多维的，每一个层内部还可以包含多个层。

2017-02-25 21:54:12 4838 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 2739

原创 fullpage.js如何重置每页的animate()动画

fullpage插件如何重置每页的animate()动画我之前的在线简历每页的animate()动画只能在第一次加载时才会有效，第二次再翻到该页就没有动画了。我仔细思考之后才发现： jQuery的animate()更像是CSS3的transition+transform，而不是像animation，animate()是会改变dom样式的afterLoad: function(anchorLin

2017-02-20 14:24:22 5867 1

shengandshu的博客