- 博客(57)
- 收藏
- 关注
RSS订阅原创 Opnelayers：封装Popup
本篇文章中我基于OpenLayers的Overlay封装了一个子类Popup，Popup可以绑定一个目标，当点击或悬停到该目标上时Popup将会弹出。
2025-06-08 20:47:22
514
原创 OpenLayers：封装Tooltip
本文介绍基于OpenLayers框架的Tooltip类封装。作者继承Overlay类开发功能更完善的Tooltip组件，实现内容输入、默认样式、方位控制等7项功能，阐述实现思路，提升了开发便利性与功能完整性。
2025-06-07 18:28:45
820
原创 OpenLayers：通过自动布局调整解决Overlay重叠问题
本文探讨了地图应用中Tooltip提示框重叠问题的解决方法。作者最初尝试了缩小尺寸、折叠功能等"治标"方案，但效果不佳，后采用手动调整Tooltip位置（上下左右）来避免重叠。为彻底实现自动化，作者提出使用AABB（轴对齐边界框）算法进行碰撞检测，通过计算元素边界框坐标判断重叠。在此基础上，采用贪心算法实现自动布局优化：遍历所有Tooltip，计算其在四个方位的重叠面积，选择最小重叠面积的位置。
2025-06-03 17:12:42
667
原创 Openlayers：如何注册一个新的坐标系统
OpenLayers中默认支持 WGS84和Web墨卡托两种坐标系统。但是如果想将地图设置为其它的坐标系统或者使用其它的坐标系统的数据就需要进行手动注册。本文就将介绍如何在OpenLayers中注册一个新的坐标系统并使用。
2025-05-15 18:13:52
485
原创 OpenLayers：侦听缩放级别的变化
在实际开发中我们常常需要根据不同的缩放级别设置不同的展示效果或者执行不同的操作，因此侦听缩放级别的变化就很重要。想要侦听变化就需要依赖于OpenLayers中的事件系统，下面我将介绍两个相关的事件。
2025-05-04 19:46:46
412
原创 Opnelayers：向某个方向平移指定的距离
本文介绍 Opnelayers 中封装的方向平移距离方法，讲解如何通过代码实现指定方向（如东、南、西、北或自定义方位）平移固定距离的逻辑。内容涵盖参数设计（方向、距离值）、坐标系转换原理及实际应用场景，帮助开发者快速掌握地理空间数据的位移处理技巧，提升空间分析功能开发效率。
2025-04-27 20:09:48
1000
原创 OpenLayers：视图变换的方法
本文介绍了OpenLayers中视图变换的基本概念以及实现视图变化的方法fit和animate的参数与级别用法。
2025-04-19 20:14:04
651
原创 OpenLayers：extent与view extent 介绍
本文介绍了OpenLayers中视图范围（view extent）的基本概念和使用方式，以及OpenLayers中其它类型的extent和各种extent方法的基本使用。
2025-04-16 22:20:29
958
原创 Openlayers：实现简单的热力图
热力图是一种通过颜色分布来直观描述地理现象的空间分布与变化趋势的地图表现手法，本文介绍了如何在Openlayers中创建一个简单的热力图。
2025-04-16 01:12:30
543
原创 Openlayers：海量图形渲染之聚合
最近由于在工作中涉及到了海量图形渲染的问题，因此我开始研究相关的解决方案。在这个过程中聚合也是一个经常会被人提到的解决方案，我一直对聚合是怀有疑虑的，我认为其无法有效的解决我所面临的问题。
2025-04-15 10:32:01
626
原创 Openlayers：实现聚合
本文介绍了Openlayers中图形聚合功能的基本用法，以及相关的一些优化效果的实现方式。希望可以对想要学习聚合的朋友有所帮助。
2025-04-14 22:27:24
703
原创 Openlayers：flat样式介绍
在前段时间我在使用WebGL矢量图层时接触到了flat样式，我对其十分的感兴趣，于是我花了几天的时间对其进行了了解，在这篇文章中我将简单的介绍一下flat样式的使用方式以及我对其的一些理解。
2025-04-12 18:45:20
873
原创 Openlayers：海量图形渲染之WebGL渲染
最近由于在工作中涉及到了海量图形渲染的问题，因此我开始研究相关的解决方案。我在网络上寻找相关的解决方案时发现许多的文章都提到利用Openlayers中的类，可以实现渲染海量的点，之后我又了解到利用类可以渲染其它的图形。
2025-04-08 20:10:44
927
原创 Openlayers：海量图形渲染之图片渲染
最近由于在工作中涉及到了海量图形渲染的问题，因此我开始研究相关的解决方案。在这个过程中我阅读了文章 《Openlayers海量矢量面渲染优化》了解到了利用Canvas在前端生成图片渲染的思路，后来我又从同事那里了解到了后端生成图片渲染的思路。我认为这两种思路其实是相似的，在原理上都是一样，因此在这篇文章中我会把它们放在一起讨论。
2025-04-05 18:12:22
1079
原创 Openlayers：为Overlay创建element的四种方式
element属性是Overlay的核心，它定义了Overlay的内容。因此在创建Overlay的时候，如何创建它的element就成了一个至关重要的问题。在这篇文章中我就将会介绍四种给创建element的方法。
2025-04-05 14:32:24
793
原创 OpenLayers：如何控制Overlay的层级？
我最近在使用Overlay的时候遇到了一个问题，我向地图中添加了两种不同的Overlay（下图中的蓝色标牌和粉色标牌），我希望粉色标牌可以显示在最上层，可偏偏蓝色标牌却将其遮挡住了。于是我对Overlay的层级开始起了兴趣，希望可以找到控制Overlay层级顺序的方法。
2025-04-03 23:47:44
1076
原创 OpenLayers：封装Overlay的方法
平时在使用OpenLayers的Overlay时常感觉不便，于是最近我便封装了一些Overlay增删改查的方法，以提高可用性。这边文章中我会介绍我封装的方法，同时记录这个过程中踩的一些坑。
2025-04-02 19:48:34
1132
原创 OpenLayers：海量图形渲染之矢量切片
本文介绍了OpenLayers中解决海量数据渲染的方案之一矢量切片，主要内容包括如何在GeoServer中制作矢量切片，如何在OpenLayers中加载矢量切片。
2025-04-01 23:34:28
1533
原创 OpenLayers：如何使用渐变色
本文介绍了如何在OpenLayers中使用渐变色，主要内容包括使用渐变色的思路，Canvas中使用渐变色的方法，以及OpenLayers中使用Canvas渐变色的方法。
2025-03-30 19:25:44
694
原创 canvas学习：如何绘制带孔洞的多边形
本文介绍了如何在Canvas中绘制带孔洞的多边形，并介绍里非零环绕规则和奇偶环绕规则的原理，还绘制了一个精美的剪纸实例。
2025-03-25 22:29:28
714
原创 封装深拷贝方法
在今年的四月份我写了一篇有关深拷贝的博客文章我与深拷贝_radash 深拷贝-CSDN博客。在该文章中有一个令我感到遗憾的点就是我没有实现一个自己手写的深拷贝。如今我想弥补当初的遗憾，在这篇文章中详细的讲述一下如何手写一个深拷贝方法。
2025-01-07 23:04:01
685
原创 封装数组去重的方法
这篇文章则是要介绍我封装 "数组去重" 方法的过程，我将参考 lodash 和 radash 中的实现方式，封装一个自己的去重方法。
2024-12-14 21:41:22
1024
原创 封装数据比较的方法
本文阐述了在JavaScript中封装一个数据比较方法的必要性，并介绍了在Lodash和Radash这两个方法库中是如何实现数据比较方法的。
2024-12-02 17:08:57
817
原创 echarts学习：绘制地图
本文记录了我使用echarts绘制一张地图的过程，在这一过程中我使用了series-map，visualMap，grahpic等echarts组件。
2024-08-14 19:18:20
3228
原创 echarts学习：通过图例事件实现选中后控制多条折线的显隐
我在工作中遇到了这样一个需求：我们都知道点击echarts折线图的图例，是可以控制折线的显隐的。我现在希望点击某一个图例可以改变多条折线的显隐。本文就记录了我实现这一需求的过程。
2024-06-15 14:54:16
1135
原创 echarts学习：使用dataset管理数据
在我们公司的组件库中有许多echarts图表相关的组件，这些组件在使用时，只需将图表数据以特定的格式传入组件中，十分方便。因此当我得知echarts 可以使用dataset集中管理数据时，我就决定自己一定要搞懂它，于是在最近的开发工作中我便使用dataset来绘制图表。本文就将介绍我在使用后对dataset的理解。
2024-06-14 09:40:42
627
原创 项目太大导致报错：JavaScript堆内存已满
本文介绍了我解决“无效的标记压缩导致接近了堆上限，分配失败 - JavaScript内存不足。”这一报错的过程。
2024-06-12 16:46:13
1043
原创 echarts学习：调色盘
在之前的几篇文章中，我试图复现一张图表。今天我想要实现的效果是让y轴与对应的折线显示同样的颜色。在此过程中我将介绍调色盘的用法。
2024-06-11 18:35:43
692
原创 echarts学习: 将y轴刻度标签放置到轴线内侧
在上一篇文章中，我试图复现下面的这张图表。经过一番努力实现了对6条y轴的布局。在这篇文章中我将介绍如何将y轴的刻度标签放置到轴线内侧。
2024-06-11 18:33:46
628
1
原创 echarts学习: 绘制双y轴折线图
我们公司项目中的折线图大都是双y轴的，因为这些图表往往需要同时展示水位和流量这两种不同单位的数据，因此如何绘制双y轴折线图就是就是我所面临的首要问题。
2024-06-05 09:44:46
1628
原创 echarts学习: 在图表中添加多条y轴会怎么样？
在撰写如何绘制双y轴图表文章时，我突然萌生出了一个想法，如果给图表添加两个以上的y轴会怎么样呢? 带着这个问题我开始了自己的探索之旅。
2024-06-05 09:34:51
1608
1
原创 echarts学习：如何让y轴显示为带箭头的直线
在我的固有印象中折线图、柱状图等图形中的y轴，应该都是一条末端带箭头的直线。然而在echarts中y轴的轴线是默认不显示的，也就会显示轴线末端的箭头。这篇文章中我记录了如何将echarts中的y轴变为我想象中的样子。
2024-06-04 19:59:47
1735
原创 echarts学习：基本使用和组件封装
我在工作中使用echarts较少，这就导致每次使用时都要从头再来，这让我很头疼。因此我决心编写一系列文章将我参与工作后几次使用echarts所用到的知识记录下来，以便将来可以快速查阅。
2024-06-01 15:02:07
1240
原创 echarts学习: 图表自适应
图表自适应是echarts组件的一个重要的功能。本文介绍了我实现图表自适应的过程，以及在这过程中我所犯的一些错误。还拓展介绍了防抖与节流、图表自适应的原理、ResizeObserver等内容。
2024-06-01 10:47:21
3605
原创 echarts学习：将echats实例代理为响应式对象可能带来的风险
本文介绍了将echarts实例代理为响应式对象可能存在的风险，已经对应的解决方法。
2024-05-30 19:48:14
619
原创 我与深拷贝
最近在掘金读到了一篇文章《Radash 能取代 Lodash？？？真幽默 - 掘金》，文章的评论区讨论起了深拷贝。"深拷贝" 我的"老朋友"，还记得在学习我人生中的第二道面试题的时候认识了它，还记得那是一道手写深拷贝的面试题，还记的那个讲题的老师很贱很嚣张，弹幕中戏称他讲的是"嘴硬代码"。不知道为什么想起这些心中莫名的有些忧伤，我想或许是时候总结一下"我与深拷贝的故事"，来一场"朝花夕拾"。
2024-04-21 16:55:59
1263
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人