zj靖-CSDN博客

空间坐标点绘制多边形，实际上可以理解为是由 “点” 到 “线” 到 “面” 的一个过程。将空间坐标点通过`THREE.Shape`绘制多条线并闭合而得到一个封闭的二维形状平面对象，使用`THREE.ShapeGeometry`将`Shape`对象转换为`Geometry`对象添加`Mesh`，最终得到我们想要的多边形几何体。要得到一个围栏就需要添加“墙体”，“墙体”则是通过`THREE.BoxGeometry`计算偏移角度绘制多个几何体得到。

2024-08-08 16:29:57 853

原创 three.js 绘制3D空心圆柱体围栏（结合React）

绘制围栏，实际上可以理解为一个空心圆柱体加底部，类似一个碗状的图形。我是通过three.js的圆柱体几何体`CylinderGeometry` + 三维模型运算`ThreeBSP`的函数`subtract`、圆形几何体`CircleGeometry`结合实现。

2024-08-08 16:27:59 1147

原创 three.js 模型高亮效果实现说明（结合react）

使用`EffectComposer`和其附加的渲染效果Passes（如`RenderPass`和`OutlinePass`）来实现高级渲染效果。首先创建`EffectComposer`实例，并添加`RenderPass`和`OutlinePass`，最后在渲染循环中调用`EffectComposer`的渲染方法。这样可以在保持场景内容不变的情况下，应用光晕效果，增强场景的视觉效果。

2024-08-08 16:25:46 859

原创 Openlayers6之地图覆盖物Overlay详解及使用，地图标注及弹窗查看详情（结合React）

主要通过`ol/geom Point`设置`Style`和`ol/Overlay`实现。主要实现步骤：1. 实现图文标注的实质是添加点时设置`Ponit`的样式，图片标注就是在`Style`中添加`Image`，文字标注就是在`Style`中添加`Text`;2. 实现详情弹窗实质就是是通过创建`Overlay`,并将其添加到地图上。在用户点击到对应的点位后，设置`Overlay`指定的`DOM`元素的内容，设置`position`显示`Overlay`。

2024-08-08 16:20:25 1281

原创 Openlayers6 图形绘制和修改功能（结合React）

通过使用openlayers的`ol.interaction.Draw`和`ol.interaction.Modify`模块实现地图上绘制圆形、矩形、多边形并修改编辑。

2024-08-08 16:17:32 1284

原创 openlayers

OpenLayers将抽象事物具体化为类，其核心类是`Map`、`Layer`、`Source`、`View`，几乎所有的动作都是围绕这几个核心类展开的，以实现地图加载和相关操作。

2024-08-08 16:14:32 1040

原创 three.js点击模型实现模型边缘高亮选中效果

*** 模型移入高亮* @param { 区域宽度 } width* @param { 区域高度 } height* @param { 场景对象 } scene* @param { 摄像机对象} camera* @param { 渲染回调} renderer*/// 创建一个EffectComposer（效果组合器）对象，在该对象上添加后期处理通道，用于模型高亮// 新建一个场景通道，// 模型边缘发光通道// 呼吸显示颜色// 呼吸消失颜色// 边框的亮度强度。

2023-10-08 14:26:03 2541

原创 uniapp微信小程序蓝牙连接与设备数据对接

蓝牙连接并通信方法封装大致步骤。

2023-10-07 16:44:10 3423 1

原创不基于body加载，Raycaster射线拾取对象出现误差问题

浏览器中浏览3D图形的时候，想要与3D图形之间做一些点击事件和交互操作，比较常用的一个解决方案就是使用Raycaster对象来实现（射线拾取）。three.js利用射线Raycaster进行碰撞检测获取射线穿透对象。常用方法：/** * @param { 事件对象 } event * @param { 场景对象 } scene * @param { 镜头对象 } camera */function getCanvasIntersects(event, scene, camera) {

2021-02-22 15:12:59 719 1

原创 react+antd二次封装日期选择组件

结合react、ant Design DatePicker RangePicker组件二次封装可直接选择“昨天”、“本周”、“上一周”、“本月”、“上个月”时间范围。可自定义默认选择日期initDate。返回时间格式isAddTime：yyyy-MM-dd hh:mm:ss 或者 yyyy-MM-dd。默认不添加时分秒，isAddTime默认false。能否选择当天（今天）canSelectToday。可自定义日期选择框样式style（此处采用内敛样式），参看ant Design 日期选择组件样式

2021-02-20 16:42:14 1099

原创 react+antd，二次封装表格拖拽组件

项目需求中，要求实现表格拖拽排序后，返回排序后数据顺序提交保存，多处使用。曾尝试通过对Table组件的 columns 属性进行包裹，以期达到封装 DragSource 和 DropTarget 的效果，但后来发现，antd根部不会识别这样的修改。antd官方文档提供了Table单一表格的行拖拽排序，并没有暴露出更多可详细配置的API。在拖拽排序的案例中，BodyRow既是DragSource，也是DopTarget。那么既然如此，理应也允许针对BodyRow进行二次封装，达到DragSource与D

2021-02-20 16:16:14 1803 3

原创 react hooks知识集

react hooks 知识集Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。那么关于hooks有哪些疑问呢？React为什么要搞一个Hooks？想要复用一个有状态的组件太麻烦了！我们都知道react都核心思想就是，将一个页面拆成一堆独立的、可复用的组件，并且用自上而下的单向数据流的形式将这些组件串联起来。但假如你在大型的工作项目中用react，你会发现你的项目中实际上很多react组件冗长且难以复用。尤其是那

2021-02-20 15:57:24 182

原创 react面试知识集

React知识集总结react基础什么是React？优势不足特点什么是虚拟DOM？为什么虚拟DOM可以提高性能？真实DOM（Real DOM）和虚拟DOM（Virtual DOM）区别？什么是JSX?为什么浏览器无法读取JSX？React为什么要用JSX？如何使用JSX?说说React的生命周期有哪些？react 中 keys 的作用是什么？在 React 中，refs 的作用是什么怎样解释 React 中 render() 的目的。说说你对“在React中，一切都是组件”的理解何为高阶组件(higher

2021-02-19 17:07:22 275 1

原创 vue动态绑定多个class且是多个条件判断的问题

vue中可以通过 :class=""这样来根据一定的条件来动态添加class，但是有时候需要判断的条件比较多，需要动态添加的class也比较多，这个时候其实也很简单。详细看代码<template> <div class="app" :class="[show===true ? 'border' : '' , background_red=== true ? 'red' : ...

2019-09-26 17:02:13 16273

原创小程序下拉刷新

微信小程序：关于下拉刷新一、onPullDownRefresh方法1.需要在.json文件里设置 “enablePullDownRefresh”: true,用于开启页面下拉加载效果，全局刷新。注：可以当前页设置也可以全局设置。单个页面刷新，某个需要刷新的页面json文件中enablePullDownRefresh要设置为true，还要设置"onReachBottomDistance":50...

2019-09-25 15:44:15 235

原创 js排序

一、sort排序sort() 方法用于对数组的元素进行排序,并返回数组。默认排序顺序是根据字符串Unicode码点。语法：array.sort(fun)；参数fun可选。规定排序顺序。必须是函数。如果想按照其他规则进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：若 a 小于 b，在排序...

2019-07-11 16:53:18 161

原创 vue组件之间传值

vue组件之间的传值有三种，父传子、子传父、兄弟传兄弟。父组件传值给子组件：子组件嵌套在父组件内部，父组件给子组件传递一个标识，在子组件内部用props接收，子组件在模板里可以通过{{}}的形式进行使用。如果父组件给子组件传递的标识中含有—，子组件在接收时采用驼峰式接收。父组件调用子组件；添加自定义属性，属性名随便定义（但是不要定义id,class等）；属性值为你需要传递的值（这个值可...

2019-07-05 09:42:19 169

翻译 JS URL进行转码与解码

项目中url遇到传参数传数组对象解析失败问题，采用转码方式解决，但并不清楚实际原理，研究了一下JS转码解码。Javascript语言用于编码的函数，一共有三个。escape()encodeURI()encodeURIComponent()三种编码方式区别：escape 和 unescape：escape：不能直接用于URL编码，它的真正作用是返回一个字符的Unicode编码值，因此...

2019-07-03 13:51:21 8101

原创 ES6箭头函数自我理解

箭头函数是一种使用 (=>) 定义函数的新语法。语法：(参数)=> { statements }；// ES5写法function getNum(num){ return num;}getNum(5); // 5// ES6写法var getNum = (num) => num;getNum(5); // 5注：当没有参数时，使用一个圆括号代表参数部分...

2019-07-02 18:37:52 208

翻译 Ajax readyState（状态值）和status（状态码）的区别

XMLHttpRequest对象（Ajax）的状态码（readystate）当一个XMLHttpRequest初次创建时，这个属性的值是从0开始，知道接收完整的HTTP响应，这个值增加到4。有五种状态：状态0 (未初始化)： (XMLHttpRequest)对象已经创建或已被abort()方法重置，但还没有调用open()方法；状态1 (载入)：已经调用open() 方法，但是send()方...

2019-07-02 16:41:40 373

原创 session与cookie的区别

session与cookie的区别：（1）cookie数据存放在客户的浏览器上，session数据放在服务器上。（2）cookie是一种客户端的状态管理技术，将状态写在浏览器端，而session是一种服务器端的状态管理技术，将状态写在web服务器上面。（3）cookie是服务器端传了一个文件到客户端，而session是传一个cookie到本地，但是传的内容是有区别的：a、cookie传的文...

2019-07-02 16:23:13 110

原创 CSS中定义a:link、a:visited、a:hover、a:active顺序

a :link、a:hover、a:visited这几个元素，定义CSS时候的顺序不同，也会直接导致链接显示的效果不同。eg:让未访问链接颜色为red，活动链接为yellow，已访问链接为green：第一种情况：CSS定义的顺序为a:visited、a:hover、a:link。把鼠标放到未访问过的red链接上时，它并不变成yellow，只有放在已访问的green链接上，链接才会变yel...

2019-07-02 16:17:32 287

原创 js常见几种遍历

以数组为例，JavaScript 提供多种遍历语法。最原始的写法就是for循环。var arr = [1, 2, 3];for (var i= 0; index < arr.length; i++) { // i指数组下标 console.log(arr[i]); // 1,2,3 console.log(i); // 0,1,2}可以使用临时变量将数组长度存起来，避免重复...

2019-07-02 10:57:06 230 1

原创文件名称大小写修改后，git无法检测出修改

在git项目中，已push到远程的文件夹或文件，将其名称大小写修改，修改git无法检测出。查找原因发现git默认配置是忽略大小写。解决方法：通过 git config core.ignorecase 查看本地仓库git忽略大小写是打开还是关闭。false：表示关闭忽略大小，true：表示开启忽略大小写。因此可是通过设置 git config core.ignorecase false来解...

2019-04-23 15:18:15 3842

原创 JavaScript数组拷贝方法

扩展运算符（浅拷贝）ES6的扩赞运算符。该方法不能有效的拷贝多维数组。数组/对象值的拷贝是通过引用而不是值复制。var arr = [1, 2, 3];var arrCopy = [];arrCopy = [...numbers];// 拷贝数组修改原数组不受影响arrCopy.push(4);console.log(numbers, numbersCopy);// [1, 2,...

2019-04-22 21:00:18 701 1

转载 vue内嵌iframe并跨域通信

1、Vue引入iframe：直接通过添加iframe标签，src属性绑定data中的src。<template> <div class="act-form"> <iframe :src="src"></iframe> </div></template><script>export defa...

2019-04-12 17:30:12 12051 1

原创 json对象和json字符串之间的转化

json字符串 ==> json对象使用JSON.parse() 函数var jsonStr = '{"name":"zj","age":22,"email":"12345678@qq.com"}';var json = JSON.parse(jsonStr);console.log(json);//输出:Object {name: "zj", age: 22, em

2019-02-26 17:39:49 106

翻译 JavaScript中protoType属性

在Javascript语言体系中，不存在类（Class）的概念的，javascript中不是基于‘类’的，而是通过构造函数（constructor）和原型链（prototype chains）实现的。什么是构造函数？构造函数，就是提供了一个生成对象的模板并描述对象的基本结构的函数。一个构造函数，可以生成多个对象，每个对象都有相同的结构。总的来说，构造函数就是对象的模板，对象就是构造函数的实例。...

2019-02-26 12:19:29 220

原创 array、Set、Map区别

array：数组对象，是使用单独的变量名来存储一系列的值。//创建数组三种方式var myArr=new Array(); myArr[0]="Saab"; myArr[1]="Volvo";myArr[2]="BMW";var myArr=new Array("Saab","Volvo","BMW");var myArr=["Saab&quot

2019-02-25 15:27:19 4333

翻译 Promise.all()

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。Promise对象有以下两个特点。（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfil...

2019-02-25 13:55:49 2282

翻译 vue axios简单配置与使用

axios 简介axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。axios本身具有的特征：从浏览器中创建 XMLHttpRequest从 node.js 发出 http 请求支持 Promise API拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防止 CSRF/XSRF引入npm安装$ npm inst...

2019-02-25 12:26:27 6339

翻译 vue2.0 keep-alive组件总结

** < keep-alive> ** 是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。用来缓存组件,避免多次加载相应的组件,减少性能消耗< keep-alive >包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 < transition > 相似，< keep-alive > 是一个抽象组件：它自身不会渲...

2019-02-22 17:47:49 198

空空如也

空空如也