- 博客(144)
- 资源 (4)
- 收藏
- 关注
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 vue中 根据判断条件添加一个或多个style,及class的写法
style 写法: <i:style="{'color':isBling?'red':'white'}" @click=""></i>class写法 <i :class='[show ?"class1":"class2","iconfont"]' @click="toggleVisual"></i> class1与class2...
2020-01-14 09:35:47
25064
4
原创 【threejs效果:模型炸开】以钢铁侠obj模型为例
1 效果如下:2 基本原理首先加载一个obj模型;然后遍历obj模型的所有children mesh;按一定比例改变每个子mesh的中心点位置即可;爆炸代码: function modelExplode(num){ // 模型世界中心 var modelWorldCenter=new THREE.Vector3(0,0,0);//.addVectors(box.max,box.min).multiplyScalar...
2022-05-29 20:43:40
1346
原创 【threejs加载器】加载gltf模型及压缩模型
加载obj过程请参考如下两篇【threejs基础:使用OBJLoader】加载obj模型【threejs基础:使用MTLLoader】加载材质OBj模型1 加载gltf模型效果如下:第一步:引入GLTFLoaderimport { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'第二步:加载模型加载模型部分代码很简单;创建加载器、设置gltf文件路径、开始加载文件、添加到scene;代码如下const
2022-05-29 13:49:34
6593
5
原创 利用nodejs读取数据库多边形数据并在页面绘制
1 准备如下:nodejs:mysql:openlayers:2 nodejs实现restful接口2.1 新建demo文件夹,然后在其中新建main.js;2.2 在demo文件夹下运行命令行 npm install --save express;安装express库2.3 输入如下代码// 引入express模块 commonjs规范引入const express = require('express')// 实例化 expressconst app = ex
2022-05-21 00:51:32
611
1
原创 【GIS算法:点在多边形内】射线法判断点在多边形内
1详谈判断点在多边形内的七种方法(最全面) hdu1756 hrbust1429 为例_WilliamSun0122的博客-CSDN博客_判断点在多边形内算法明天整理出来并作图
2022-05-21 00:36:51
2203
1
原创 【git配置】配置用户名和密码
如何根据git项目地址,本地拉取1 安装git 下载地址:Git - Downloads一路next安装即可;不需要额外配置2 拉取项目 (1) 如果是开源项目地址:比如GitHub - mrdoob/three.js: JavaScript 3D Library. 直接 git clonehttps://github.com/mrdoob/three.js.git就可以拉取 (2) 如果是私人项目:比如码云或者私有...
2022-05-20 22:50:50
9038
原创 【ArcGIS基础操作:获取多边形质心】
如何计算多边形质心:应用场景:计算出质心点后,可以将shp数据导出为json,里面涵盖中心点坐标;方便可视化展示1 ArcCatalog新建字段目的:新建两个字段centerX和centerY来存储质心坐标;首先文件夹连接到测试数据所在目录,然后右键我们的数据,这里以北京市的shp数据为例;右键province_area.shp,选择属性,打开属性窗口然后切换到字段选项卡,直接新增两个字段如下;设置名称和字段类型注:新增字段时;确保arcmap目前不在占用该shp数据;否则
2022-05-18 00:29:13
7702
原创 css设置背景透明度,而不影响内部元素
设置DOM元素背景透明度,常用opacity属性,如下效果<html> <head> <style> .image{ width: 600px; height: 400px; position: relative; background:url('./img_lights.jpg');
2022-05-13 23:48:25
3810
原创 QGIS添加常用的数据源
在QGIS制图过程常需要搭配不同的底图做配合效果;整理了几个常用的地图;有其他可用的大家可以补充在评论,我会不断完善;亲测效果如下:右键XYZ tile;然后键入对应的名称和url即可;Esri_地形图:https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}Esri_影像图:https://server.arcgisonl...
2022-05-09 22:49:12
1598
原创 【D3.js开发入门:绘制图表】静态图表
什么是 D3.js?D3.js是用于 HTML 和 SVG 实现的 JavaScript 可视化库。基于数据操作文档的 JavaScript 库。 说到D3不得不提到Echarts,Echarts和D3都是一个数据可视化的工具;而且都能实现一些相同的可视化图效果;那他们有什么不同呢?区别还是很大的库层面的不同:1 D3使用svg绘制图形,echarts使用canvas绘制图形2 D3代码自由度高,相当灵活,但是学习成本也大;相反echarts封...
2022-05-04 01:14:38
1464
原创 [css绘制图形:扑克牌花色] 红心、黑桃、方块、梅花
用css实现扑克牌花色的核心是对before和after伪元素的使用;当然,我们可以借助多个div去实现;不过显然跟伪元素相比,多个div显得比较低级些。1 红心思路如下:1 创建一个正方形div,然后旋转45度,创造出下面的拐角2 通过before画一个圆,位置向左偏移正方形的一半距离3通过after画一个圆,位置向上偏移正方形的一半距离代码如下:<html> <head> <style>...
2022-05-02 13:12:11
1334
原创 【问题日记】windows11 找不到组策略问题解决
1 新建txt,输入如下脚本,然后将后缀改为.bat2 右键bat,用管理员身份打开;会出现如图的执行过程,等待执行完成即可3 win+R 打开命令工具输入gpedit.msc、或者直接搜索组策略;即可找到打开组策略工具...
2022-04-20 01:01:52
3534
原创 前端这些标签你在用吗
1 颜色选择器 Color picker<input type="color" /> 标签定义一个颜色选择器。默认值是#000000(黑色)。这个值必须是7个字符的16进制符号。 <input type="color" id="favColor" name="favColor" value="red"/>2 <figure><figure>标签指定自包含的内容,如插图、图标、照片等;图标器元素被用来添加图标签的标题<
2022-04-09 09:22:34
1031
原创 【算法笔记:求元素之和等于目标值的索引】暴力解法和动态规划解法
给定一个整数数组和一个目标值,找出数组中和为目标值的两个数。你可以假设每个输入只对应一种答案,且同样的元素不能被重复利用。示例:给定 nums = [2, 7, 11, 15], target = 9因为 nums[0] + nums[1] = 2 + 7 = 9 所以返回 [0, 1]1 暴力解法思路:两层遍历;即先用第一个元素跟后面每一个相加,然后用第二个元素跟后面每一个相加,一直到最后一个元素;期间只要有一个相加结果为target,则直接返回;因为假设只对应一种答案.
2022-04-09 00:46:01
499
原创 初识vscode插件开发(四)-webview api
通俗点说:webview即web视图,使用webview api 你可以在vscode中打开一个完成的视图,该视图就跟嵌入页面一样,几乎用html语法就可以渲染;而且还可以调用一些vscode的原生api做一些复杂的交互;我也是半知半解,让我们先实现一个效果;就可以自己去总结这是个什么东西了1 在extension.ts文件中,添加一个命令 context.subscriptions.push( vscode.commands.registerCommand('GeoJsonVi.
2022-04-06 00:57:30
5562
原创 【笔记】:nvm安装nodejs 运行use命令时报错exit status 1: ��û���㹻��Ȩ��ִ�д˲�����
新电脑装完nvm,安装完node后, 运行use命令时报错exit status 1: ��û���㹻��Ȩ��ִ�д˲�����经排查通过管理员模式打开命令行工具即可解决;效果如下
2022-04-03 15:20:12
1996
原创 【vue源码工程学习2:跟踪入口文件】定义mount挂载函数
争取每天回来看一点源码,尽量续更;阅读源码无非就是找到入口文件,然后一步步往前追踪代码,看每个模块的导入导出文件;所以本文也按照这个逻辑学习;在学习过程中会尽量注释源码。注:本节就先阅读如何找到Vue对象的导出如下,目的能找到源码中在哪里导出vue类;及如何定义$mount挂载函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta..
2022-04-01 00:50:53
1643
原创 [发布订阅模式解决回调地狱]:定义发布订阅、解决回调地狱
1 回调地狱回调地狱已经是老生常谈的话题了;它出现在异步请求的需求中,即Ajax之类的请求;举例如果有20个ajax请求;每一个都依赖于前一个的请求结果(即后一个接口的请求参数需要从前一个的结果去拿),那么必须等前一个请求结果结束,然后在回调中,开始调用第二个;第三个请求在第二个的回调中调用,依次进行,将有20个嵌套回调,所以这叫回调地狱,比18次地狱更恐怖~下面例子都可直接在浏览器直接运行;替换接口即可如下例子:用浏览器原生的fetch请求接口<!doctype HTML&
2022-03-27 23:56:55
1008
原创 一文读懂call、apply、bind的区别
1 简介call、capply、bind他们三个是函数的方法;使用场景:如果一个对象想借用别的对象的某个方法,可以使用这三个方法。即如果自己没有方法,但别人有我们就可以去借用,不用自己实现了;区别:(1) 功能call和apply效果一样,使用该方法的时候,会立刻执行借用的函数;bind先获取到该借用的方法,暂不执行;(2) 用法call和bind一样,第一个参数是替换内部this的对象,后面是要调用函数的参数;apply第一个参数是替换内部this的对象,后面是一个
2022-03-27 16:31:45
592
原创 【天地图】使用天地图api绘制GeoJson数据
天地图没有直接提供加载GeoJson数据或者文件的api,但是我们可以借助绘制多边形的方式实现1 实现效果绘制如下的矢量多边形效果;2 实现技术(1) 首先用ajax请求geojson文件,从文件解析并获取到坐标数据下面这个方法就是解析geojson返回的featurecollection中的坐标方式;其中可能有多段线稍微处理一下即可/** * 从featureCollection获取所有linestring * @param {*} featureCollecti..
2022-03-24 22:51:17
5237
7
原创 HTTP协议发展历史
超文本传输协议(HTTP)是一个用于传输超媒体文档(例如 HTML)的应用层协议。它是为 Web 浏览器与 Web 服务器之间的通信而设计的;HTTP 是无状态协议,这意味着服务器不会在两个请求之间保留任何数据(状态);本文就把发展历史简单整理一下1 发展历史HTTP(HyperText Transfer Protocol)是万维网(World Wide Web)的基础协议。自 Tim Berners-Lee 博士和他的团队在1989-1991年间创造出它以来,HTTP已...
2022-03-24 00:01:00
3948
原创 调用天地图服务出现403错误的两种场景
403错误403 Forbidden 是HTTP协议中的一个状态码(Status Code)。可以简单的理解为没有权限访问此站。就是说服务器理解了本次请求但是主动拒绝执行该任务1 key问题导致 403问题目前在使用天地图底图服务时,需要提供key值;如下需要在api后面接上key<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=81b9a9cf3e4b...
2022-03-23 22:54:05
6740
原创 [API接口设计] RESTful 规范
RESTful是目前最流行的API设计规范,它是用于Web数据接口的设计;REST它是 Representational State Transfer的简称,中文的含义是: "表征状态转移" 或 "表现层状态转化"1 发展来源和必要性RESTful API 设计由 Roy Fielding 博士在其 2000 年的博士论文中定义。后来经过社区以及互联网发展的趋势需要就慢慢成为了一个标准;目前我们实现一个RESTful接口,可以在web端 pc端及移动端,实现多...
2022-03-20 20:49:03
4987
原创 【css实现:渐变文字】巧妙使用background-clip属性
1 效果(1)用背景图片实现<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">h1{ background: url('./1.webp'); background-size: 100% 100%; -webkit-background-clip: tex
2022-03-19 12:53:50
2272
原创 【DNS与DNS 寻址】DNS服务器解析域名流程
1 DNS介绍DomainNameSystem,域名系统;是一个复杂的系统体系;作用是解析域名找到对应ip地址,这样就可以跟ip地址所在的服务器通信,获取数据。比如我们在地址栏输入github.com,那么DNS寻址过程最后会找到ip为20.205.243.166的服务器;如下图可以看一下;该ip地址所对应的服务器在没过微软数据中心。但是解析ip这个过程还是挺复杂的。在介绍DNS详细的寻址过程前,先了解几个概念;1.1 域名组成顶级域名就是最后...
2022-03-18 23:53:16
2514
原创 【浅谈浏览器工作原理】(2) 渲染数据
当浏览器接受到数据包后就要开始渲染了,所以这部分重点是渲染工作;即构建DOM、CSSDOM以及渲染树的过程;先了解一个词语:CRP(关键渲染路径)关键渲染路径是浏览器将 HTML、CSS 和 JavaScript 转换为屏幕像素的一系列步骤。优化关键渲染路径可提高渲染性能。关键渲染路径包括文档对象模型(DOM)、CSS 对象模型(CSSOM)、渲染树和布局。 关键渲染路径中的五个步骤Web 性能包括服务器请求和响应、加载、脚本编写、渲染、布局以及将像...
2022-03-16 20:29:04
1094
原创 【网络通信协议】OSI七层模型
开放式系统互联模型:Open System Interconnection Model缩写:OSI;简称为OSI模型;是一种概念模型,由国际标准化组织提出,一个试图使各种计算机在世界范围内互连为网络的标准该模型将通信系统中的数据流划分为七个层,从分布式应用程序数据的最高层表示到跨通信介质传输数据的物理实现。每个中间层为其上一层提供功能,其自身功能则由其下一层提供。功能的类别通过标准的通信协议在软件中实现。1984年,ISO发布了著名的ISO/IEC 7498标准...
2022-03-16 20:22:59
5987
1
原创 【浅谈浏览器工作原理】(1) 地址导航和数据返回
1 我们在地址栏输入url,然后回车导航,请求到网页内容,并在页面显示过程其实是很复杂的;2 web性能无非就两个问题;一个是延迟相关问题;另一个是由浏览器单线程原因导致下面让我们对浏览器工作原理详细了解;即可从整个过程的各个阶段去想办法优化性能1 导航 导航是加载网页的第一步。每当用户通过在地址栏中输入URL、单击链接、提交表单以及其他操作来请求页面时,都会发生这种情况。Web 性能的目标之一是最大限度地减少完成导航所需的时间。在理想情况下,这通常...
2022-03-15 22:31:08
2088
原创 【VUE项目笔记】
1 场景一:更改事件触发顺序如果给父元素和子元素同时绑定了事件,他们的执行顺序是先执行子元素事件,后执行父元素事件也就是有内往外执行;在JS中,绑定的事件默认的执行顺序是冒泡执行;(1) 如果想更改顺序,则可以开启捕捉模式;下面代码,如果点击按钮,则先输出"divClick",后输出"linkClick";因为默认是冒泡的顺序<div @click= "divClick"> <a href="javascript:void" @click="linkClic.
2022-03-15 00:07:01
796
原创 【网站数据统计解决方案】快速了解pv、uv、spm、utm_source、埋点等知识
前言:在访问阿里网站或者一些博客网站的时候,发现地址后面跟了?spm=1010.2135.3001.4477这种参数,以及在访问国外网站的时候会跟?utm_source=google&utm_medium=cpc&utm_campaign=599956724^122652817832等参数例如 我们随便打开一片csdn博客:【Docker篇】Docker镜像加载原理,UnionFS(联合文件系统),镜像Commit_渡、️的博客-CSDN博客文章目录Docker...
2022-03-14 22:58:38
3614
原创 【算法笔记:二叉树遍历】递归及DFS遍历方式
用递归和非递归的方式实现二叉树的遍历过程1 构造一个二叉树 首先用javascript实现一个简单的二叉树构造函数;其实就是一个组织结构;跟我们普通的组织树子节点的组织方式一样;无非二叉树更加标准,有左右孩子节点;代码如下function TreeCode() { let BiTree = function(ele) { this.value= ele; this.lChild = null; this.rChild =...
2022-03-10 01:21:11
503
原创 【算法笔记:求最大子数组和】暴力求解、动态规划、贪心法
给你一个整数数组 nums ,请你找出一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和。输入:nums = [-2,1,-3,4,-1,2,1,-5,4]输出:6解释:连续子数组[4,-1,2,1] 的和最大,为6 。1 暴力求解将每一个元素作为开始元素,遍历求和,比较获取每一轮的最大值;时间复杂度都是O(n2)代码如下:// 暴力解法:将每一个元素作为开始元素,遍历求和,比较获取每一轮的最大值/*** @param {number[]} num..
2022-03-06 21:42:32
638
原创 [TypeScript语法测试] 包括安装、tsconfig配置及代码测试
1typeScript 安装和tsconfig配置及运行 - 吴百万 - 博客园
2022-03-05 00:30:16
747
原创 【vue源码工程阅读1:下载源码】认识工程并打包
平时读过源码,但是没有系统总结过,所以趁此机会再整理一下;不光是源码技术细节;从下载代码到运行启动源码过程中每一步都会有我们未涉及或者不熟悉的知识点和技术,所以尽可能触类旁通,都了解一下;这样便于我们逐渐形成一个自己的技术体系。 源码下载首先去github官网下载vue源码;GitHub - vuejs/vue: 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI o...
2022-03-03 00:20:47
1449
原创 javascript包管理工具发展历史
npm和yarn都是javascript包管理工具;因为npm在使用过程中暴露出一些问题;但恰恰yarn下载依赖包和包版本管理等方面比较有优势;所以其中yarn快速发展;但是npm后续也在不断完善,所以二者现在是良性竞争的阶段; 技术跟公司是一样的;大家可以同时存在,不断改进完善,面向不同的用户,为不同用户服务嘛;下面是javascript包管理工具的简单介绍...
2022-03-02 23:49:58
7440
原创 vscode插件开发(三)-package.json
{ // 插件的名字,应全部小写,不能有空格 "name": "vscode-plugin-demo", // 插件的友好显示名称,用于显示在应用市场,支持中文 "displayName": "VSCode插件demo", // 描述 "description": "VSCode插件demo集锦", // 关键字,用于应用市场搜索 "keywords": ["vscode", "plugin", "demo"], // 版本号 "version": "1.0.0", // 发布者,如.
2022-02-25 23:17:03
612
原创 初识vscode插件开发(二)-右键菜单
在初识vscode插件开发(一)-工程搭建、命令运行及调试中认识了如何通过ctrl+shift+p 调用扩展命令;本节介绍如何通过添加右键菜单,执行扩展命令;1 添加右键菜单1.1 资源管理器上下文菜单 - explorer/context打开extension.ts,在activate函数中添加如下命令: context.subscriptions.push( vscode.commands.registerCommand("GeoJsonViewer.askQuestion",.
2022-02-24 22:50:52
5566
1
原创 解决浅拷贝的五种方式
浅拷贝和深拷贝以及值类型、引用类型概念理解请移步认识javascript值类型,引用类型及浅拷贝与深拷贝的关系小白gis每周更新与WebGIS设计相关的文章教程,通过在线示例以及demo的方式,介绍Arcgis API、开源gis API的使用方法,帮助学习者快速入门webgis开发http://xiaobaigis.com/Home/WebArticle?ID=99浅拷贝 其实很好理解;就是复制对象不彻底,修改复制后的对象,会影响到原对象;1 Object.assign()利用对象合并的方.
2022-02-24 22:49:23
1070
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人