- 博客(33)
- 收藏
- 关注
RSS订阅原创 node.js学习记录
nodejs是一个基于chromeV8引擎的javascript运行环境在网络节点中，负责消费资源的电脑，叫做客户端；负责对外提供网络资源的电脑叫做服务器http模块是nodejs官方提供的，用来创建web服务器的模块，通过http模块提供的http.createServer()方法，就可以把一台普通的电脑变成一台web服务器，从而对外提供web资源服务。
2025-01-08 16:52:28
663
原创 三分钟完成vue项目中iconfont图标的导入
iconfont 提供了丰富的图标库，也允许个人上传分享图标，非常复合中文视觉体验。平时的开发中也离不开iconfont图标的使用，今天就给大家聊一下iconfont图表在vue项目中的快速导入！
2024-12-19 16:47:21
430
原创 Openlayers基础知识回顾（五）
anticlosewise 是布尔值，true 表示逆时针，false 表示顺时针(默认是顺时针)。的地理空间数据交换格式，它定义了几种类型JSON对象以及它们组合在一起的方法，以表示有关地理要素、属性和它们的空间范围的数据。HTML5新增的一个标签，区别css地方，它是使用JavaScript来实现图形的绘制，结合webgl实现复杂的图形绘制。上面的 fillRect 方法拥有参数 (10,10,100,100)。意思是：在左上角开始 (10,10)的位置，绘制100*100的图形。
2024-12-09 17:12:58
500
原创 mapbox中图层添加方法封装
学习mapbox时我们通常添加图层的方式是这样子的，语法没有问题，但是如果我们有几十个图层呢，这样添加肯定是不好的，因为代码都是重复的，所以呢，这里给大家整理几个我封装好的方法，添加图层只需要调用方法就ok。终极大招：通用图层添加方法（适用所有点、线、面图层）
2024-12-05 10:42:17
699
原创 geoserver发布地图服务的一个小坑（数据小数位数的设置）
排查思路，首先是确认坐标系是不是发布地图服务用的不是同一个shp文件（确认是同一个）；问题是这样的，我加载发布在本机的geoserver上的地图服务，在地图上显示没有问题，但是加载发布在服务器上的geoserver上的地图服务就有问题（但是预览都是没有问题的）1、在geoserver中预览没问题，应该加载出这样一个多边形（这一步本地的geoserver和服务器上的geoserver都是没有问题的）2、调用服务在前端页面加载时就出现了问题，多边形变形了，如下，是可以明显观察到加载的不正确的。
2024-12-04 09:20:23
370
原创 vue3-vite项目中element-plus的按需引入，减少项目打包体积
element-plus作为前端的组件库，基本所有的项目都会用的到，但是呢这个库在打包的时候如果是全部引入还是蛮大的，那么我们就要考虑按需引入了。话不多说，直接拿项目给大家做一个前后对比。3、去main.js中把你代码中所有关于element-plus的代码注释掉。直接引入整个element-plus库的情况，可以看到这个包相当的大。ok，看一下成果，惊不惊喜，意不意外。2、在vite.js中配置插件。
2024-11-28 10:06:47
571
原创 Qgis-postgis-pgAdmin4-geoserver,实现地图数据从制作到发布的全过程
使用Qgis制作地图数据，这里需要大家掌握一些Qgis的基础知识。本文重点是给大家梳理数据发布流程及具体操作，用到的知识会做讲解，我这个流程会十分的详细，具体有些操作根据具体情况，不一定跟我一样。我这里选择4490坐标系是因为最后工程中我要用天地图做底图，具体选择什么坐标系你根据你的需要进行选择。1、使用pgAdmin4创建数据库，使用postgis连接数据库。2、对栅格数据矢量化，我这里因为数据量很少，我是直接手绘的。2、向数据库添加刚刚制作的地图文件。一、使用Qgis制作地图数据。
2024-11-20 15:48:12
773
原创 uniapp中h5端如何引用本地json数据（json文件）
1、在static中创建后缀为.js的文件存储json数据。这里展示后缀为.js类型的处理方式。注意使用export导出。2、在要使用的页面导入。
2024-11-15 14:34:23
1227
原创 mapbox进阶技巧
2、$type的使用，当点线面数据在一起的时候，可以根据不同的类型加载不同的数据。1、filter过滤，使用过滤，可以根据不同条件展示我们想要展示的数据。代码示例：核心代码，根据点的size是否满足条件进行展示。动态属性linear的使用，作用与上面两个类似。动态属性step的使用，作用与stops一致。或者根据地图zoom的变化设置样式。has的使用，有，加！3、动态属性stops的使用。
2024-11-15 09:37:30
581
原创 vue3+vite+mapbox构建项目地图初始化框架
一、创建vue3项目这一步直接略过，有不明白的可以翻我mapbox专栏里面的另一篇关于mapbox实现楼层分层单体化，里面说的十分详细。实际项目中这个肯定是作为单独一个路由页面组件的，但是这里为了便于展示成果，我就直接在app.vue中完成初始化。二、安装mapboxgl库。
2024-11-12 14:30:57
591
原创 地图框架之mapbox——（六）
今天跟大家分享一下popup、标注、以及canvas，到这里基本上mapbox的基本内容也就告一段落，后续根据我在工作中遇到的问题再做相关的分享。核心逻辑：把canvas动画与layout结合添加到图层中设置图层样式。首先记住标记不是图层，他只是作为一个单独的对象，被添加到地图上了。1、popup和marker结合使用。3、通过点击事件添加canvas动画。一、标注（marker）1、设置canvas动画。2、封装canvas动画。六、控制图层的显示和隐藏。1、如何向地图添加标记。四、canvas动画。
2024-11-09 08:00:00
1507
原创 地图框架之mapbox——（五）
工作中一般来说需要结合turf.js使用，下面是turf.js的地址，后面有时间的话，也会给大家出一些文章讲一讲。具体的有关画笔的其他内容可以参考官方文档，下面是画笔的github地址，其实掌握上面的内容基本就足够了。通过true或false决定是否显示该画笔。今天主要学习mapbox中如何使用画笔！默认情况下所有类型画笔全部加载。
2024-11-08 10:30:00
535
原创 地图框架之mapbox——（四）
核心思路：就是通过点击事件不断获取新的点坐标，将点坐标push到coordinates中。核心逻辑和代码：设置高亮图层，点击元素，将元素获取到并设置到高亮图层中。今天来波大的，把图形绘制与图层全部说完，这也是我这几天的整理成果。2、添加多个点，设置图层点击事件，点击图层上的元素，元素变色。类似mouseenter这周api可以去mapbox官网查询。核心思路：点击获取坐标，把点击获取的坐标替换掉原来的坐标。核心代码，该api用于修改绘制参数。1、添加一个点，点击点的样式改变。4、点击事件改变元素位置。
2024-11-07 14:47:16
664
原创 如何使用mapbox实现楼层分层，即所谓的单体化；以及如何在vue3中使用mapbox
我们在做webgis开发的过程中，应该经常会去加载一些类似白膜的数据，但是呢，如何实现对楼房分分层这个问题不知道大家有没有思考过，在cesium中是可以实现这个操作的，但是过程十分复杂繁琐；代码直接给大家，逻辑很清晰，看一下就知道了，如果不了解为什么这样写，可以去我的mapbox专辑中去看，我会进行讲解。找到项目中的index.html文件，将mapbox的CDN引入，就一个css文件和一个js文件，大家也可以去下载下来，放在src下面。二、引入mapbox，这里我是利用CDN的形式引入的。
2024-11-06 11:30:00
1621
原创 地图框架之mapbox——（三）
仔细观察可以发现上面数据的properties中有2个属性name和radius，每个点的属性都是不一样的，如果是一个点我们可以加载，但是这多个点如何能够保持原有的样式进行加载呢？这里就需要用到动态属性。2、创建地图并加载这个点，上面是yiduangeojson数据，数据的制作和加载在上一篇文章中已经说过了，不明白的可以自行翻阅。最重要的就是，通过get，获取元素properties中的raadius，实现元素的差异化动态加载。三、点击事件获取要素、要素高亮、鼠标事件。一、加载点数据到地图上。
2024-11-06 11:24:08
624
原创 地图框架之mapbox——（二）
的地理空间数据格式，它定义了几种类型JSON对象以及它们组合在一起的方法，以表示有关地理要素、属性和它们的空间范围的数据。ok，今天先到这里，掌握以上内容，geojson数据你就可以想怎么加载就怎么加载了！先在页面创建一个展示坐标的div，在使用鼠标事件获取经纬度填充到div中。这里给大家一个网站，想要什么样的geojson数据，自己造就行！2、直接加载geojson数据的url。二、加载geojson数据。Geojson数据得格式。4、以声明变量的形式加载。json数据加载方法。1、ajax请求加载。
2024-11-05 11:00:34
834
原创 地图框架之——mapbox（一）
这两天在写一个地图demo，用的是mapbox+vue3框架写的，之前工作中学习过一点mapbox，正好现在好好的操练一下，顺便记录一下，算是记录自己，也帮助他人！这个token很重要，但是现在貌似不能申请了，我是在淘宝买的，所以大家如果按照我这个学习的话，最好先去买个token，或者百度一下解决办法。这里有一个小坑，就是一定要给’map‘容器设置宽高，否则不显示地图。上面这段代码是mapbox地图初始化的代码，取值-180度——180度。2、导入token（四、禁止双击地图放大。1、pitch俯仰角。
2024-11-04 16:10:34
1055
原创 3分钟教你玩转iconfont如何引入vue项目
4、在main.ts文件内全局引入 阿里云字体图标 css,记得使用 路径要正确，如果此时编译不正确，说明 引用路径存在问题。3、进入你的vue项目，创建src/assets/iconfont文件夹，将剪切的文件放进去。按照以上步骤就完成了所有工作，现在进入页面就可以使用了。可以像使用字体一样设置大小颜色等。第一步，选择图标并创建项目。
2024-10-31 11:21:46
464
原创 速通浮动布局和定位布局，全部是干货
浮动会对后面的元素产生影响简单说，2个盒子，第一个添加浮动属性，第二个盒子会占据第一个盒子的位置，但是给第二个盒子添加浮动属性，对第一个盒子没有影响。定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。1、元素添加浮动属性后就会变成是块级元素，可以设置宽高。下面示例大盒子中的小盒子浮动范围是不超过大盒子内边距的。4、提升技巧，利用float属性，让元素显示不同的形状。掌握以上知识，恭喜你已经拿下浮动布局与定位布局了！
2024-10-25 15:52:19
588
原创 速通栅格布局（Grid Layout），只有干货，没有废话
有些时候，会遇到这种情况，有三个单元格，第一个和第二个宽度（高度）确定，第三个自适应，这时候给这个设置auto属性。栅格布局：CSS网格布局是CSS中最强大的布局系统，因为它是二维系统，这意味着它可以同时处理列和行。类似块级（block）容器，可以直接声明是栅格（grid），也可以声明（inline-grid）学习栅格布局，最重要的几个基础概念一定要清楚：单元格、栅格线、行、列、区域。栅格线可以使用命名与编号找到，方便控制指定栅格，或将内容添加到指定栅格中。自动命名（针对重复设置的栅格系统会自动命名）
2024-10-21 15:43:28
2940
原创 前端拍照，结合后端实现人脸识别功能
有一个业务，实现刷脸登录功能，这两天整理了一下，整体思路就是利用video标签，获取其中某一帧，结合canvas绘制出图片，将图片传给后端，后端进行图片比对确认是否是已经注册的用户。
2024-10-17 15:33:11
566
原创 前端一套代码多端通用，pc端、移动端适配方案
因为lib-flexible主要用于手机自适应，当屏幕尺寸大于540px时，它设置html的font-size固定为54px，并不能根据屏幕尺寸调整<html>标签的font-size的大小，所以这里需要修改lib-flexible源码。超过1200px，设置左右内边距，此处提一点，如果你想固定页面的宽度，不随页面变化，那么需要写行内样式，因为lib-flexible插件的原因，页面内容宽度会随着页面宽度变化，但是行内样式不受影响。另外这是我建好的一个架子demo，有需要的自取。项目准备：需要2个插件。
2024-10-15 17:01:40
2343
原创 OpenLayers基础知识回顾(四)
openlayers不仅可以给要素设置样式，还可以给图层设置样式。给图层设置zIndex,值越高图层越靠上。
2024-10-13 09:00:00
220
原创 OpenLayers基础知识回顾（一）
矢量图形，一般覆盖于底图图层之上，通过矢量的方式（路径或者实际大小）来描述其形状，用几何的方式来展示真实的地图要素，会随着地图缩放而发生视觉大小的变化，但是其代表的实际路径或范围不变，除了折线、圆、多边形之外，JS API还提供了矩形、椭圆等常用的矢量图形。然而，EPSG:4326 在网络上传输地理位置信息时被更多地使用，因为它使用的是标准的地理坐标系。因此，两个坐标系的主要区别在于它们使用的坐标系统不同：EPSG:4326 使用的是经纬度，而 EPSG:3857 使用的是平面墨卡托投影。
2024-10-12 11:14:53
1395
原创 uniapp-H5端使用uni.uploadFile上传图片或图像，文件没有后缀名，导致图片上传失败的解决办法
发现后端并没有给返回数据，还来了个500，正常来说此时应该请教后端大佬的，但是这个地方比较特殊，问题在于前端传过去的数据有问题，但是这个不怪我们，而是uniapp官方背大锅，h5端与其他小程序、app在这个地方的处理方式不同，上面的方法其他端通用，唯独h5不行，请看vcr。我最近写了一个小程序，有一个拍照上传图片的功能，用Uview的u-upload组件写的，在小程序端测试一切功能正常，但是到H5端就发现图片没法传给后端或者传过去的图片后端无法识别，报500错误。有个地方忘说了，就是文件后缀名丢失的问题。
2024-10-12 09:01:51
3845
10
原创 搜索选择下拉框（适用于h5\小程序）
之前写了一个搜索下拉选择框，但是在小程序里能用，到h5就不行了，所以今天就用Uview重新写了一个，整体的思路就是写一个输入框，然后点击弹出一个弹出框，弹出框里包含搜索框和内容渲染区，点击对应的选项，关闭弹出框，并将所选内容传给输入框展示。下面是代码展示（接口换成自己的就OK）或者你在array中填写一些数据即可。
2024-10-10 16:20:30
764
原创 Element-Plus上传文件组件upload之图片上传
这个组件本身是可以开箱即用的，但是对于跟差不多水平得小白来说可能不太清楚怎么用，重点是要会使用组件提供的钩子函数，我上面使用了onPreview、onRemove、onSuccess这三个钩子，然后就是实际开发中设置得请求头、请求方法、请求地址在这个组件中是直接写在组件里，其他方面大家一看就知道怎么用了！需求：可以上传一张或多张图片、点击图片可以放大查看、可以删除。
2024-09-28 16:11:19
750
原创 Uview中form表单组件表单验证，传入的数字类型在比较是会转化为字符串类型，导致比较结果不对
在validator校验规则中，如果是数字比较，最好做一下强制数据类型转换，页面中使用u-form组件。
2024-09-27 16:07:41
397
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人