- 博客(52)
- 收藏
- 关注
RSS订阅原创 设计模式——策略模式
策略模式策略模式是一种常用的设计模式，简单来说就是我有很多种方式去做同一件事情，比如我早上去上课，我可以选择走路去、骑车去、飞过去，不去等等。我们可以很轻松的用if else去实现这个逻辑；比如goClass（gostyle）{ if(gostyle == A) { consloe.log('走路去'); } else if(gostyle == B) { consloe.log('骑车去'); } else if(gostyle == C) { consloe.log(
2021-08-23 09:50:23
104
原创 vue中导入openlayer地图控件
1.首先新建controls.jsimport {defaults} from 'ol/control'import Attributions from 'ol/control/Attribution'import ZoomSlider from 'ol/control/ZoomSlider'export const controls = { //定义控件格式 Attribution: new Attributions({ //控件属性 show_progress: tr
2021-05-12 18:14:13
278
原创 在vue中使用openlayer
首先需要安装好openlayernpm install ol在vue项目的src目录下新建map.js导入所需的openlayer模块import 'ol/ol.css';import {Map, View} from 'ol';import TileLayer from 'ol/layer/Tile';import XYZSource from 'ol/source/XYZ';import {fromLonLat} from 'ol/proj';export default fun
2021-05-12 16:21:56
367
原创 JavaScript中循环使用push，console.log打印数组遇到的一些问题
在用循环中用push添加数组元素时发现每次打印出来的都是最后的数组var i =[]; for(let j=0;j<5;j++) { i.push(j) console.log(i) }本来以为会按照 [0]/[0,1]/[0,1,2]这种方式打印出来，结果打印出来了五个完全一样的数组，看了一些别人的博客，是因为数组的地址是同一个，所以打印出来的是完全相同的。因为alter是会阻断代码继续往下执行的，所以后面我用alter替换了console.log，发现确
2021-04-24 11:36:48
1162
转载 openlayer（ol.source）
source 是 Layer 的重要组成部分，表示图层的来源，也就是服务地址。除了在构造函数中指定外，还可以使用 layer.setSource(source) 稍后指定。一、包含的类型ol.source.BingMaps ，必应地图的切片数据，继承自ol.source.TileImage；ol.source.Cluster，聚簇矢量数据，继承自ol.source.Vector；ol.source.ImageCanvas，数据来源是一个 canvas 元素，其中的数据是图片，继承自 ol.sour
2021-04-08 22:42:01
237
原创 openlayer绘制图形
主要两种绘制方式1.通过坐标直接将图形添加到地图上2.通过鼠标获取坐标：{首先需要初始化一个矢量地图对象ol.layer.Vector（因为添加的元素是矢量的（点线面），所以只能加在矢量图层上）加载交互式图形控件ol.interaction.Draw（在实例化是设置绘制类型和对应的特征参数）绘制图形修改图形需要用到交互式编辑控件ol.interaction.Modify}...
2021-04-08 22:18:59
187
原创 GIS（瓦片地图）
瓦片地图的概念:瓦片地图是网格中多个类似瓦片的图片集，可以理解为是将地图分割为若干个小地图。瓦片地图金字塔模型是一种多分辨率层次模型，从瓦片金字塔的底层到顶层，分辨率越来越低，但表示的地理范围不变。瓦片地图加载原理通过ajax请求数据，根据瓦片地图的级数、行列号分别获取对应的瓦片地图，再按网格组织瓦片地图，形成一幅完整的地图...
2021-04-08 11:27:49
1104
原创 openlayers(1)
openlayers是一个模块化、高性能的webgis扩展包，它和其他GIS包一样，都包含了大量的类。下面是它的核心类1.Map（new ol.Map）：{用来存放地图的容器}2.WebGLMap：{使用webgl进行渲染的地图容器，但不支持矢量瓦片数据}3.View{地图视图，控制包括地图缩放与投影坐标、中心点、分辨率、旋转角度等}4.Layers(ol.Layer.Base){图层，必须结合图层数据源使用}5.Sources(ol.source.Source){图层数据源}
2021-04-08 11:12:00
113
原创 OGC标准
ogc制定了一些接口或编码的技术文档，不同的厂商、各种GIS产品都可以对照这些文档来定义开放服务的接口、空间数据存储的编码、空间操作的方法。常见的OGC标准接口：WMS（web地图服务）服务、WFS（要素）服务、WCS（栅格）服务、WMTS（地图切片）服务...
2021-04-01 22:47:04
206
原创 li行排列，溢出不换行的方法
1.将li设置为display：inline2.将ul的宽度设置大于ul的父元素宽度目前我只知道这一种方法，如果有别的方法求告知
2020-12-11 15:10:29
313
原创 node的异步I/O执行流程
在node中许多的模块都是异步执行的。一个异步的I/O调用如下：（1）发起I/O调用1.用户引进模块，并向其中传入参数与回调函数2.node模块将传入的参数与回调函数封装成为一个请求对象3.将封装好的对象推入I/O线程池中等待执行（2）执行回调1.I/O每次的操作完成后，都会将结果存储到请求对象的result属性上，并发出操作完成的通知2.每次事件循环都会检查是否有未完成的I/o操作，如果有就将请求对象加入I/o观测者队列中，之后当做事件处理3.处理I/O观测者事件时会取出之前封装在请求对
2020-11-14 19:54:13
178
原创 node操作mysql报错
我在学习用node连接数据库时遇到了以下错误：Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not supportauthentication protocol requested by server; consider upgrading MySQLclient.原因据网上说是因为mysql8.0+版本默认的密码验证方式是"caching_sha2_password"，而node默认的验证方式"mysql_native_password"。两者验
2020-10-16 21:12:13
156
原创 什么是CORS
当我们想从一个域去访问另一个域的资源时，就是跨域，服务器不同、端口号不同等都可以视作跨域。而CORS定义了在跨域访问资源时浏览器和服务器之间如何通信。解决跨域：1.修改响应头，在后端中我们将响应头修改尾"Access-Control-Allow-Origin"，以node中为例：2.jsonp在网页中通过src方式访问数据是不受同源策略影响的，那么请求数据时把数据装入含src的标签中就行了，而json的数据格式刚好被js原生支持，所以服务器需要生成json格式的数据发送给客户端，客户端再将其装进sr
2020-10-16 14:50:40
531
原创 HTML5 canvas方法总结
什么是canvascanvas是HTML中新增加的标签，可以使用它在页面绘制图形等，值得注意的是canvas本身只相当于一张画布，我们只是在它上面绘画。canvas的高宽canvas并不需要我们去设置它的高宽，它默认的宽带和高度是300px150px如果想要修改高宽，值得注意的是不能直接用css的方式去修改它的高宽。这是因为canvas相当于一张图片，如果通过css的方式设置它的高宽，会导致canvas默认的300150高宽被强行拉伸。所以一般这样设置canvas的高宽let myCanvas
2020-09-13 00:46:19
311
原创 typescript入门
安装typescripttypescript安装前需安装node.js安装之后在cmd中输入npm install -g typescript输入tsc -v可查看版本浏览器中是不能直接识别typescript代码的，所以不能直接在页面引用ts文件，需要借助我们之前安装的工具将ts文件转换为js文件在终端中输入tsc 文件名.ts会发现在同目录下多了一个同名的js文件。如果要在node环境下执行ts文件，我们需要每次都把ts文件转换为js文件，这样无疑很麻烦，我们可以利用ts-node工具完成
2020-09-11 20:55:08
84
原创 js事件机制
事件流：即页面获取事件的顺序，主要有冒泡流和捕获流。当我们点击一个div触发事件时，不仅点击了这个div，还点击了包含它的父元素，它父元素的点击事件也会被触发，这就是冒泡流<body> <div onclick="show('四川省')" style="height:200px; background-color: #0000FF;"> 四川 <div onclick="show('绵阳市')"> 绵阳 <div onclick
2020-09-10 23:09:52
87
原创 前端面试回顾
1.cookiecookie是浏览网页时，网页在硬盘中留下的一个小文本文件。其中记录了你的用户名、密码、浏览的网页、停留的时间等等信息。进入一个网页后，浏览器会先查看是否有上次留下来的cookie，如果有的话，则会则自动地添加在request header中的cookie字段。每一次的http请求时，如果有cookie，浏览器都会自动带上cookie发送给服务端。cookie如果存储很多不重要的信息，则会加大服务器的负担，所以cookie一般存放身份凭证（登录信息）2.promise与setTime优
2020-09-10 22:40:18
81
原创 DOM节点操作
dom树把节点划分成了不同的层级，如父子节点、兄弟节点等。父级节点用:parentNode来表示最近父节点子节点：childNodes（所有节点）、children（元素节点）firstChild（第一个节点（所有类型））、lastChil（最后一个节点）、firsElementChild（第一个元素节点）latsElementChild(如果为空，则返回null)也可以用children【n】来表示某个元素子节点...
2020-08-09 22:33:34
73
原创 H5中的自定义属性
在H5中自定义属性都统一用data-x表示如<div data-time = '1'></div>dom获取自定义属性let app = document.getElementById(‘app’);app.getAttribute(‘data-time’)H5新增的方法app.dataset.time//dataset是一个集合，把以data开头的属性存放到其中如果自定义的属性名字为多个-链接则采用驼峰命名，eg data-list-name;用dataset去获取
2020-08-09 22:03:15
159
原创 DOM改变元素内容
修改内部texteg：<div id='app>123</div>let app = doucment.getElementById(‘app’);app.innerText = ‘234’改变元素标签innerHTMLapp.innerHTML = ‘456’;这两个都是可读可写的可以console.log(app.innerHTML)修改元素属性（src、alt等…）app.src = ‘…’一般改变元素内容有三步1.获取元素2.注册事件3.改变元素内
2020-08-08 23:21:10
434
原创 DOM获取元素的方式
1.getElementById方法，通过id来获取2.getElementByTagName，来获取指定标签名，如等，标签以数组的形式返回3.getElementByClassName，根据类名来获取，以数组形式返回，H5新方法4.querySelector,选择器（.x类）（#x ID）（标签）eg：document.querySelector(’.box’)只能返回第一个元素对象5.querySelectorAll 选择器，与4一样，但是能返回多个元素对象，以数组形式返回6.获取body
2020-08-08 13:18:01
144
原创 git入门使用
1.安装git打开Git官网（https://git-scm.com/downloads）下载安装程序，然后按照默认选项安装即可。无脑下一步就行了，非常简单。安装完成之后，在任意文件夹下右键看到有git gui here这两个即表示安装成功2.Git Bash Here在要管理代码的文件夹下打开git bash在其中输入git init，git表示使用git来管理文件，init是初始化的意思然后目录下会创建一个.git的隐藏目录这样我们就成功创建了一个Git仓库配置信息这是为了在多人
2020-08-06 23:22:11
206
原创 vuex（2）
异步在mutation中是不能执行异步操作的，如果我们需要异步处理，则必须通过vuex中的Action中来处理声明Actionconst store = new VueX.Store({mutations:{ change(state，参数C){ state.cc=234, alert(11); } },actions:{事件名A(参数B，参数C){setTimeout(()=>{参数B.commit(‘change’)},1000) } }
2020-08-05 18:10:56
123
原创 vuex（1）
vuex是用于组件之间管理数据的，我们可以把组件之间需要共享的数据用vuex进行管理，这样可以避免复杂的组件传值问题。安装vuex1.npm install vuex --save2.引入vueximport VueX from ‘vuex’Vue.use（VueX）3.创建store对象，state中存放全局共享数据const store = new VueX.Store({ state:{data：12345}})4.将store对象挂载到vue实例中new Vue({ sto
2020-08-04 23:41:45
123
原创 使用Echarts地图
1.使用npm 安装Echartsnpm install echarts --save2.引入map在Echarts中不能直接使用地图，ECharts 3 中因为地图精度的提高，不再内置地图数据增大代码体积，你可以在地图下载界面下载到需要的地图文件引入并注册到 ECharts 中。ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。3.js引入<s
2020-07-29 17:22:22
598
原创 第一次使用Three.js
Three.js是什么three.js是用js封装的webGL库，它具有非常多的3D显示功能在项目中引入Three.js引入three.js有几种方法，可以通过npm安装three.js包npm install --save three，three.js的官方文档地址是https://threejs.org/在里面可以看到很多例子，也有比较详细的文档可以供我们学习deom这是文档中的一个例子<html> <head> <title>My first
2020-07-24 20:03:26
211
原创 嵌套路由
常见的如点击一个按钮就跳转一个页面，这种就是嵌套路由实现的嵌套路由需要用到Vue中的children属性再在父页面使用<router-view>来展示子页面
2020-07-22 21:22:51
99
原创 动态路由传递多个参数
动态路由传递多个参数与传递单个参数非常相像只需要在后面再加上’ /参数名’ 即可，发送数据时也是类似的，但是值得注意的是，动态路由传递参数必须参数数一致，不能多也不能少，否则页面接受不了数据...
2020-07-22 19:47:34
1390
原创 Vue路由基础使用
引入vue-router在终端中输入vue add router打开main.js发现已经引入了src目录下的router文件夹下就是配置好的router文件src下的view文件夹下有两个vue文件在打开APP.vue发现使用了这两个vue文件再启动服务点击这两个按钮将进入不同的页面，同时我们可以发现地址也发生了改变...
2020-07-22 15:29:14
117
原创 js判断数据类型
方法一：typeof { typeof 数据 }返回数据类型，但是不能判断null（返回object）array（返回function）方法二：instanceof数据 instanceof 数据类型返回true false，不能检测null和undefined（报错）方法三：Object.prototype.toString.call(数据)，大部分都能准确判断...
2020-07-21 15:38:06
66
原创 js中的*函数
function * name（） 这种函数生命么方式会定义一个生成器函数 (generator function)，它返回一个 Generator 对象。调用一个生成器函数并不会马上执行它里面的语句，而是返回一个这个生成器的 迭代器 （ iterator ）对象。当这个迭代器的 next() 方法被首次（后续）调用时，其内的语句会执行到第一个（后续）出现yield的位置为止，yield 后紧跟迭代器要返回的值。或者如果用的是 yield*（多了个星号），则表示将执行权移交给另一个生成器函数（当前生成
2020-07-21 14:00:45
2355
原创 浏览器渲染过程
浏览器渲染过程：1.读取HTML和css，构建cssom树和dom树，这两个是同步进行的。构建DOM树期间，如果遇到JS，阻塞DOM树及CSSOM树的构建，优先加载JS文件，加载完毕，再继续构建DOM树及CSSOM树。2.构建渲染树根据Dom树和cssom树来构建渲染树（Render Tree），设置为display：none的元素不在渲染树中。3.重排、重绘：重排（回流）：当渲染树节点位置发生变化时（标签节点的宽、高、内外边距），重新生成渲染树，重排必定引起重绘，而重绘不一定会引起重排重绘：
2020-07-18 00:25:24
74
原创 v-cli第一次使用与验证密码组件
之前接触过webpack，不得不说webpack对我来说真是太难。现在接触到了vue-cli真的是方便太多了，v-cli中自带webpack，利用它可以快速的创建项目和打包。1.v-cli安装在命令行中输入npm install -g @vue/cli 即可之后我们开业通过vue --version查看版本是否正确。2.创建项目我在vscode中创建了一个文件夹v-cli在终端中运行vue create .表示创建到当前目录下，当然也可以 vue create 文件夹名 创建到其他文件夹下之
2020-07-10 22:39:28
208
原创 v-model原理与模仿
v-model的原理非常简单，只要我改变了view的数据时，把数据传回vue的data中即可。模仿v-model，我用到了父子组件之间的相互传值。下面是代码1.声明子组件let v_input = { props:['inputvalue'], //这里直接使用value不行，必须使用v-bind template:`<input type="text" v-on:input="$emit('change',$event.target.value)" v-bin
2020-07-09 22:30:48
225
原创 Vue组件基础
这两天在学习vue的组件，其中有一个问题我一直很疑惑，我不是很明白父组件的概念。现在我的理解是vue实例挂载的元素就是父组件，但是这样又好像不对，这个问题我打算把vue拉通学习之后再来深究。vue组件的声明vue组件主要有全局声明和局部声明两种模式，都比较简单，全局声明是利用Vue.component（‘组件的名字’）， {template：'<button></button>'}, data(){return{key：value }}这样声明的组件可以在全局随意使用，局部组件
2020-07-08 17:40:09
170
原创 css的position的值
static:即元素的默认位置值，一般不需要特别声明absolute：元素的参考是离自身最近的定位祖元素，如果没有定位的祖元素，则以body为参考。其margin不与其他任何margin折叠fixed：它的定位是一窗口为参考，当滚动条出现时，它不会随着滚动relative：对象参考与static一致sticky：css3中的，它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。...
2020-07-06 16:55:22
117
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人