- 博客(49)
- 收藏
- 关注
RSS订阅
原创 leaflet学习笔记-初始化vue项目（一）
Leaflet是一款开源的轻量级交互式地图可视化JavaScript库，能够满足大多数开发者的地图可视化需求，其最早的版本大小仅仅38 KB。Leaflet能够在主流的计算机或移动设备上高效运行，其功能可通过插件进行扩展，拥有易于使用的、文档完善的API，提供了简单、可读性高的源代码。
2023-12-27 15:15:28
673
原创 leaflet学习笔记-leaflet-ajax获取数据（五）
地图开发中都会用一些GeoJSON数据进行渲染，这是用就会需要加载GeoJSON数据，这时就可以使用leaflet-ajax进行数据的获取。
2023-12-27 15:08:09
688
原创 leaflet学习笔记-地图图层控制（二）
Leaflet的地图图层控件可控制两类图层：一类是底图图层（Base Layers），一次只能选择一个图层作为地图的背景图层，即底图图层，在地图图层控件中用单选按钮控制；另一类是覆盖图层（Overlays），也就是覆盖在底图上的其他图层，一次可以覆盖一个图层，也可以覆盖多个图层，甚至可以不覆盖任何图层，在地图图层控件中用复选框控制。
2023-12-27 15:00:59
875
原创 linux系统装载nginx的笔记
作为一个前端开发，自己部署一个前端项目是不是很正常的事情，所以我在这里记录一下自己在linux环境中通过nginx部署前端项目的步骤，方便后面查看。
2024-03-28 12:48:22
621
原创 自定义时间轴组件
开发工作中常常有一个通过启动时间轴切换地图图层切换的功能需求，但是又很难找到一个满足要求的时间轴，所以自己撸了一个，目前还有一些功能需要改进，这里先记录一下代码。
2024-02-26 18:14:30
423
原创 航空领域中气象常识笔记
由于现在我涉及的项目都是跟气象有关，所以我现在要学习和积累一些气象中的名词和常识，以下为在开发航空领域系统过程中我认为重要的一些知识点记录。
2024-02-20 09:34:40
418
原创 leaflet学习笔记-带过滤的图例（九）
图例不只能够帮助我们在查看地图的时候更加方便容易地分辨不同颜色代表的要素，本文要介绍的图例组件还可以按需求过滤掉不用显示的要素，使地图的更能清晰的显示我们需要显示的内容。
2024-01-22 11:36:27
755
原创 leaflet学习笔记-贝塞尔曲线绘制（八）
两点之间的连线是很常见的，但是都是直直的一条线段，为了使连线更加平滑，我们可以使用曲线进行连线，本功能考虑使用贝塞尔曲线进行连线绘制，最后将线段的两端节点连接，返回一个polygon。给定不同的点 P0 和 P1，线性贝塞尔曲线只是这两点之间的一条线。相当于线性插值。接受一条线，通过应用贝塞尔样条算法返回一个弯曲的版本。
2024-01-11 15:07:03
665
原创 leaflet学习笔记-带有方位角信息的圆的绘制（七）
项目中有一个需求，就是需要绘制一个圆，并且绘制的时候还要设置方位角，最后返回圆的坐标集合和方位角。本功能使用Leaflet-Geoman+Turf.js+leaflet实现。在陆地导航中，方位角通常表示为 alpha、α，并定义为从北基线或子午线顺时针测量的水平角。方位角也被更广泛地定义为从任何固定参考平面或容易建立的基准方向线顺时针测量的水平角度。今天，方位角的参考平面通常是真北，测量为 0° 方位角，但也可以使用其他角度单位（grad、mil）。
2024-01-10 17:38:02
1190
原创 leaflet学习笔记-缓冲区绘制（六）
在GIS开发中，缓冲区的绘制和使用是非常广泛的，一般情况下就是对缓冲区范围内的要素做分析使用，也会有一些其他的操作，下面我就记录一下使用leaflet+turf.js完成缓冲区的绘制操作Turf.js是一个用于地理空间计算的 JavaScript 库。它提供了许多地理空间操作的函数，如点线面的创建、缓冲区计算、距离计算、区域合并等，方便在前端应用中处理地理空间数据和实现地图相关功能。Turf.js 不依赖于任何地图库，可以在任何 JavaScript 环境中使用。绘制缓冲区主要使用buffer。
2024-01-10 16:56:47
553
原创 leaflet学习笔记-自定义Icon（四）
leaflet的marker可以使用icon，所以这篇文章我们自定义一个icon，并在marker中使用，满足我的恶趣味。
2023-12-27 15:06:41
637
原创 leaflet学习笔记-地图缩略图（鹰眼）的添加（三）
地图缩略图控件有助于用户了解主窗口显示的地图区域在全球、全国、全省、全市等范围内的相对位置，也称为鹰眼图。Leaflet提供了好几种地图缩略图控件，本文介绍其中一个最常用控件，即插件Leaflet.MiniMap。
2023-12-27 14:58:57
682
原创 关于vue中proxy代理的七种使用场景配置
在Vue中，代理（Proxy）是一种将请求转发到其他服务器的机制。它允许你在开发环境中通过一个中间层来处理网络请求，以解决跨域问题或将请求发送到不同的后端服务器。通过代理配置，你可以指定特定的URL路径，将其转发到不同的目标服务器。这在开发过程中特别有用，因为你可以将API请求代理到本地服务器或其他开发服务器，而无需直接连接到真实的后端服务器。devServer。
2023-09-27 09:45:30
5253
原创 基于Ant Design of Vue的粗糙组件封装-可收起展开的条件表单
由于开发工作需求中，很多的列表页都会有很多查询筛选条件的备选，但是其实查询筛选过程只需要选填查询筛选条件，不需要全部填，这种一大堆的条件选择及输入组件全部堆到一起。导致重要常用的几个筛选条件很难被找到，为了突出重点，结合大家的使用情况，可以将不常用的筛选条件折叠起来，需要更多筛选条件查询的时候再展开使用。这种方式的使用有个前提，就是条件收缩以后要显示的表单组件，需要连续插入，否则收起的时候组件之间会有空格，而且这个需要使用方式二中的动态插槽，根方式不同的就是收起展开时判断方式的不同。上面的参数说明里面的。
2023-08-11 18:10:33
269
原创 基于Ant Design of Vue的粗糙组件封装-左右分栏
1、由于当前组件是一个布局组件，而且是左右横向布局的组件，所以选用antd组件中的。2、左右部分的内容都是有head和body部分，所以可以选用antd组件中最常用的。组件，这样组件内的间距也可以默认使用，不用在自定义样式。技术不行，还有很多可以优化的地方，希望大家留言指教。注意：上面原型图中缺少缩放按钮的设计。
2023-08-10 17:54:53
154
原创 前端开发必备技能知识笔记-keep-alive（路由缓存）
keep-alive是Vue中一个非常有用的特性，它可以帮助我们避免重复渲染和减少组件的渲染次数，从而提高应用程序的性能。
2023-08-02 11:29:21
200
原创 arcgis api for 4.x 开发笔记-在Vue 2.X项目中开发arcgis api for javascript 4.x（八）—— 自定义底图切换
为什么有地图切换的需求？可视化需求：不同的底图可以以不同的样式和表达方式呈现地理信息。切换底图可以改变地图的外观和风格，使用户能够选择最适合他们需求的地图显示方式。例如，用户可能希望在街道地图和卫星图像之间进行切换，以便更好地理解和分析地理数据。上下文和背景信息：底图提供了地理环境的上下文和背景信息。在不同的应用场景中，用户可能需要不同的底图来支持他们的工作。例如，对于城市规划者来说，他们可能更关注街道和建筑物的信息，而对于环境保护机构来说，地形和土地利用可能更重要。
2023-06-05 09:19:19
279
原创 arcgis api for 4.x 开发笔记-在Vue 2.X项目中开发arcgis api for javascript 4.x（七）—— PopupTemplate使用
为特定层或图形格式化和定义 Popup 的内容。当选择视图中的要素时，用户还可以使用 PopupTemplate 访问要素属性的值和 Arcade 表达式返回的值。包含 title 和 content 属性，它们充当用于将要素的属性转换为 HTML 表示的模板。语法 {fieldName} 或 {expression/expressionName} 执行参数替换。Graphic 的默认行为是在单击 Graphic 后显示视图的 Popup。此默认行为需要 PopupTemplate。
2023-05-25 14:53:52
969
原创 动态图层MapImageLayer - dynamic data layer with table join
动态地图图层是即时生成的图片，而不是在服务器上预先缓存的图片。当用户向服务器请求地图服务时，服务器根据接收到的参数调用底层服务。服务器根据接收到的参数调用底层服务，底层服务经过参数计算，实时地生成像素点，这些像素点构成图片，返回服务器，服务器再传递给用户端。动态图层的优点在于当用户需要实时数据（如某地段的交通流量分析）时，数据更新及时；缺点是显示效果较差，整个服务出图较慢。
2023-04-25 18:17:06
717
原创 前端常用设计模式学习笔记
设计模式（Design pattern）代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。设计模式可以分为下面三种类型：1、创建型模式：用来描述 “如何创建对象”，它的主要特点是 “将对象的创建和使用分离”。包括单例、原型、工厂方法、抽象工厂和建造者 5 种模式。2、结构型模式：用来描述如何将类或对象按照某种布局组成更大的结构。
2023-04-20 10:46:46
135
原创 前端开发必备技能知识笔记-自定义工具函数库，并上传npm
前言项目中我们常常需要编写一些函数，用来处理 一些简单的逻辑，不同的项目中用到的工具函数大部门都是一样的，所以每个项目都要重复的添加这些函数，为了减少这部分重复劳动，我们可以创建一个工具函数库将复用率比较高的函数添加到这个库里面，还可以上传到npm，简化添加使用的步骤。1、创建工具函数库项目自己创建一个项目文件夹“user-defined-utils”（文件夹名称不要用中文的，不然后面的操作会报错...
2022-06-30 15:29:33
917
原创 前端开发必备技能知识笔记-部署私有npm
前言在工作中我们会将一些共用的包上传到外网的npm上，这样项目中如果需要就直接install就行，但是外网的npm无法保证源码的私密性，这时我们就需要在内网发布一个私有的包管理工具。私有npm的优势在局域网上部署，保证了源码的私密性因为实在内网使用，依赖包的下载更加快速使用verdaccio安装verdaccio使用npm全局安装npm install -g verdaccio安装完成以后，输入...
2022-06-22 17:18:25
1682
原创 arcgis api for 4.x 开发笔记-在Vue 2.X项目中开发arcgis api for javascript 4.x（六）—— 自定义图例...
前言日常操作中，切换图层的时候我们需要更换图例，官网中是有legend（图例）的widget工具的，但是样式或者布局上满足不了设计需求，因此有时我们还是需要自定义legend的。图层添加到地图map.add的时候就要为新添加的layer（图层）添加一个监听，监听layer的visible，visible变化就相应的控制图例的visible。我们需要了解watchUtils的使用，才能很好的监听图层...
2022-05-13 18:35:19
550
2
原创 前端开发必备技能知识笔记-vue项目中添加版本号（console显示）
为了方便查看项目发布的版本等基本信息，可以直接 f12 开发者模式下查看，以下代码就是实现读取package.json中的“name”、“description”、“version”等的数据在console中显示。首先需要引入package.json，得到需要显示的信息数据package.json文件引入package.json文件，如果报错有可能是package.json文件的路径错误以下代码实...
2022-05-13 10:59:14
1529
2
原创 前端开发必备技能知识笔记-Ant design for Vue的table的行合并的代码实现--进阶版...
前面一篇 Ant design for Vue的table的行合并的代码实现，我已经做了table的行合并的简单介绍。那是在一种数据做好了排序的理想状态下可以简单的实现行的合并，但是如果需要进行一些稍微复杂的行/列合并的话会有bug或者没有合并效果。要说的话都在下面代码里/** 行合并 * @author 花姐夫 * @date 2022/4/21 10:05 * @param...
2022-04-22 18:37:41
1807
原创 《Vue.js设计与实现》框架设计概览-权衡的艺术（第一章）
1. 命令式和声明式首先我们应该知道什么是命令式，jQuery就是典型的命令式框架，命令式框架的一个最大的特点是关注过程。例如，我们把下面这段话翻译成对应的代码：获取id为app的div标签它的文本内容为hello world为它绑定点击事件点击时弹出提示：ok对应的代码为： $('#app').text('hello world').on('click', () => { al...
2022-03-22 14:18:03
2234
2
原创 前端开发必备技能知识笔记-二级目录的配置
说明在同一个域名下部署多个项目的情况，我们就需要配置使用二级目录。二级目录，就是子目录，继承在主站目录下的，相当于在网站的根目录下再建立一个文件夹存放网站。例如：http://192.168.1.201/mr-resource-viewerhttp://192.168.1.201/mr-miningright-viewerhttp://192.168.1.201/mr-miningrules-vi...
2022-03-18 18:30:56
2589
原创 arcgis api for 4.x 学习笔记-自定义二三维场景切换widget的实现
一、介绍 ArcGIS API for JavaScript 的 4.x 版几乎包含了 3.x 的所有功能以及许多 4.x 独有的新创新；例如 3D 可视化、地图旋转以及更深入的 ArcGIS Enterprise 和 ArcGIS Online 集成。虽然并非所有 3.x 功能都包含在 4.x 中，但每个版本都会增加更多功能，直到它不仅与 3.x 匹配，而且远远超过它。 ...
2022-03-14 16:35:47
1856
原创 arcgis api for 4.x 开发笔记-在Vue 2.X项目中开发arcgis api for javascript 4.x（五）—— 地图中添加Echarts的图表...
前言地图上添加Echarts图表，其实就是将一个Echarts图表的容器放到地图上，然后监听地图的事件更新Echarts容器的大小及屏幕坐标。为了可以复用方便，我决定将地图上添加Echarts图表封装成一个service。结构参数说明mapView：由于需要将地图坐标转化为屏幕坐标，所以需要toScreen去完成，因此需要将地图的view传进Class里面，这里需要将传入的地图view保存到一个全...
2022-03-03 18:33:12
746
原创 前端开发必备技能知识笔记-将vue组件上传npm
前言为了统一组件风格和样式，也为了提高开发效率减少重复开发工作，形成自己的UI组件库是必须的，为了使用方便，我们要将它发布到npm上。1、NPM 介绍NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编写...
2022-02-18 14:45:49
847
原创 前端开发必备技能知识笔记-Echarts图表的导出
Echarts的工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。但是如果我要自定义按钮实现导出图表的功能呢，如果用工具栏就不是很好满足需求。浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说，这两种技术往往是可替换的，效果相近。但是在一些场景中，他们的表现和能力又有一定差异。于是，对它们的选择取舍，就成为了一个一直存在的不易有标准答案的话题...
2022-02-17 14:20:30
3946
原创 前端开发必备技能知识笔记-vue项目中添加版本号
为了npm打包发布后能够查看当前版本号，可以再打包后的index.html中添加meta标签<meta name="revised" content="定义页面的最新版本"/>为了在打包的时候自动添加meta标签到dist/index.html，package.json中有一个参数是version，可以只用修改这个参数，实现打包后自动修改版本号，直接修改vue.config.js文件...
2022-01-20 12:05:34
1991
2
原创 前端开发必备技能知识笔记-添加webpack打包后可以配置的文件
我在arcgis api for js地图开发完成后，打包给运维去业主单位部署的时候，常常需要让我更改图层服务的链接再打包好传给他们调试，运维和我都很烦，也常常打断我撸代码。后面直接将可能需要频繁修改的参数集中到一个配置文件中，打包后运维也能在打包文件中找到配置文件进行修改。步骤：添加配置文件（不能用ts文件）public文件夹中添加配置文件LayersConfig.jslet gra...
2021-12-17 18:09:39
979
原创 arcgis api for 4.x 开发笔记-在Vue 2.X项目中开发arcgis api for javascript 4.x（三）—— geoJson数据的渲染（方式一）...
这种方式实现的主要原理就是 geoJson 通过数据的转换，生成 graphic 添加到GraphicsLayer，最后添加到 Map。如果是加载geoJson文件或者是geoJson服务的话是直接生成GeoJSONLayer ，例如：const geoJSONLayer = new GeoJSONLayer({ url: "https://earthquake.usgs.gov/earth...
2021-11-01 15:22:31
906
原创 arcgis api for 4.x 开发笔记-在Vue 2.X项目中开发arcgis api for javascript 4.x（四）—— geoJson数据的渲染（方式二）...
这种方式实现的主要原理就是 geoJson 利用 Bolb 生成url，然后直接生成GeoJSONLayer，最后添加到Map。通常要创建GeoJSONLayer 如下：const geoJSONLayer = new GeoJSONLayer({ url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_mont...
2021-11-01 15:21:18
546
原创 前端开发必备技能知识笔记-vue项目太大内存溢出解决方法
在开发工作中，我们使用Jenkins实现代码的自动发布部署，经常会遇到FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memoryJenkins报错提示翻译过来就是常见的内存溢出，搜了一下解决方式很简单，就是加依赖和执行一下npm命令解决步骤：1、在p...
2021-10-22 14:56:57
3324
原创 arcgis api for 4.x 开发笔记-在Vue 2.X项目中开发arcgis api for javascript 4.x（一）—— 添加arcgis基础底图（basemap）...
添加arcgis基础底图（basemap）创建一个新的底图对象。底图可以从PortalItem或众所周知的底图 ID（例如：“streets-vector”）创建，也可以用于创建自定义底图。这些底图可能是从您发布到您自己的服务器的切片服务中创建的，也可能是从第三方发布的切片服务中创建的。引入import Basemap from "@arcgis/core/Basemap";不同的创建方式通过p...
2021-10-18 09:23:48
1116
原创 arcgis api for 4.x 开发笔记-在Vue 2.X项目中开发arcgis api for javascript 4.x（二）—— 图层统计查询（outStatistics ）...
您可以返回字段属性和表达式的统计信息，而不是从查询中返回单个要素。统计查询由outStatistics参数定义，该参数需要一组StatisticDefinition对象。例如，您可以通过以下方式查询上述图层中县的平均人口和总人口：// 查询所有特性的总数let sumPopulation = { onStatisticField: "POP_2015", // 需要统计的字段名称 ou...
2021-10-18 09:23:04
736
原创 arcgis api for 4.x 学习笔记-在Vue 2.X项目中部署arcgis api for javascript 4.x（三）
一、介绍 ArcGIS API for JavaScript 的 4.x 版几乎包含了 3.x 的所有功能以及许多 4.x 独有的新创新；例如 3D 可视化、地图旋转以及更深入的 ArcGIS Enterprise 和 ArcGIS Online 集成。虽然并非所有 3.x 功能都包含在 4.x 中，但每个版本都会增加更多功能，直到它不仅与 3.x 匹配，而且远远超过它。 ...
2021-10-14 09:22:52
690
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人